类对摩天大楼有一种特殊的偏爱。对于一座没有去过的城市来说，它能给我们留下的最深的印象，莫过于留在各种影像里的天际线。高耸入云的大楼不仅有着极高的辨识度，更是毫无遮掩地彰显了人类的技术能力：毕竟，在建筑上不断突破高度的极限是一个相当晚近的趋势，它需要建筑材料、结构工程、电梯运输等全方位的技术基础作为支撑。追求建造更多的高楼，也因此似乎成为一座希望融入世界现代化大潮的城市必须积极投身的事业。

在过去二十年间的中国，与经济一同飞速发展的还有楼层的高度。根据世界高层建筑与都市人居学会（CTBUH）发布的报告显示，中国现在拥有世界40%的超高层建筑，150米、200米、300米以上的建筑数量都位居全球第一。不过，今年7月12日，国家发改委发布的《“十四五”新型城镇化实施方案》指出，要严格限制新建250米以上建筑，不得新建500米以上建筑。据《中国新闻周刊》等媒体报道，业内专家人士表示，这一政策变动，可能让中国的摩天大楼时代终结。而在此之前，自2020年开始，我国已经多次颁布“限高”的政策。

除了安全隐患、成本因素之外，旷日持久的疫情同样也带动了全球范围内对摩天大楼建筑思路的反思。很多人认为，疫情带来的频繁居家办公，可能让原本就空荡荡的摩天大楼的闲置空间进一步增加。甚至有媒体刊发的文章，直接以“疫情之后，摩天大楼时代终结？”为题。

不过，在著名建筑评论家迪耶·萨迪奇看来，这些唱衰摩天大楼的论调可能都不靠谱。在他今年翻译成中文出版的新著《权力与建筑》中，萨迪奇以一贯诙谐、辛辣而又精准的笔调，调侃了人类对高楼大厦的迷恋。而纵观历史，这种“幼稚”的迷恋恐怕并不容易消散。萨迪奇写道，世上一大荒谬就在于，“那些最自诩理性、冷静、谨慎的商人，却总是一头扎进高楼大厦里，想要造出一座比之前那座更高的大楼”，“他们想建造高楼的不理性冲动，很多时候就只是为了要当世界最高的那一个”。

不过，呼应这本书的标题，这种摩天楼迷恋并非全然是简单的非理性，其背后有着萨迪奇一直很关注的权力问题。而他的这个着眼点，其实也得到了不少其他作者的呼应。人们出于什么原因追捧摩天大楼？这种追捧背后体现出哪些权力意志？未来，这种追捧会改变吗？本期读刊，我们从萨迪奇的这本新书出发，给大家分享有关这一话题的有趣观点。

高楼综合征：

为何摩天大楼特别适合展示权力？

萨迪奇在《权力与建筑》中写了不少有意思的轶事，比如，希特勒的建筑师施佩尔修建的“荣誉广场”，用其洁白反光的墙面和四处环巡的探照灯营造出了一种奇特的空间压迫感，让前来谈判的捷克斯洛伐克第二共和国总统哈查面露菜色，也将国土拱手让给了纳粹。再比如，美国的小布什总统几乎全盘照搬了前功勋总统杰弗逊的总统图书馆设计风格，希望借助前辈的光辉一扫连任失败的耻辱。

秉持这种解构权力的姿态，萨迪奇将人类对高楼的追逐描述为一种“高楼综合征”——养宠物的人们可能会以为这是那个用来形容猫咪的症状。据说猫的“高楼综合征”指的是猫由于专注于鸟和其他动物而失去平衡，从高楼上掉下的状态。不过，对人来说，这种综合征首先体现在遭遇高楼时的那种“震撼”感。萨迪奇举了曾经世界上最著名的摩天大楼美国世贸中心双子塔的例子，“当你穿过双子塔之间的广场时，会觉得高楼的重量直接‘压’了过来，所以你会需要一定的决心才能走过这个广场...双子塔似乎把广场的空气压缩了，逼迫你用血肉之躯与之对抗”。

《权力与建筑》，迪耶·萨迪奇著，吴真贞译，重庆出版社2022年5月。

这段描写形象地点出了不少人面对摩天大楼时产生的那种敬畏又窒息的感受。特别值得一提的是，双子塔的设计师、大名鼎鼎的山崎实（Minoru Yamazaki）曾说，即便他常常站在高楼之上，还是有很严重的“恐高症”。萨迪奇觉得，这就像一位米其林大厨说他食盐过敏一样给人以矛盾感，但却从另一个侧面体现了摩天楼这种人造物如何反过来让人所臣服的——它持续给人造成控制感。

即便回溯到摩天大楼最早期的历史，这种“令人仰望”的效果已经是建筑师们的追求。丹·克鲁克香克在《摩天大楼》一书中详细地爬梳了公认的世界第一座摩天大楼——芝加哥瑞莱斯大厦（Reliance Building）的建造过程。这座在当时风格超前的建筑不仅通过外层玻璃和白釉陶板的设计给予路过的人们极大的视觉冲击力，还将用于分隔玻璃窗户的窄条型陶板竖框数量不断增加，进一步强化大厦的高度“令人仰望”的效果。

当人们检视世界上最著名的一些摩天大楼时，常常发现它们存在一些“虚高”：在实际的建筑物高度外，开发商会在这些大楼的顶部放置尖顶或者塔楼，让其高度大幅增加的情况下，还付出了较少的成本。这也就是建筑界常称的“虚荣高度”（vanity height）。比如著名的迪拜哈利法塔，从塔底到塔顶高828米，但最高的占用楼层只到585米。当然，这个摩天大楼的顶部区域也不一定都是“虚高”，比如一些超高楼会在这个“虚荣高度”的区域安装用于保持楼梯稳定的阻尼器。

如果仅仅是说“建筑是某种权力意志的外化”，那么似乎人们可以说，能外化权力意志的事物有很多，建筑有什么值得特别一提的呢？萨迪奇认为，对于追求权力——不论是政治还是经济——的人们来说，建筑有着表达意志的独特能力。许多研究都表明，人的控制欲会明显体现在对空间的掌控中。此外，建筑是我们生活里最常见到的、最宏大的文化形式，人们在建筑中生活和交往，仿佛控制了建筑空间就能对他人真正地施加影响。从地基开始目睹一座属于自己的摩天大楼崛起，似乎宣示着它的阴影覆盖之处，即自己占有之地。

《大都会》（1927）海报。

“世界是垂直的”：

摩天大楼的权力隐喻

虽然在古代，人们也热衷于建造更高的建筑，但这种热情无疑和现代社会最流行的一些观念更相契合。正如瑞莱斯大厦成为后续诸多未来主义建筑的灵感来源，摩天大楼象征着发展的速度和进步的愿景，被人们认为是指向未来的。用学者史蒂芬·格拉汉姆（Steven Graham）的话来说，大部分用来形容地位、品质、力量、成就的字眼，都和一种“垂直”的观念相关。比如“supreme”（最高的）一词，源于拉丁文的“supremus”，是“superus”的最高级形式，而后者的意思即是“在上方者”——这似乎从一个刁钻的角度解释了人们通过建筑来彰显自己权力欲望的动机。

格兰汉姆写过一本专著叫《世界是垂直的》，读者们看到这个书名可能会会心一笑。在某种程度上，它可能指向的正是大名鼎鼎的托马斯·弗里德曼的那本《世界是平的》，因为格拉汉姆在书中讨论的一个关键问题，即是当下学界对“垂直权力”的忽视。尤其是人文地理学，在研究权力问题时很大程度上被一种“水平透视的地理空间观念”主导（比如研究殖民扩张的问题），而忽视了对纵向空间中权力问题的考察。一个例证是，批判都市研究中极具影响力的《布莱克威尔城市指南》（Blackwell Companion to the City）从未提及“垂直”（Vertical）一词。可以说，探寻摩天大楼背后的权力问题，是一个亟待关注的课题。

《世界是垂直的》翻译中文译本书封。

在这本书中，格拉汉姆还提出了不少有关摩天大楼的精妙洞见，这些洞见也相当符合我们的日常经验。比如，摩天大楼在现代社会基本上是一种最典型的“权力阶梯”隐喻，它物质化了大企业最普遍的垂直阶层结构，用他引用的意大利记者马克·达拉莫（Marco d’Eramo）的话来说，人们在攀爬摩天大楼的时候只会向上凝视，一定程度上，这种建筑形式让你只尊重那些在你上面的人。

格拉汉姆还介绍了两位学者的观点。人类学家王爱华（Aihwa Ong）认为，奇观式的垂直巨型建筑的建造经常被视为亚洲与中东国家及相关精英人士倾注心血之地。如吉隆坡石油双塔等奇观式建筑的建造，能以杠杆的方式操作房地产的价值，同时为本地人民制造乐观的未来愿景。现代城市偏爱打造摩天大楼“林立”的景观，仿佛本国和其他国家的比较也因此可被楼层的高度指标化，这适应了现代社会追求“竞争”的氛围。

《云中行走》（2015）剧照。

此外，地理学者玛利亚·凯卡（Maria Kaika）的观点也特别值得我们深思。她认为全球范围内摩天大楼的不断“增生”也反映出日益集中的财富与权力。摩天大楼成为最能代表一个城市的地标式建筑，恰恰反映了这些城市之于全球精英们已不再重要。他们能够“不将身份和财富与任何一个单一特定的城市形成联结”，他们就像这些凝结着资本、金融产业的摩天大楼中的“跨国房客”，可以在这些标志性建筑构筑的全球网络中自由地流动。在全球资本流动的地图网络中，只有摩天大楼这种标志性之物是重要的——而显然，它们隔绝于普通的民众。凯卡认为，城市核心区外的居民也就因此得面对一种“傲慢”的、无法接近的权力地景。

这种来自“无法接近”摩天大楼的民众们的批评，曾经出现在双子塔刚于纽约落成时，也曾出现在吉隆坡和安哥拉。萨迪奇在《权力与建筑》中就写道，世贸中心起初在人们眼中就是一块“孤立而令人生畏”的飞地，周围的一切都遭遇它的挤压。吉隆坡则是为了打造石油双塔，急忙拆除了市中心的一个赛马场。从各种意义上，摩天大楼制造的敬畏感代表着一种权力的威压，让原本的城市区域感觉到不适，而这可能正是权力生效的结果。

也正是因此，城市理论家克里斯托弗·亚历山大曾经不无调侃地说：“大量证据都表明，高层建筑让人发疯”。不过，尽管摩天大楼彰显的权力会令人不适，但事情可能还没到最坏的地步。建筑理论家凯基·瓦纳利（Kazys Varnelis）提到一个有趣的说法：晚期资本主义社会里，“可见性”并非美德。换而言之，我们如果还能将“特朗普大厦”这样的大楼当作某种政治经济的象征进行反思和批判，说明我们依然能够有效地识别出权力的野心。然而，晚期资本主义社会的发展，倾向于让这些权力变得更为隐蔽，以至于接受其控制却不自知。

《摩天营救》（2018）剧照。

疫情之后，“摩天大楼热”

会就此终结吗？

随着全球疫情的持续，居家办公依然会是人们常常需要面对的境况。不断增高的空置率使得人们对兴建新的摩天大楼似乎望而却步。卫报2021年的一篇《摩天大楼的时代终结了吗？》就指出，伦敦近年来的高层建筑规划申请锐减。除了可能的高空置率外，另一个很重要的因素是人们对亲近自然的需求。疫情中生发出的一种“新都市主义”思维使得更多的低层建筑涌现，它们布置在公园、绿地边，它们代表着绿色和开放，与摩天大楼代表的那种封闭式、一体化、自给自足的空间迥然异趣。

不过，这篇文章也提到，历史上对摩天大楼终结的预测并不少见。比如上世纪70年代时，著名的未来学家阿尔文·托夫勒 (Alvin Toffler)就质疑过超高层建筑的未来。他在《第三次浪潮》中预测，未来随着人们工作形态的变化和通信技术的进步，办公大楼将不复存在，家庭将成为工作的中心单元。他或许难以想象，经历了八九十年代的摩天大楼建设热潮，自己在当时看似逆发展潮流而作的预言却可能被疫情后的世界应验。不过，很多城市理论家也认为，人们对面对面交往的热情将会驱动他们在建筑中聚集，这使得摩天大楼这样能容纳大量多样化人群的空间永远都有存在的必要。

《摩天营救》（2018）剧照。

学者理查德·史密斯在2021年的一篇学术文章中也指出，疫情之后，摩天大楼依然会保有旺盛的生命力。商业摩天大楼是一种“全球化特定回路的固化”，它们凝结着那些对全球化发展极为重要的产业，比如金融服务业，地方经济依赖它们与世界经济发生连接。同时，摩天大楼也常常成为城市中纵向联系不同产业的地带。高级服务业并不依赖与所服务者的接近度，但很依赖于与其他关键行业的连接，这些在摩天大楼中常常能实现。所以，史密斯认为，尽管大流行会使得我们的工作日趋数字化。人们前往城市核心从事知识经济工作的频率会下降，但知识经济的这种对连接性的需求，使得摩天大楼依然保有自身的价值。

参考链接：

1. World’s First COVID-Conscious Skyscraper and Medical Center Unveiled by Miami Mayor, Adventist Health and Royal Palm Companies.

https://www.globenewswire.com/en/news-release/2021/08/19/2283316/0/en/World-s-First-COVID-Conscious-Skyscraper-and-Medical-Center-Unveiled-by-Miami-Mayor-Adventist-Health-and-Royal-Palm-Companies.html

2. Giants in the Sky: Why are Skyscrapers Important?

https://www.latham-australia.com/blog/why-are-skyscrapers-important

3. Why skyscrapers after Covid-19?

https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8451974/

4. Vanity Height: How Much of a Skyscraper is Usable Space?

https://www.archdaily.com/425730/vanity-height-how-much-of-a-skyscraper-is-usable-space

5. The big idea: Is the era of the skyscraper over?

https://www.theguardian.com/books/2021/oct/18/the-big-idea-is-the-era-of-the-skyscraper-over

撰文/刘亚光

编辑/李永博 青青子

校对/赵琳

游戏玩法】

《Highrise Mogul》是关于建造和管理摩天大楼的大亨游戏。白手起家，开始铺设地板、生成墙壁、放置门、房间、装饰品、服务、电网等！通过雇佣员工、管理财务、开展公关活动和制定租户必须遵守的政策来管理高层建筑。成为最无情的房东或是享受作为一名建筑师，选择权在你手中。

详情链接：http://www.3h3.com/danji/252245.html

设计平面图，创造最美丽的花园。试着把尽可能多的人挤在一个楼层里，或者为租户提供一个田园诗般的生活场所，满足他们需要的所有服务和空间。加入一些细节，如自动售货机、装饰品或垃圾桶。选择建造单间公寓、办公室、豪华阁楼或商场来吸引游客。也许还可以给员工提供一两间休息室! 《Highrise Mogul》让你创造和建造你梦想中的摩天大楼。

作为高层建筑的主人，有几十件事情需要管理。选择和实施政策，以鼓励高收入的租户，阻止乱丢垃圾或支持可持续消费。雇用或者解雇从清洁工到维修工的人员。开始公共关系活动，以吸引更多的游客和更高价值的租户。通过你的资产负债表、租户数量增长和其他统计数据，找出需要调整的新东西。选择从城市电网购买电力或自己生产。接受并偿还贷款。《Highrise Mogul》让你完全控制你的建筑的每个方面!

《Highrise Mogul》模拟每个人居住、工作或访问你的摩天大楼。见证数以百计的人工智能租户、办公人员、工作人员或来访的购物者进行他们的业务、消费和决策。每个人的姓名、年龄、个人收入和外表都是不同的。让租户和访客满意，他们就会让你的银行账户保持充实。

【游戏截图】

过一个月的时间，在我遇到了很多“这个我不会做啊？”，“这个到底怎么做“的问题后，它终于成功上线了！下面总结一下整整一个月的时间我是如何开发JDRD，遇到的各种问题以及解决方案。

JDR DESIGN 是京东零售设计中台的门户站点，展示京东零售设计服务平台的产品以及应用场景，特点是动效丰富、图片细节多、要求整站文案和外链可配置。项目最大的困难就是动效开发复杂和开发排期紧凑的问题。

JDR DESIGN 地址：https://jdrd.jd.com/

这是我入职以来负责的第一个项目，需要花大量时间来熟悉新的开发流程，项目排期非常紧凑，并且在排期完后又新增了窄版、骨架屏、首页图标动效、入场动画、产品页头部动效等新的需求，每天高强度的加班，回想起来虽然很难，但是非常有挑战性，非常有收获。

项目架构

技术选型

作为一个 9012 年的 PC 端项目，我们自然也需要非常先进的技术选型来帮助我们提升研发生产力，所以一个优秀的前端框架和一个高效的前端工程化工具，自然是必不可缺的选择。选择团队自研的 Nerv 进行开发，Nerv 是一个基于 virtual dom 的类 Reac t组件框架，比 React 更小的体积更高的性能，还保持了对 IE 浏览器的兼容，满足了 JDRD 需要兼容IE10的要求。

自动化前端构建工具选择了团队自研的前端工程化工具 Athena，简化 webpack 配置工作，帮助我们在项目中实现自动化编译、代码处理、依赖分析、文件压缩、文件 MD5 戳等需求。

项目整体架构

在前端架构方面，根据上述的技术选型以及常见的前端体系，基于本项目的需求进行了些调整，整体架构设计如下：

Athena 和 Nerv 上文已经介绍过，下面介绍一下另外几个：

• 通用工具库：基于以往的项目建立的公共函数库，包括 Slider、Lazyimg、Lazyload、Nerv-loadable 等。
• NEOS 管理平台：将整站的文案和外链数据放在 NEOS 平台进行管理，简化文案修改等工作。
• 兜底展示：在请求到错误链接时重定向到 error.html 页面图片加载失败时展示兜底图
• MTA 数据分析：将网站的所有点击事件添加埋点进行数据上报，根据实时数据统计分析服务，监控版本质量、渠道状况、用户画像属性及用户细分行为。

开发过程

整个开发流程总结如下图所示：

既然是总结，开发过程中的流程当然没有这么完整，漏掉了一部分（已红色标注），导致开发到后面因为前面漏掉的环节，浪费了很多的时间。

• 整站设计规范：由于开发和设计是同时进行的，开始开发时只有首页定稿，没有其他页面的设计稿，以及窄版的规范，我们应该在开发前和设计师明确整站的设计规范，根据设计规范建立通用样式表，整站引入。
• 页面&楼层结构：楼层的结构设计对于后续做楼层懒加载非常重要，根据设计稿的功能结构区分楼层。
• 兼容 IE：JDRD 是需要兼容 IE 的，一些不兼容 IE 的 API 和样式属性应该尽量避免使用。
• 骨架屏：骨架屏的高度和楼层间隔和内容是一致的，应该建立公共类，定义骨架屏和内容一致的样式，在后续调整内容时，不需要再去调整一遍骨架屏的样式。

数据埋点：交互稿其实有详细介绍哪些地方需要点击跳转的事件，开发时应该在定义点击跳转时就给数据埋点转参。

除了在开发流程中的问题外，最头疼的就是动效的开发了，下文会详细介绍。

项目优化

性能优化

性能优化的初衷就是加快网站的加载速度，让用户能够更快的看到内容，上面介绍到前端工程化工具 Athena 已经做到合并、压缩了静态资源文件，那还有什么方法能够缩小请求的静态资源体积，加快首屏的加载速度呢，我们尝试了以下性能优化手段。

楼层懒加载

楼层懒加载就是按楼层划分组件，并进行代码切割，在页面滚动时按需加载组件。

Nerv-loadable 是一个专门用于动态 import 的 React 高阶组件，你可以把任何组件改写为支持动态 import 的形式，利用 import() 来进行动态加载。

const NewsBannerLoadable=Loadable({
  loader: ()=>
    import(/* webpackChunkName: "news_banner" */
    './news_banner'),
  loading: loadingPlaceholder.bind(null, loadingBlock),
  delay: 0
});

上面的代码在首次加载时，会先展示一个 loadingBlock，然后动态加载 news_banner 的代码，组件代码加载完毕之后，便会替换掉 loadingBlock。Lazyload 通过监听 window 对象或者父级对象的 scroll 事件，触发 load，实现懒加载，让组件进入页面可视区时才加载该组件。需要注意的是 lazyload 需要设置高度，才会撑起懒加载的区域。

<Lazyload {...this.lazyloadOptions} height={this.floorHeight.newsBanner}>
    <NewsBannerLoadable />
</Lazyload>

以首页为例，有四处组件是不需要首次加载的，而是使用动态加载：多端适配、物料、应用场景、设计思考。首次加载实际上只需要加载首屏的头部、视频、banner 即可。切分之后，首屏 js 体积缩减了 50KB。

图片懒加载

整站图片非常多，为了保持清晰度而且全部采用二倍图引入，消耗资源比较大，为了加快加载速度，我们选择让滚动条滚动到图片的可视区后才加载该图片。

使用 Lazyload 实现，和上述组件懒加载介绍的一样，包裹着需要懒加载的图片，就可以实现图片懒加载。

图片懒加载之外还有个优化，就是图片加载中、加载失败、加载成功的状态的判断，根据不同状态展示图片的内容。

使用 Lazyimg 实现这个功能：

• 使用 new Image() 创建一个新的 HTMLImageElement 实例
• img.onload()，img.onerror() 捕获到图片加载成功或者失败的状态加载中：显示兜底图加载成功：显示加载到的图片加载失败：显示兜底图

其他优化手段

除了上面两点外，还可以从 webpack 打包进行性能优化，webpack 打包后会生成一个或多个包含源代码最终版本的“打包好的文件”，它们由 chunks 组成，SplitChunks 插件可以将公共依赖项提取到现有的 entry chunk 或全新的代码块中，进行代码切割，减小 chunks 包的大小。

体验优化

骨架屏

以往的传统网站一般会在加载中展示一个 loading 态，也可以达到占位的效果，但是 loading 动画和真实模块耦合度低，界面效果不够优美，JDRD 则是选用骨架屏进行占位，以灰色豆腐块的形式尽量缩小真实模块结构与加载占位之间的视觉差异。

骨架屏的两个用途：

• 组件加载完之前的占位

使用 Lazyload 懒加载楼层组件，加载中使用 Loadable 提前占位，占位符设置为骨架屏。

• 数据加载完之前的占位

设置组件的 state.loaded 初始值为 false ，数据加载成功时 state.loaded=true ，render 函数里如果 loaded===false ，则显示骨架屏。

骨架屏的实现方式有两种，一是下载并引入骨架屏插件（如 antd ），根据不同模块引入对应的骨架屏组件，这种方式和 loading 动画一样，耦合度低，但是全局通用，节省代码量。二是根据视觉稿写骨架屏的样式。JDRD 选择的是第二种，骨架屏和真实模块实现高度耦合。每个页面结构不一样，对应的骨架屏也是完全不同，骨架屏暂时不能抽成公共组件全局通用。

宽窄版

首页定稿设定的宽度为 1240px ，对小屏不够友好，我们增加了一版窄版样式兼容小屏。

宽版和窄版开发的重点是定好通用的变量，包括字号粗细、宽窄版宽度、窄版尺寸比。这些通用样式规范需要和设计师统一规范，兼容窄版的开发就会变得非常简单。

只需要在两个地方判断宽窄版，给最顶层的标签加上 wide/narraw 类，在 narrow 下添加窄版的自定义样式。

1. 在页面刚加载到时判断宽窄版，在加载到样式表之前给 html 标签添加 wide/narraw

!function(e) {
  window.pageConfig={};
  pageConfig.isWide=function() {
  var n=e,
  i=document,
  o=i.documentElement,
  t=i.getElementsByTagName("body")[0],
  a=n.innerWidth || o.clientWidth || t.clientWidth;
  return a >=1300
  } ();
  var n=[];
  pageConfig.isWide ? (n.push("wide")) : n.push("narrow");
  var i=document.getElementsByTagName("html")[0];
  i.className=n.join(" ")
} (window, void 0);

2. 文档视图调整大小时判断宽窄版，修改 html 标签的 className

先引入 Events.js ，然后在 componentDidMount 里生命周期函数里绑定 ‘ isWideChange ‘ 事件，在文档视图宽度达到宽窄版临界点时调用。

componentDidMount() {
  window._.eventCenter.on('isWideChange', evt=> {
    this.setState({//更新state,更新视图
      isWide: evt.detail.isWide
    });
  });
}

动效开发

首页图标动效

为了突出设计理念，首页图标动效包含大量位移、旋转、缩放、形变、路径动画等细节，由始末动画+循环动画合成，传统做法是 css3 实现，这需要逐帧写动画细节，工作量非常大，我们尝试使用 Lottie 直接解析从 AE 导出的 json 格式的动画（方案由燕婷提出），发现能够完全还原AE动画。

Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，可实时渲染 After Effects 动画，从而使应用程序可以像使用静态图像一样轻松地使用动画。这样实现起来就非常简单了。分以下两步：

1. 在 AE 软件中用 bodymovin 插件将动画导出为 json 文件
2. 在项目中使用 lottie-web 将 json 格式的动画解析为 SVG（使用文档）

lottie-web 文档中的方法非常全面，JDRD 图标动效使用加载动画、播放指定帧区间、反向播放动画方法，就实现了起始动画 20 帧+循环动画 60 帧+起始动画反向播放 20 帧的动画合成操作。

项目示例代码如下：

npm install lottie-web //安装lottie-web
import lottie from 'lottie-web' //引入lottie-web到项目中
//lottie-web常用方法
this.anim=lottie.loadAnimation({ //加载动画
  container: element, 
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
});
this.anim.playSegments([[0,60]], true); //播放指定帧区间
this.anim.setDirection(-1);//动画反向播放
this.anim.play();//播放动画
this.anim.pause()//暂停动画

经过以上两步，Lottie 已经将一个 AE 格式的动画渲染在 web 页面上。

这里有 2 个需要注意的点：

1. json 文件的引入要使用 CDN，引入本地 json 文件会解析失败。
2. 如果动画源文件中有引入图片文件，bodymovin 导出的动画为 json+img。图片动画的兼容性有待确认。

以上就是用 Lottie 实现的动画，看到这里，是不是觉得 so easy，但是 Lottie 并不是万能的，不能解析所有的动画特性，开发前需要先看下支持列表。并和设计师确认是否都支持。

入场动画

JDRD 整站采用了骨架屏占位，那么入场动画最大的问题就是如何让它不和骨架屏冲突，解决方法就是楼层懒加载里面，再加一层入场动画的组件懒加载，两层懒加载的设置 offset 差，就可以做到在可视区外加载楼层组件，在可视区内播放入场动画。具体实现如下：

1. 楼层懒加载，在页面滚动时按需加载楼层组件

// 在距离底部200px时，加载楼层组件
getMaterialLoadable(){
  return this.getFloor(
    <Lazyload lazyloadOptions={offset: 200} height={1000}>
      <MaterialLoadable />
    </Lazyload>
  );
}

2. 楼层中的入场动画组件懒加载

// 在距离底部-200px时，加载入场动画组件，这时因为楼层组件已经加载过了，页面显示是真实组件而不是骨架屏
<Lazyload lazyloadOptions={offset: -200}>
  <div className="w">
    <IndexTitle showLine={true} title={this.state.title}></IndexTitle>
    {this.renderMaterial()}
  </div>
</Lazyload>

另外一个难点是序列动画的效果，序列动画就是将列表元素的动画执行时机错开，具体实现参考css3 animation 属性众妙。实现代码如下：

@for $i from 1 to 6 {
  .list__item:nth-child(#{$i}) {
    animation-delay: (-1+$i)*0.1s; /*计算每个元素的 animation-delay */
  }
}

产品页头部动效

产品页的头部动效分两部分，氛围动效 + 波浪动效。

• 氛围动效

氛围动效的实现比较简单，也是使用 Lottie 实现，这里遇到了 Lottie 不支持的特性，就是渐变，对于不支持的特性，我们可以拿到需要自定义样式的标签的 id，自定义样式，如图所示：

#__lottie_element_369 {
  stop[offset="0%"] {
    stop-color:  #FDFDFF;
  }
  stop[offset="100%"] {
    stop-color: #F7F7FB;
  }
}

自定义样式的时候，这里有个坑一定要注意，SVG 的 ID 是会变的，例如开发时，这个 ID 是 100，测试时这个 ID 有可能变成 101，这个是偶现的，目前还没有找到 ID 值 + 1 的原因，但是为了让自定义的样式生效，需要给 ID 为 100 和 ID 为 101 的标签都加上样式。

• 波浪动效

通过引入正弦波浪动效库 sine_wave 实现。sine_wave 使用 canvas 元素生成多个可配置的正弦波，这样我们就可以通过配置参数得到想要的正弦波浪，具体实现如下：

new SineWaves({
  el: document.getElementById( `waves`),//dom
  speed: 0.75,//速度
  width: function() {//canvas宽度
    return document.body.clientWidth;
  },
  height: 68,//canvas高度
  ease: 'Linear',//动画曲线
  waves: [//需要配置的正弦波浪
    {
      "timeModifier":1,//速度
      "lineWidth":1,//线条宽度
      "amplitude":30 * window.devicePixelRatio,//波浪高度
      "wavelength":125 * window.devicePixelRatio,//波长
      "strokeStyle":"rgba(221,221,233,1)",//颜色
      "type": function(x, waves) {//自定义波浪类型
        return waves.sine(x); // Combine two together
      }
    }
  ], 
  rotate: 0,//旋转角度
  wavesWidth: '400%',//波浪宽度
});

根据文档介绍的参数来看，有两个参数是实现 3D 旋转波浪效果的关键：

1. type，自定义波浪的类型，可以修改 x 轴的位移，让 3 根波浪错位，实现旋转的效果。

type: function(x, waves) {
  return waves.sine(x+8); // Combine two together
}

2. wavelength，波浪长度，3 根弧度一模一样的波浪明显是不符合要求的，只需要将红色的波浪的弧长加长，就可以实现一根波浪环绕另外两根波浪的效果。

开发过程中发现 sine_waves 的一个显示问题，它以默认二倍屏的方式定义的 canvas，这样在一倍屏下波浪是有问题的，解决方法是在参数波浪高度 amplitude 和波长 wavelength 根据 window.devicePixelRatio 来定义。

{
  "amplitude":30 * window.devicePixelRatio,//波浪高度
   "wavelength":125 * window.devicePixelRatio,//波长
}

全局细节动效

最后介绍的就是全局细节动效的优化，为了让整站的动效流畅，平滑的过渡，做了以下工作：

• 用 SASS 变量 $common_animation 管理通用动画，让整站动画一致化
• 图标动效和边框动效采用 SVG 实现，实现动画组件化的同时，矢量元素不失真
• 需要过渡的元素，用 visibility 代替 display 控制元素的显示隐藏

整体总结

本文从项目架构、开发流程、项目优化 3 个方面阐述 JDRD 官网的开发过程，中间遇到了太多问题，在问题的解决过程中记录和总结，是收获满满的喜悦，也发现了一些可以优化的模块，让下次能够做得更好，在开发过程中的多些思考和探究，最优化的设计项目。

感谢阅读！

凹凸实验室原链接：https://aotu.io/notes/2020/02/21/jdrd-summary/