全文高能干货，强烈建议学习哟！腾讯技术干货！

编者按:今天腾讯的何分享了最近做的一个很棒的H5总结笔记，彻底梳理了设计动效、具体实现方法和踩到的一些坑。全文高能干货，强烈建议学习！8月28日鬼节前夕，企鹅FM(编者按:这里绝不是广告)联合《盗墓笔记》推出了“勇敢者游戏”活动。作为一名UI工程师，在这个移动互联网强大的时代，每次我看到朋友圈中分享的各种模式H5页面，我总是感到痒，我也想做一个很酷的动画和声音效果H5。回想起制作鬼节活动页面，页面效果在午夜零点左右调整。看着页面上可怕的画面渐渐出现，吓到自己是相当难忘的。作为一个刚来到活动页面新手村的朋友，我踩到了一些坑，所以让我进入正题。哦，等一下，请先扫描二维码~在获得视觉稿和需求表后与设计师沟通，我们需要了解整个活动过程。有时，设计师不会将每个页面的动画效果制作成视频，而是通过口头方式与工程师沟通。这样，工程师就需要结合活动页面流程和设计稿，在与产品和设计沟通之前，先构思一些动态效果，这样沟通效率就会更高。动画新手有时会想到一些奇怪的效果，可能不符合整体设计风格，可能违反实际的物理规律，有自己的想法，但也与产品设计确认。比如这个页面:手电筒先出现，再出现光。在我的想象中，手电筒上不会有黄绿色的光。后来设计师提醒:如果完全没有光源，就看不到手电筒了。改成现在的方案:闪光两次:物理定律什么的，我记不清TT了。P.S.做动画的时候记住动效原则(腾讯精品文！UI界面动效设计指南太多干货)，基本上动画效果不会偏离。仔细想想，这个活动页面没有使用任何高级技能，基本上是通过position定位和CSS3动画完成的。然而，在写页面之前，仍然有很多担忧：1、如何根据iPhone6的大小确定元素的位置，然后使用zoom或transform:scale(x)拉伸页面或拉伸元素。在实际开发中，我曾经混淆过这两个属性的用法，所以我做了一些研究，稍后我会详细讨论这两个属性。2、如何实现3D变化效果？你应该听说过或使用过两个属性：perspective和perspective-origin。虽然你看过很多教程和分享，但你仍然感到困惑。在对3D动画的各种搜索解释之后，我认为原则可能是这样的：简单而粗略地说，请想象你站在上图中的红点位置，你和物体之间的距离是perspective，眼睛的位置是perspective-origin。好了，现在站在位置，看看物体，想象物体投影在某个平面上的效果(这里的平面是我们的显示屏)，这就是3D投影的结果。好了，现在站在位置，看看物体，想象物体投影在某个平面上的效果(这里的平面是我们的显示屏)，这就是3D投影的结果。关于perspective-origin，看看这个demo。说了这么多，在实际应用中，我还是找到了一个生成器。效果可能是这样的：如果你想关注磁带的实现，主要涉及以下图片资源：磁带分为磁带底部、磁带封面和磁带三部分。封面和磁带是正视图，需要使用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元素时，我怀着对不起前台的心。3、请写笔记和UI工程师对接的前台学生，需要看笔记才能知道什么时候加什么class。他们以为刚开始接需求的时候从来不写笔记...我真的很抱歉前台学生TT现在我的个人笔记如上图所示。我也看过小组里不同同事的注释风格，差不多。主要思想是“XX时加XXclass”，和对接的同学约定~zoom和transform:scale(x);接下来，我将详细讨论上述zoom和transform的使用情况:scale(x);问题。无论是活动页面的设计稿还是产品页面的设计稿，为什么要逐渐使用375？×以667iPhone6为基础。但在现实生活中，这些页面会出现在细长的iPhone5中、iPhone4，480px高度，大屏幕iPhone6 ，更不用说在三星小米魅族一加等尺寸都不知道该怎么办的Android系列上打开会是什么gui了。以本次活动页面设计稿为例，页面底部的位置有与用户互动的按钮。有一个前提，为了兼容不同宽度的屏幕，基于iPhone6的375px用zoom属性缩放页面。可以看出iPhone5的宽度和iPhone4一样，看设计稿，页面元素从上到下分布:也就是说，使用相同的zoom值来满足iPhone5的页面效果，但是在iPhone4上，按钮会偏低。页面的整体感觉也偏底。但是zoom值不能随意更改，否则会显示红框中录音机图片的左右边界。但是zoom值不能随意更改，否则会显示红色框中录音机图片的左右边界。因此，为了调整iPhone4元素之间的间距，最终效果可能是这样的：你可以看到效果不是很好，整个页面非常拥挤，所以在这种情况下，我认为用统一的zoom值调整有点击倒，如果元素微调，那么最好的效果会好得多。此外，zoom会有一些性能问题。小组中的一些同事进行了zoom调整，并通过transform将class添加到每个元素中:scale()调整。最神奇的重建是，条条大路通罗马，如何达到他们想要的视觉效果，但由于各种原因，实现的方式会有所不同。当你得到设计草案时，首先看看设计草案的布局。其中一些从页面顶部到底部都有效。此时，有必要考虑如何确保页面在iPhone4等屏幕不够高的设备上的完整呈现；或者隐藏哪些元素不影响交互。有时候页面上的元素比较集中，这个时候要考虑iPhone6 在这样的大屏幕设备上，是否要调整间距，使页面不会太空。要知道设计稿背后的含义，不是一拿到就开始做的，有些元素其实是要整体考虑的。乍一看，有些似乎是用position定位的，分别写top值就好。众所周知，设计师真正需要表达的是，作为一个整体，他们必须绝对在页面中间。没有得到这个point，兼容的时候会哭。zoom和transform:先来看看zooom和transform的概念:scale的说明:Specifiestheinitialzoomfactorforthewindoworviewingarea.Thisisamagnifyingglasstypeofzoom.Interactivelychangingthezoomfactorfromtheinitialzoomfactordoesnotaffectthesizeoftheinitialortheactualviewport.从定义上看，zoom缩放的是zoom容器的视角，你可以把它想象成放大镜的效果。这个属性是可以继承的。因此，当我们与设备屏幕兼容时，我们可以在body标签下添加一个div来包裹页面上的其他元素，然后在div上添加zoom。视觉效果是页面上的其他元素也被缩放。但是有些元素不支持zoom。Atwo-dimensionaltransformationisappliedtothecoordinatesystemanelementrendersinthroughthe‘transform’property.Thispropertycontainsalistoftransformfunctions.Thefinaltransformationvalueforacoordinatesystemisobtainedbyconvertingeachfunctioninthelisttoitscorrespondingmatrix(eitherdefinedinthisspecificationorbyreferencetotheSVGspecification),thenmultiplyingthematrices.说scale应该先看transform。将transform属性应用于元素的过程实际上是矩阵变换的过程。渲染时，确定元素的坐标，然后用transform的属性值计算矩阵以获得最终坐标。然而，您会发现，在通过transform改变显示位置后，该元素的tbrl值不会更新，transform属性不可继承。Thevalueofthetransformpropertyisalistofappliedintheorderprovided.…specifiesascaleoperationusingthe[sx,1]scalingvector,wheresxisgivenastheparameter.…specifiesascaleoperationusingthe[1,sy]scalingvector,wheresyisgivenastheparameter.scale是transform的属性值，是缩放矩阵。当一个元素被定义为transfrom时:scale(x);之后，还是结合它的transfrom-origin，最终的缩放效果可以确定。当一个元素被定义为transfrom时:scale(x);之后，还是结合它的transfrom-origin，为了确定最终的缩放效果。这仍然是一个与屏幕分辨率兼容的问题。如果你想要transfrom:scale(x)要达到与zoom相似的效果，记得将transfrom-origin设置为00。之所以这样设置，是因为文档流中的元素是以它的左上角为中心的，而当元素与文档流分离时，就需要使transform。:scale(x)要达到与zoom相同的效果，还需要具体分析如何设置transform-origin。也许你注意到，在前一句话中，我说的是“相似的效果”，而不是“相同的效果”，因为我在使用scale时可能会遇到以下问题。下图左侧为transform:scale(.85)右边是zoomm