小编说：干的不能再干的干货了，作者从做作品的由来、想法，前期设计沟通、到代码实现，以及过程中遇到的坑，一一进行了汇总，最终效果也很酷，值得收藏学习。
前言
最近火热的有声娱乐平台 APP，企鹅 FM(编者注：此处绝非广告)，在8月28日鬼节前夕，联合《盗墓笔记》推出了“勇敢者的游戏”活动。作为一个 UI 工程师，在这个移动互联网叱咤风云的时代，每次看到朋友圈中被分享的各种花样 H5 页面，总是心痒难耐，也想做有着酷炫动画和带感声效的 H5 呢。回想到做鬼节活动页的时候，接近午夜零点还在调整页面效果，看着页面上渐隐渐现的可怕画面，活生生吓到了自己，也是蛮难忘的。作为刚刚来到活动页新手村的朋友，踩到了一些坑，所以让我进入正题吧。
与设计师的沟通
在拿到视觉稿和需求单之后，我们需要了解整个活动的流程。有的时候，设计师并不会把每个页面的动画效果做成视频，而是用口述的方式和工程师进行沟通。这样就需要工程师结合活动页流程和设计稿之后，自己先构思一些动效再去同产品以及设计沟通，这样交流的效率才会比较高。
动画新手有的时候会天马行空想到一些奇怪的效果，可能会不符合整体设计风格，可能会违反现实物理规律，有自己的想法，还要和产品设计确认。比如这个页面：
一开始是做成了先出现手电筒，再出现光，在我的设想中刚开始手电筒上不会有那层黄绿色的光。后来经设计师提醒：如果完全没有光源，也应该看不到手电筒。才改成了现在的方案：灯光闪两下：物理定律什么的，我才记不清了呢。
P.S. 做动画的时候铭记动效原则，基本上动画的效果不会跑偏。
具体实现
仔细想想，这个活动页面并没有用到什么高深技巧，基本上是用 position 定位和 CSS3 动画完成的。不过在写页面之前，还是有不少担心的：
1、页面兼容怎么做
按照 iPhone6 的尺寸确定元素的位置，然后用 zoom 或者 transform: scale(x) 拉伸页面或者拉伸元素。在实际开发的时候，我一度对这两个属性的用法产生混淆，所以作些了研究，稍后会详细说说这两个属性。
2、3D 变化效果怎么实现
大家应该早就听说过或者使用过 perspective 和 perspective-origin 这两个属性了，虽然教程和分享都看过不少，但真正写起来还是有一些摸不着头脑，各种搜索关于 3D 动画的解释之后我认为原理大概是这样的：
简单粗暴地说，请想象你是站在上图中的红点位置，你与物体间的距离是 perspective，眼睛的位置是 perspective-origin。好了，现在站定位置，去看这个物体，想象物体投影在某个平面上的效果(这里的平面就是我们的显示屏)，这就是 3D 投影的结果。
关于 perspective-origin，可以看看这个demo。
说了这么多，在实际运用中，我还是找了一个生成器。
得到的效果大概是这样的：
想要重点说一下磁带的实现，主要牵涉到的图片资源是下面这几个：
磁带被分成了3个部分，磁带底部，磁带封面和磁带。其中封面和磁带是正视图，需要使用 3D 旋转，让这两个元素“躺下去”，而且为了保证这三个元素之间不会因为屏幕的缩放，出现错位的问题，需要保证磁带封面和磁带的定位是基于磁带底部的。其实磁带上还有两片盖子，不知道大家有没有注意到。其实这个盖子是左右对称且中心对称的，所以完全可以只用一张图片完成这样的效果，用 transform: scale(-1, 1); 和transform: scale(1, -1); 实现。
3、动画如何才有代入感?
这个活动页面我个人最喜欢的地方就是星星砸下去的动画，感觉所有的戏份都在它身上。开始的设想只是星星砸下去，感谢在制作过程中，经验丰富的同事所提的建议：星星砸下去的时候要有灰尘溅起或者火星四溅的效果。后来和设计商量，最后用了灰尘溅起的效果。不过本来还想做，星星背后的铁板应该要有震动的效果。由于时间关系，震动的效果有点不好添加，所以放弃了，这一点感觉有一些遗憾。可能页面新手的经验不够，很多动画的效果因为有限的想象力所以不太完善。这个时候和身边经验丰富的同事请教是很有效的方法。同时，一定要多看 B 站拓宽视野才行哦。
踩到了一些坑
页面布局并不复杂。前文也提到，基本上使用 position: absolute; 来实现的，不过遇到了一些问题就有了以下总结：
1、杀鸡就不要用牛刀，能又快又好解决问题才最重要
上图是首页的截图，页面加载之后应该可以看到“胆量测试”下面的蓝色线条有一个动画。
故事是这样的，自从 SVG 帝王小啪带着神器 svgartisan 降临，做页面的时候总想加上一点 SVG。然而这个蓝色线条上有特效，所以用 PS 导出 SVG 后还要做二次处理才能还原设计稿上的效果，而且 SVG 的代码你懂得，它总是有点长。其实有个简单粗暴的方法：改变蓝色线条的图片宽度，虽然这个方法从性能上看并不好，但考虑到这个页面也只有这里发生了重绘，所以还是用图片+宽度控制来实现了。
不知道大家会不会为了某一种技术而去做某一件事情，但其实完成那件事情才是真正的目的，却因为那个技术而耽误了不少进度，这样就有点进入了炫技的误区。
2、答应我，伪元素上就不要做动画了
伪元素真的是神一样的存在，一个标签自带两个儿子，不知道为什么就有种金闪闪的感觉。但是伪元素上的动画真的很坑，年少无知，页面都写完了，发现在 iOS 上美如画的动画效果，到了小米和魅族上就……
Android 上坑多，不要一次应用太多新技术。比如在魅族上用 flexbox 布局，就要加上 display: -webkit-box。还有一个教训就是，页面果然应该做一个测试一个啊QAQ。因为这个项目是重构和前端并行开发的……把伪元素改成实际 DOM 元素的时候，是怀着一颗对不起前台的心的。