干货!如何做一个让人闻风丧胆的Html5页面.pdf

干货！如何做一个让人闻风丧胆的 Html5 页面 编者按：今天腾讯的何六六同学把最近做的一个超赞的 H5 总结笔记分享出来，将设计动效、具体实 现方法、踩到的一些坑都完整梳理了一遍，全文高能干货，强烈建议学习哟！ 前言 最近火热的有声娱乐平台 APP ，企鹅 FM （编者注：此处绝非广告），在 8月 28 日鬼节前夕，联 合《盗墓笔记》推出了 勇敢者的游戏“ ”活动。作为一个 UI 工程师，在这个移动互联网叱咤风云的 时代，每次看到朋友圈中被分享的各种花样 H5 页面，总是心痒难耐，也想做有着酷炫动画和带感 声效的 H5 呢。回想到做鬼节活动页的时候，接近午夜零点还在调整页面效果，看着页面上渐隐渐 现的可怕画面，活生生吓到了自己，也是蛮难忘的。作为刚刚来到活动页新手村的朋友，踩到了一 些坑，所以让我进入正题吧。哦，等一下，请先扫一下二维码啦 ~ 与设计师的沟通 在拿到视觉稿和需求单之后，我们需要了解整个活动的流程。有的时候，设计师并不会把每个页面 的动画效果做成视频，而是用口述的方式和工程师进行沟通。这样就需要工程师结合活动页流程和 设计稿之后，自己先构思一些动效再去同产品以及设计沟通，这样交流的效率才会比较高。 动画新手有的时候会天马行空想到一些奇怪的效果，可能会不符合整体设计风格，可能会违反现实 物理规律，有自己的想法，还要和产品设计确认。比如这个页面： 一开始是做成了先出现手电筒，再出现光，在我的设想中刚开始手电筒上不会有那层黄绿色的光。 后来经设计师提醒：如果完全没有光源，也应该看不到手电筒。才改成了现在的方案：灯光闪两下 ：物理定律什么的，我才记不清了呢 T T 。 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 、动画如何才有代入感？ 这个活动页面我个人最喜欢的地方就是星星砸下去的动画，感觉所