全文高能干货，强烈推荐学习。前言8月28日中元节前夕，联合《盗墓笔记》推出“勇敢者的游戏”活动。作为一名UI工程师，在这个移动互联网时代，每次看到朋友圈里分享的各种花哨的H5页面，总觉得心痒痒的。我还想制作具有炫酷动画和情感音效的H5。回想当初在做中元节活动页面的时候，临近午夜还在调整页面效果，看着页面上一个个恐怖的画面淡淡淡淡的，吓得我都活了，真是难忘。作为刚来活动页面新手村的小伙伴，踩了一些坑，先说正题吧。与设计师沟通拿到视觉稿和需求清单后，我们需要了解活动的全过程。有时候，设计师并没有把每个页面的动画效果做成视频，而是通过口述的方式与工程师沟通。这样就需要工程师在结合活动页面流程和设计稿后自己构思一些动效，然后与产品和设计进行沟通，这样沟通效率会更高。动画新手有时会想到一些奇怪的效果，可能不符合整体设计风格，可能违背现实的物理规律，有自己的想法，还得跟产品设计确认。比如这个页面：一开始是先出现手电筒，然后才出现灯。在我的想象中，一开始手电筒上不会有黄绿色的光。后来设计师提醒：如果根本没有光源，应该是看不到手电筒的。改成了现在的方案：灯闪两下：物理定律什么的，记不住TT.P.S.制作动画时牢记动效原则（腾讯优秀文章！干货多的UI界面动效设计指南），基本上动画效果不会出错。想想具体的实现，这个活动页面并没有用到什么高深的技巧，基本上就是靠位置定位和CSS3动画完成的。但是，在写页面之前，还是有很多烦恼：1、如何让页面兼容？根据iPhone6的尺寸确定元素的位置，然后使用zoom或者transform:scale(x)拉伸页面或者拉伸元素。在实际开发过程中，曾经对这两个属性的使用感到困惑，所以做了一些研究，后面会详细讲到这两个属性。2、如何实现3D变化效果perspective和perspective-origin这两个属性你应该听过或者用过。搜了一下3D动画的解释，我觉得原理大概是这样的：简单的说，假设你站在上图中的红点处，你和物体的距离就是透视，而物体的位置眼睛是透视原点。好，现在站稳，看这个物体??，想象一下这个物体投影到某个平面上的效果（这里的平面就是我们的显示屏），这就是3D投影的结果。对于perspective-origin，你可以看看这个demo。说了这么多，在实际使用中，还是找到了一个生成器。得到的效果大致是这样的：我要重点关注磁带的实现。涉及的主要图像资源如下：磁带分为3个部分，磁带底部、磁带封面和磁带。封面和胶带是正视图，需要3D旋转才能让这两个元素“躺下”。为了保证三个元素不会因为画面的缩放而错位，需要保证磁带盖和磁带的定位是基于磁带的底部。其实磁带上有两个封面，不知道大家有没有注意到。其实cover是左右对称和居中对称的，所以只用一张图就可以实现这个效果，使用transform:scale(-1,1);和变换：比例（1，-1）；实现。3、动画如何才能有代入感？这个活动页面我个人最喜欢的部分就是星星坠落的动画，感觉所有的场景都在上面了。最初的想法只是掉落星星，感谢制作过程中经验丰富的同事的建议：星星掉落时，应该有灰尘飞溅或四处飞溅的火花。和设计师商量后，最后还是用了灰尘飞溅的效果。但我还是想做。星星后面的铁板应该有震动效果。由于时间关系，振动的效果有点难加，所以放弃了，有点遗憾。可能是页面上的新手经验不够，想象力有限，很多动画的效果都不是很完美。这个时候，向身边有经验的同事请教是非常有效的。同时也要多看B站，开阔眼界。踩了一些坑之后，页面排版就不复杂了。上一篇文章讲到，基本上是用position:absolute;来实现的，但是遇到一些问题，我们有以下总结：1.勿以牛刀杀鸡。最重要的是快速轻松地解决问题。上图是首页截图，页面加载后你应该会看到“胆量考验”下的蓝线动画。故事是这样的，自从SVG大帝小帕带着神器svgartisan来了之后，我就一直想在做页面的时候加一点SVG。不过这条蓝线是有特效的，所以用PS导出SVG后，需要二次加工还原设计稿上的效果，而且SVG的代码你懂的，总有点长。其实有一个简单粗暴的方法：改变蓝线的图片宽度。这种方式虽然在性能上不太好，但是考虑到这个页面只是在这里重绘，所以还是用图片+宽度控制来实现的。.不知道大家会不会为了某项技术去做某件事，其实完成那件事才是真正的目的，只是因为那个技术耽误了很多进度，所以有点作秀断误会。2.答应我，不要在伪元素上做动画。伪元素真的是神一般的存在。一个标签带有两个儿子。不知道为什么有种金色的感觉。但是伪元素上的动画真的很烂。我年少无知。我完成了这一页。我在iOS上找到了如画的动画效果。说到小米和魅族，那就是……安卓坑多，不要一下子套用太多新技术。.比如在魅族上使用flexbox布局，需要添加display:-webkit-box。还有一个教训就是页面要一个一个测试，QAQ。因为这个项目是重构和前端并行开发的。。。把伪元素改成实际DOM元素的时候，有一颗对不起前台的心。3.请写一个便条。跟UI工程师对接的前台同学需要看笔记才能知道什么时候加什么类。我想我刚开始接需求的时候，从来没有写过notes...真的很对不起前台同学TT现在我个人的notes就如上图所示。我也看过群里不同同事的注释风格，大同小异。主要思路是“在XX时间加XX班”，这样就可以和连接的同学约定好啦~我会用zoom和transform:scale(x);接下来，我们将讨论缩放和变换：scale(x);上面详细提到的问题。#p#为什么要用zoom现在不管是活动页的设计稿，还是商品页的设计稿，都逐渐以375×667的iPhone6为基准。但在现实生活中，这些页面会出现在又瘦又长的iPhone5、480px高的iPhone4、大屏iPhone6+上，更不用说三星、小米、魅族、一加等大小尺寸的了。不知道该怎么办。安卓系列开什么gui好。以本活动页面设计稿为例，与用户交互的按钮位于页面底部。有一个前提，为了兼容不同宽度的屏幕，页面以iPhone6的375px为基准，用zoom属性缩放。可以看到iPhone5和iPhone4的宽度是一样的，看设计稿，页面元素从上到下分布：也就是说，使用相同的缩放值满足了iPhone5的页面效果，但是在iPhone4上，按钮会在底部，页面整体感觉也是在底部。但是缩放值不能随便改，否则会显示红框内记录仪图片的左右边界。所以针对iPhone4调整元素间距，最终效果大概是这样的：value是用来调整的，有点粘不下去，如果对每个元素都进行微调，最好的效果会好很多。添加缩放会导致某些性能问题。组里有的同事是调整zoom的，有的是给每个元素加class通过transform:scale()来调整。重构最神奇的地方在于条条大路通罗马，无论如何都可以实现你想要的视觉效果，只是实现的方式因各种原因而有所不同。拿到设计稿后，首先要看设计稿的布局。其中一些从页面的顶部到底部都有影响。这时候就要考虑如何保证页面在iPhone4等屏幕不够高的设备上完整渲染；或者在不影响交互的情况下隐藏了哪些元素。有时页面上的元素比较集中。这时候就需要考虑是否在iPhone6+等大屏设备上调整间距，让页面不会显得太宽敞。要知道设计稿背后的意义，并不是一拿到手就开始动手。有些元素实际上需要作为一个整体来考虑。有的乍一看好像是按position定位的，单独写top值就行了。然而，设计师真正想要传达的是，它们绝对以整个页面为中心。不到这一步，相合了就哭了。缩放和变换的概念：scale先来看一下缩放和变换的说明：scale：指定窗口或查看区域的初始缩放系数。这是放大镜类型的缩放。从初始缩放因子交互更改缩放因子不会影响初始或实际视口的大小。zoom顾名思义，zoom是对zoomed容器的视口进行缩放，可以想象成放大镜的效果。这个属性是可以继承的，所以我们让设备屏幕兼容的时候，可以在body标签下添加一个div来包裹页面上的其他元素，然后给这个div加上zoom，达到其他元素在上面的视觉效果页面也被放大了。但是有些元素不支持缩放。通过“变换”属性将二维变换应用于元素呈现的坐标系。此属性包含转换函数列表。坐标系的最终变换值是通过将列表中的每个函数转换为其对应的矩阵（在本规范中定义或参考SVG规范），然后将矩阵相乘而获得的。说到scale，首先要看transform。将transform属性应用到一个元素上的过程其实就是一个矩阵变换的过程。渲染的时候会确定元素的坐标，然后和transform的属性值进行矩阵运算，得到最终的坐标。但是你会发现，一个绝对定位的元素通过transform改变了它的显示位置后，这个元素的tbrl值并不会更新，transform属性也无法继承。transform属性的值是按提供的顺序应用的列表。…使用[sx,1]缩放向量指定缩放操作，其中sx作为参数给出。…指定使用[1,sy]缩放向量的缩放操作，其中sy作为参数给出。scale是transform的一个属性值，它是一个缩放矩阵。当一个元素被定义为transfrom:scale(x);,它必须结合它的transfrom-origin来确定最终的缩放效果。还是屏幕分辨率的兼容性问题。如果你想使用transfrom:scale(x)实现类似缩放的效果，记得将transfrom-origin设置为00。这样设置的原因是文档流中的元素在缩放时其左上角为居中，当元素脱离文档流时，要使transform:scale(x)和zoom达到同样的效果，需要具体分析transform-origin如何设置。你可能已经注意到，在上一句中，我说的是“类似效果”而不是“相同效果”。这是因为在使用秤时可能会遇到以下问题。下图中左边是transform:scale(.85)，右边是zoom:.85：下面的部分是外层容器的样式，背景在switch-wh动画中定义，以及浏览器可以通过绝对定位自行计算，保证容器的大小占据整个屏幕：因为zoom是应用在body下面占据屏幕空间的容器，所以根据zoom的定义和继承，我们可以说在这个页面上使用缩放实际上是缩放了整个屏幕（也就是Viewport），可以想象成在浏览器中打开页面，然后在页面上进行放大：为什么scale会留下右边丢失的白色和底部？让我们回到变换的定义，“通过‘变换’属性应用于元素呈现的坐标系”。当元素全部渲染完，坐标确定后，再进行缩放，即在原有元素的基础上改变尺寸。因此，虽然渲染时.sf-index的四个角的位置分别是(0,0),(100%,0),(0,100%),(100%,100%)，取(0,0)后as变换中心的尺度变为(0,0),(85%,0),(0,85%),(85%,85%)。我们将在页面右侧看到一个宽度为15%的白色边框，在页面底部会看到一个高度为15%的白色边框。看来zoom是无敌的。看来兼容的时候应该用zoom。好吧，这就是我在看到比例结果后的想法。然后发现缩放后的页面，文字显示不正常。下图左侧是缩放后的iPhone4，右侧是未缩放后的iPhone6：由于页面整体缩放了，所以文字也自然缩放了。正好这种像被刀削过一样的文字效果还是挺适合中元节活动页面的，所以就没有做任何处理。通常情况下，如果需要处理，就是调整文本的line-height和容器的高度，使其不至于出现遮挡。正如缩放后页面元素的实际大小会发生变化一样，图片的大小也会发生变化，使用sprite图片时会出现一些问题。sprite图片将各种小图片组合成一张大图片，通过width、height、background-position来定位图片。看下图，可以发现相邻图片的边框也显示在一起。检查元素发现用于显示图片的元素尺寸不正确：可以看出该元素的正确尺寸应该是198×52。zoom:1.10放大后，容器变小。后来将缩放值调整为1.104（414/375），图片的边界问题就解决了。关于图片显示不正常的问题，我的推断是缩放值设置太小，图片缩放后计算不正确，图片的容器太大，所以边缘相邻的图片显示出来。后来根据比例设置缩放值，就不会出现这个问题了。最后，zoom对性能不友好。下面两张gif是zoom和transform引起的重绘：scale:很明显，在文档流中对任意一个元素添加zoom都会导致整个页面重新渲染，而transform:scale只是在当前元素上重绘。有更好的兼容方法吗？这样一来，这两种方法都不能用了。。。还有其他兼容的方法吗？一些。对于需要大量图片的页面，我们在做兼容性的时候经常会担心什么？当然图片的比例是有问题的，所以我们也会使用通过伪元素设置padding-top的方法来保证图片的比例正常显示。只是这种写法通常需要结合background-size:cover;而我们常用的工具CssGaga在生成sprite图片后会覆盖background-size。按照现在的计划……精灵图是不会合成的。另一种解决方案是使用mediaquery结合rem（或者percentage）来完成这样的布局，但是gaga目前不支持background-sizerem，所以sprite图片如何合成以及如何生成新的样式还需要寻找新的方向.当不需要合成sprite图像时可以使用这两种方法。推荐工具/网站查看设备屏幕参数设计关键帧在哪里寻找动画灵感：http://codepen.io/,https://dribbble.com/
