爱果果-H5技术实现教程：多屏CSS动画精进技巧
H5技术实现教程：多屏CSS动画精进技巧
当下H5火的程度不用多说，各种各样的创意、效果层出不穷，然后关于H5技术实现文章却是很少，让很多同学望而生畏，摸不着头脑。本文由出品，从多屏CSS动画技术实现入手，相信能够给大家在H5技术实现上带来些思路。
当下应用已经相当广泛，其中重要成员之一就是动画。并且，随着CSS动画的逐渐深入与普及，更复杂与细腻的动画场景也如雨后春笋般破土而出。例如上个月做的「企业QQ-新年祝福」活动：
感谢shirley帮忙录制上面的视频，虽然视频内容是手机上的显示效果，但是，这个“企业新年祝福活动”原本只针对桌面端，移动端是后来辅助增强（增加了相当于活动页面UV 5.7%的点击）。而目前大多数类似页面只针对移动端，例如其他同事实现的QQ空间5.0预约页第二版：
扫码(需登录)或者链接二选一：
因此，需要多一点适配的技巧。但是，对于动画效果实现，其实都是一脉相承的，最终的实现需要很多点滴积累，我这里讲三个部分同学可能不知道的相关CSS技巧。
注：示例代码的私有前缀均省略，大家自行脑补
技巧一、使用animation-play-state控制每屏动画播放
1. 类名active与动画触发
首先，使用active触发每一屏的动画，几乎已经约定俗成，应该也建议成为默认的行业规范。
一般做法是，当对应一屏内容进入的时候，使用JS给容器添加类名active:
container.classList.add("active");
如果你做的动画逼格较高，希望每次浏览这一屏内容的时候，动画都走一遍，可以使用reflow重新触发一下animation:
container.classList.remove("active");
container.offsetWidth = container.offsetW
container.classList.add("active");
2. 类名active与动画控制技巧
如何具体控制动画的播放呢？我们通常第一反应是使用下面的方法实现，动画的完整CSS代码在active状态下呈现，如：
.element1 { /* 尺寸与定位 */ }
.element2 { /* 尺寸与定位 */ }
.element3 { /* 尺寸与定位 */ }
.active .element1 { animate: name1 1s; }
.active .element2 { animate: name2 1s; }
.active .element3 { animate: name2 1s; }
从实现和功能上将，上面方法是很不错的，通俗易懂，不易犯错。不过我个人更喜欢使用配合的animation-play-state属性对每屏动画进行控制，实现如下：
动画相关CSS代码直接写在元素上：
.element1 { /* 尺寸与定位 */ animate: name1 1s; }
.element2 { /* 尺寸与定位 */ animate: name2 1s; }
.element3 { /* 尺寸与定位 */ animate: name3 1s; }
创建一个类名，如.animate，凡是使用到了animation动画的元素都添加这个类名；
如下CSS代码：
.animate {
animation-play-state:
.active .animate {
animation-play-state:
之所以个人更喜欢后面的方法，是因为有一种“无侵入”的感觉，代码层次清晰，控制关系明确。有利于后期的维护与扩展。
然而，使用animation-play-state还是有些需要注意的，对于IE10/IE11浏览器，animation-play-state是不能简写的。如：
.element { animate: shake 4s 2s
只会让整个CSS声明挂掉的！如下写法支持：
.element {
animate: shake 4s 2
animation-play-state:
有人可能要奇怪了，怎么突然IE浏览器乱入了？
首先，我们不能无视主流手机之Windows Phone. 其次，帅气的翻屏动画并不是移动端专有，桌面端也适用。稍稍用力，桌面移动全适配，何乐而不为！
技巧二、不同状态下的连续动画
有时候，动画可能不是一波流，分状态。
例如，我们的小火箭，先是淡出动画，然后无限上下悬浮。怎么实现呢？
关键点就是动画分解与延时。
据我所知，没办法只使用一个keyframes关键帧声明就实现这个效果，因为，这里有动画状态的变化：一个只执行一次的动画和一个无限循环动画。
怎么办？我们可以将动画分解，写2个animation keyframes动画关键帧描述。
@keyframes fadeIn { /* ... */ }
@keyframes float { /* ... */ }
然后，再分别应用这些关键帧动画。如何应用呢？有2个小技巧：
1. 逗号与多animation动画值
&div class="element"&小火箭&/div&
.element { animation: fadeIn 1s, float .5s 1 }
/* 我淡出, 需要1秒；我1秒后开始无限漂浮 */
其中float .5s 1s infinite这里的1s就是无限漂浮动画执行延迟的时间，于是，两个动画完美配合，感觉就像是一个动画。实际上，就是一个动画，所有 animation动画走同一个线程，这也是为何推荐使用CSS实现动画效果的原因。
此写法没有兼容性问题，大家可以开开心心地使用。
2. 标签嵌套与独立动画
我们还可以通过嵌套标签的形式实现连续动画，例如：
&div class="element-wrap"&&div class="element"&小火箭&/div&&/div&
.element-wrap { animation: fadeIn 1s; }
/* 我淡出, 需要1秒 */
.element { animation: float .5s 1 }
/* 我1秒后开始无限漂浮 */
有人可能会奇怪了。animation本身就支持多动画并行，你还搞个标签嵌套，没有任何使用的理由啊！没错，单纯看我们这个例子，确实是这样。但是：
① 提取公用动画
这类多屏动画是有N多元素同时执行不同的动画。比方说，火箭是淡出，然后上下漂浮；火箭的火焰是淡出，然后大小变化；黑洞是淡出，然后左右随波。你如何实现？
如果纯粹借助animation语法，应该是：
.element1 { animation: fadeIn 1s, float .5s 1 }
/* 我淡出, 需要1秒；我1秒后开始无限漂浮 */
.element2 { animation: fadeIn 1s, size .5s 1 }
/* 我淡出, 需要1秒；我1秒后开始大小变化 */
.element3 { animation: fadeIn 1s, move .5s 1 }
/* 我淡出, 需要1秒；我1秒后开始左右移动 */
可以看到，淡出是公用的动画效果，我们可以借助嵌套标签，实现公用语法的合并，方面后期维护：
.element-wrap { animation: fadeIn 1s; }
/* 大家都1秒淡出 */
.element1 { animation: float .5s 1 }
/* 我1秒后无限漂浮 */
.element2 { animation: size .5s 1 }
/* 我1秒后忽大忽小 */
.element3 { animation: move .5s 1 }
/* 我1秒后左右移动 */
②避免变换冲突
有个元素动画是边360度旋转、边放大(从0放大到100%)，像这种具有典型特征的动画我们显然要独立提取与公用的：
@keyframes spin { /* transform: rotate... */ }
@keyframes zoomIn { /* transform: scale... */ }
好了，现在问题来了，变放大边旋转：
.element { animation: spin 1s, zoomIn 1s; }
/* 旋转：啊，完蛋啦，我被放大覆盖啦！ */
由于都是使用transform, 发生了残忍的覆盖。当然，有好事的人会说，你使用zoom不就好了！确实，如果只是移动端，使用zoom确实棒棒哒！但是，我们这个企业活动，PC是主战场，因此，FireFox浏览器（FF不识zoom）是不能无视的。
怎么办？重新建一个名为spinZoomIn的动画关键帧描述还是？
对啊，你直接外面套一层标签不就万事大吉了 ：
.element-wrap { animation: spin 1s; }
/* 我转转转 */
.element { animation: zoomIn 1s; }
/* 我大大大 */
技巧三、无侵入定位和居中定位准则
1. 这里的“无侵入定位”指不受animation影响的元素定位，包含两部分：一是不使用keyframes关键帧决定初始位置；二是不要使用keyframes中出现的属性定位。
①. 不使用keyframes决定初始位置
应该都知道， animation的fill-mode可以决定元素动画结束前后的位置，也就是也具有定位的作用。此时，可能就会有小伙伴，故作聪明，利用animation keyframes 0% {}或form {}去做定位，貌似，还省了写代码。看上去很赞，实际上狭隘了，这对于对animation支持不佳或不支持的浏览器实际上是不友好的，例如Android2.3不支持animation-fill-mode, IE6-IE9不支持 animation，于是乎，当遭遇这些浏览器的时候，页面动画元素的布局实际上是毁掉的。所以，这些动画元素定位的时候，需要使用“无侵入定位”，也就是，就算页面没有animation, 我也是个“标致人儿”。
②. 不使用keyframes中出现的属性定位
举个例子，有个球，正好定位在模块的中心，同时有个无限旋转效果。使用transform: translate(-50%,-50%)居中定位再合适不过了，不用我心里难受，于是，使用了transform定位。此时，冲突发生，旋转动画也是需要transform变换的。
@keyframes spin {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
要么使用业界约定俗成spin覆盖，要么另起炉灶没法重用：
@keyframes spin-trans {
0% { transform: rotate(0) translate(-50%,-50%); }
100% { transform: rotate(360deg) translate(-50%,-50%); }
显然，都是不合适的。建议使用传统left/top/margin进行定位，与transform变换动画“无侵入”。
2. 这里的“居中定位准则”包含两部分：一是元素定位在容器中间位置；二是元素的定位方式为居中定位。
①. 元素定位在容器中间
容器以及容器内的动画元素可以看成是一个动画模块，为了这个模块可以轻松驾驭水平布局和垂直局部，里面的动画元素形成的整体一定要在容器的中间，不要被设计稿或周围环境影响。
举个简单例子，本文一开始展示的「企业QQ-新年祝福」活动。
企业产品用户特点比较鲜明：一是访问主要集中在桌面端，二是有70~80%用户使用的是webkit/blink内核浏览器。所以，大家可以理解为何设计稿明明针对桌面端，却有如此多细腻的动画设计了。
故事是这样的，桌面版做好了，自适应，IE7以上都兼容（无侵入定位准则）（除了没动画），好棒！此时负责视觉的晓玲同学希望也能适配移动端，可以增加一定的传播，我觉得挺好的，于是，决定通过技术手段，让活动页面能游走于桌面和移动之间，同时，保证各种动画效果棒棒哒！
结果，发现自己留了一个坑，拿第2屏举例，桌面版，长这样，右侧动画内容并不是完全居中的：
本着高度还原设计稿的原则，所有动画元素都经过测量定位，按照PSD中的参考线左上角(left/top)，结果整体左侧冒出60像素：
于是，问题来了，当移动端做响应式适配时候，由于容器内的动画元素不是居中的，所以——
后来，进行了修改，内部动画元素整体居中，外部容器桌面端做左侧60像素偏移，于是，适配移动端时候，就正好是居中的啦。
②. 定位方式为居中定位
所谓“居中定位”是相对“传统定位”而言的。Web页面中的模块、文字什么的默认都是相对于左上角堆砌的，所以，很自然地，我们在重构页面，做布局，写交互效果的时候，也都是相对左上角定位。活用元素本身的定位特性，这是很赞的也推荐这么做！但是，如果你和多元素CSS动画打交道，可能就需要改变下惯性思维了，很重要的一点就是“从以左上角为参考点变成以中心点为参考点”。
我们在实现多元素动画效果时候，会出现两类角色：一是容器；二是容器里面诸多动画元素。
其中，对于容器元素，尤其在做移动端产品时候，我们很自然会让其居中定位：
.container {
position: left: 50%; top: 50%;
transform: translate3d(-50%, -50%, 0);
这样，各种尺寸的手机，我们都能让其居中显示（大尺寸可能需要一定的缩放）。
但是，我们有没有想过让容器里面的诸多动画元素也居中定位显示呢？
用代码来解释就是从左上角定位（或右上角定位）：
.example {
position: left: 100 top: 100
变成中心点定位+ margin偏移：
.example {
position: left: 50%; top: 50%;
margin-left: -100 margin-top: -100
有同学可能要疑问了，why? 前面一步到位不挺好的，后面这样分两步走岂不是多余？
在大多数情况下，我们的应用场景比较单一，或只需要玩转移动端，或只需要驾驭桌面端，此时，上面两种定位的优劣是看不出来的。
但是，遇到一些复杂的应用场景，尤其涉及到容器尺寸或定位方式改变的时候，后面的定位优势就可以看出来。
比方说一开始提到的qzone5.0的例子，如果我们把容器宽度加大（实际是不会的，示意目的），如414像素：
会发现，宇航员和飞船在小行星之外了，也就是动画元素不是聚拢状态了。
所以，大家看出居中定位的优势来了没有：
动画元素之间的位置关系不受容器尺寸影响；
居中特性遭遇多场景时适应性更强；
还是拿去年年底做的「企业QQ-新年祝福」活动举例，第8屏：
其中，中间的“王强”和“马老板”这些数据有可能是没有的，也就是很有可能这一屏只有文字和宇航员，但同时还要保持整体垂直居中。很显然，宇航员和火箭所在的容器不能是绝对定位，否则脱离文档流，不能和上面元素保持合适垂直间距同时垂直居中。我们仍然有2种实现方法：
固定容器宽度，例如350像素宽，然后，里面左上角定位等，本身margin: auto水平居中；
容器不设定width大小，直接里面动画元素居中定位；
方法1问题在于：
第7屏是类似结构，但是其动画容器宽度不是350像素，没法重用；
当在iPhone5/iPhone5s下，屏幕320像素宽(小于350像素)，由于左上角定位，因此，整体不是居中效果；
而方法2，屏幕尺寸再小，也是居中的，只不过两侧有所剪裁。最终，移动端适配时候，我们不必关心定位问题，只要合适缩放就可以了 ：
首先，大家要明白，本文所展示的三个技术技巧属于个人经验建议，注意，是建议。里面所提到的所有解决方法都有更加直观、通俗的实现，对于大多数的产品而言，技术的价值体现已经足够；同时应用场景千千万，没有什么一方通行的方法，例如居中定位准则，有时候，可能就是需要非居中定位。
但是，作为一个有技术追求的技术从业人员，对技术的精益求精一定是有价值的，无论是对自己，还是公司。有人可能会反驳，我们这个项目明明只会针对移动端，你还花心思考虑低配的事情，岂不是白白浪费时间和人力成本。古人有云：“不以善小而不为”，这种去粗取精的小经验虽然看上去没什么实质性成长，对眼前项目也没多少价值体现，但是积累足够多，会产生质变的，填坑的事情少了，工作也更轻松与快乐，对公司产生的价值也更大。
高瞻远瞩积跬步，登峰造极至千里。
好了，以上就是自己对于多屏CSS动画方面的一些技巧体会，希望可以对大家的学习有所帮助。当然，资历有限，要是文中有什么表述不准确的地方，欢迎指正；也欢迎针锋相对的讨论，共同成长。
发现灵感，找到创意后使用我的收藏没有帐号？
所属分类： &
查看: 3|回复: 0
这种可以让用户留言的H5动画怎么制作
这种可以让用户留言的H5动画怎么制作
点这里&&&&我们是怎么从0经验制作出第一部H5动画短片的？_梦象动态壁纸-爱微帮
&& &&& 我们是怎么从0经验制作出第一部H5动画短…
其实做动画片的想法一直都有，但又想做些特别的东西，要不同于现在通常的视频动画。去年底我们自己的H5引擎发展到一定阶段，觉得可以做些长篇一点的事情了。&&&&&& 首先是剧本，想也没想就决定要原创一个小故事，但我们所有人都没有经验；让设计部每个同学出一篇稿子，要求就是看完一遍必须让用户留下深刻印象，过目不忘的一个小故事。开始做就明白故事性才是一部动画片的灵魂，为此还学习了皮克斯怎么打磨一部动画片，基本上一半的时间都用在了故事的构思和反复修改上。&&&&&& 接着就是人物设定、场景设定、分镜头，全部用草图画出来，推演故事的连续性和逻辑性。一开始设计师把我们的小动物设计成了一只小鸡，我就问，为什么可乐罐里会有一只我们熟悉的小鸡？这个交代是不是太冗长了，看得懂吗？不断推敲，这才进入了3D建模阶段。&&&&&&&&分镜草图：&&&&&&&&&&&&&& 因为是在手机上实时渲染和展示，3D建模的面数要有一定限制，既要达到视觉效果，又要考虑手机的性能，好在我们有一千多张动态壁纸的制作经验，这些自然不在话下。还有一个技术活儿就是人物绑定，活灵活现就靠它了！&&&&&&&&&&&&&&&&&&&&&& 真正考验的是进入H5制作了！首先，手机是竖屏，竖屏展示对大场景不适合，我们决定用横屏展示；H5的横屏展示也是有一定技术和设计含量的，以我们的实力自然不在话下，解决！然后，整个动画片是由多个动画片段组装而成，在开发上就可以多个开发同学并行完成，这样缩短了时间周期；最后一个开发同学负责组装、调试。还有一个关键技术问题，如何让整个片子播放流畅，不出现卡顿！这也难不倒我们的引擎同学，我们的H5引擎实现了动态加载，也实现了像播放视频一样边播放边加载。&&&&&& “毛片”做出来后，第一次“试映”问题一堆，手机适配是少不了要做的工作，设计还要再做一些精修工作，根据大家的意见增加一些交互，比如手指特效、旋转、打赏，配音、文案调整也是必须的工作。这时候感觉有点像一件作品了，其实对作品的打磨永远没有止境，总想细节上再处理得更好一些，“技术与艺术的完美结合”对我们而言绝对不是一个口号，而是我们的毕生追求！&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& “丑媳妇总要见公婆”，我们没有对比过行业内的作品，我们甚至都不知道在行业内有没有我们这种形态的作品。我们只是凭着我们的想象和愿望，凭空造了这件作品出来；我们只是希望用我们的这个作品，表达我们对未来的热诚，正如片尾所言——“献给仍然怀有梦想的人们！”&&&&点击原文链接就可以看大片了，记得手机要横屏，看完打赏后还有彩蛋哦！现在我们的人物和小动物都还没有名字，欢迎加我们公众号给他们起名字！提建议、谈感受也欢迎！
点击展开全文
悄悄告诉你
更多同类文章
还可知道有多少人阅读过此篇文章哦
阅读原文和更多同类文章
可微信扫描右侧二维码关注后
还可知道有多少人阅读过此篇文章哦
技术与艺术的完美结合。最酷炫的原创壁纸抢先看，创意的设计、插画、摄影都到碗里来，免费电影票、衍生品抢到手软。有梦象的生活，让你的生活充满趣味！
您的【关注和订阅】是作者不断前行的动力
本站文章来自网友的提交收录，如需删除可进入
删除，或发送邮件到 bang＠ 联系我们，
(C)2014&&版权所有&&&|&&&
京ICP备号-2&&&&京公网安备34H5 动效的常见制作手法 - 简书
<div class="fixed-btn note-fixed-download" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover" data-content=''>
写了210376字，被58人关注，获得了102个喜欢
H5 动效的常见制作手法
众所周知，一个元素，动往往比静更吸引眼球；一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验；一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。近两年，小到loading动画，表单动效，大到各式各样H5运营页的炫酷展现，“动效设计”一词可谓是火遍大江南北，而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例，和大家一同挖掘几种常见的H5动效制作手法。
我们由浅入深来挖掘这动效制作的秘密，一个入门级的小问题：看上图这几个动画例子，大家是否能说出这动画是如何制作出来的呢？而又是如何在网页之上呈现的呢？对，答案必须是设计师们都非常熟悉的gif小动画了，H5动效制作的第一手法，便是GIF了。动效制作手法1：GIFGIF图片擅长于制作细节的小动画，位图，优势在于 “体型”很小，可压缩，制作成本低，以图片的形态适用于各种操作系统，无兼容性的后顾之忧。制作GIF动画的方式有很多，例如我们所熟悉的Photoshop时间轴，或是利用Flash，AE将动画导出存成GIF格式等等。
GIF动画最常在H5动效里当担loading导航条，热门小标签等元素，要把控图片大小和精度之间的平衡，所以它一般用于制作小细节的动画。H5页面承载GIF图片的方式相对以下要介绍的其他方法，是最省成本，最为简便的。只需要以背景图片/内容图片的形式在页面上进行引用即可。聊完了GIF动画的一些特点，那么我们必须同时对比一下它的堂兄弟：逐帧动画 。动效制作手法2：逐帧动画逐帧动画即是利用一张等间距的动画分解逐帧图片，由js脚本模拟编写或是使用css3新属性step()制作而成。step()在移动端的兼容性是很好的，但使用比较小众。逐帧动画和GIF动画的差别在于，脚本可以控制逐帧动画的快慢和动作的暂停，而GIF动画无法在后期通过代码进行动画速率及透明度的修改。
做一个逐帧动画必不可缺的就是需要一张等间距的“动画分解逐帧图片.png”，再通过JavaScript脚本或CSS3 animation的过度函数step()来控制图片的background-position，二者结合就可以快速输出一个逐帧动画啦。
从以往的经验看GIF动画或是逐帧动画，我们往往认为它们只适合做一些小细节的动画。其实二者也可以承载一些很独特的动画效果！如以下这个例子，这是陌陌的一个宣传h5页面，它便是由逐帧分解图+JavaScript脚本模拟逐帧动画拼合而成的。
动效制作手法3：CSS3CSS3应该是动画家族里绝对不会被遗忘的一名成员。这里我们定义它为擅长于平面层的动画。CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持。先来看个例子，来自阿迪达斯的H5运营页《罗斯-绝不凋谢》：
这炫酷到没朋友的动画效果其实主要就是依靠CSS3编写完成的。这里给大家介绍一下CSS3的动画三大属性：Transform 变形，Transition 过渡，和Animation 动画。Transform 变形：拥有 rotate 旋转 skew 扭曲 scale 缩放 translate 移动 matrix 矩阵变形五大特效，罗斯的例子中，便是对充分结合了这几个变化特效的产物。Transition 过渡：拥有修改执行变换的属性，时长，速率和延迟时间的能力，大家都很熟悉的贝塞尔曲线，也是归属于transition的设定之下的。
******Animation 动画：若将Transform解释为动作，Transition解释为过渡，那么Animation则是连续的几个动作，即动画。Animation可以我们设定keyframes的值，让元素在一段时间内完成多个动作。
然而我们如何高质高效把动画设计传达给工程师呢？这里来个小小的Tips：建议使用“案例Demo或者分镜头脚本+动画属性分解表+素材切图”的套装！以下图为例：这是一个点击反馈的小动画，在无法提供Demo的时候，我们可以使用”动画属性分解表”的方式。动画属性分解表可以让工程师根据表格内填写的数值进行动画的编写，会比凭空的和工程师进行交流传达，来的更精准一些。
动画属性分解表示例：
动效制作手法4：SVGSVG，也是动效制作中不可忽略的一大热门方法，我们定义它为擅长于线条的动画，弊端是：IE8,Android4.2及以下支持不好。看下图几个例子，涉及到这种沿着元素描边的动画，一般都是出自SVG之手啦，当然，它也可以实现一些复杂的动画，类似这个表情图片，不过实现成本是不太划算的。知识普及：SVG，可缩放矢量图形（Scalable Vector Graphics）， 是被存成了 XML 格式的图像，它有一些特别的地方：可被多种工具读取和修改（比如记事本）尺寸更小，可压缩性更强矢量纯粹的 XML一张SVG图，其实是由一堆的定位锚点连线生成的。所以它可以很方便的存为文档格式。而页面中的引用，也是简单的将此文本引入即可。这里必须要注意的点是：如果你想制作一个SVG动画，请一定要使用AI工具绘制输出矢量图给到工程师同学哦。
动效制作手法5：CanvasHTML5 的新元素 ，类似画板，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。本身是没有绘图能力的。所有的绘制工作必须依赖 JavaScript 完成。我们定义它为擅长于绘画的动画。如下图，绘制这样一个大量元素下落的动画效果，就是Canvas所擅长的。
Canvas可以算是SVG的堂兄弟，大部分的图表动画，都是由Canvas或是SVG制作而成的，二者的动画能力相似但也有以下这些区别：canvas是画框，有自己固定的高宽，svg是不依赖分辨率的矢量，可以任意放大缩小。canvas能以.jpg的格式保存图像，svg是文本的格式保存图像canvas绘制的图像不占DOM，而svg的每个图像都是1个DOM元素canvas适合图像密集型的动画，而svg不适合大量使用，例如制作飘雪等canvas完全依赖脚本绘制作，而svg可直接使用矢量转存生成。
动效制作手法6：Flash-&Canvas除去上面几种常见的手法，Flash转Canvas的方法也是今年特别火爆的一种形式。既然提到曾经辉煌的Flash，那产出物必须离不开炫酷这个形容词：通过Flash cc制作复杂又精细的动画，导成Canvas文件，动画中的交互操作，依赖Create.js的脚步库完成。以下引用咋们IEG小伙伴的例子，来让大家一探此方法的魔力所在。
动效制作手法7：video用视频输出非常特别的动效。关于video的魅力我们用吴亦凡H5页面的例子，相信大家瞬间就可以明白了吧^^。
动效制作手法8：JavaScript其实，只要是涉及到交互反馈的动画，小至滚屏翻页，大到重力感应等都需要js进行处理脚步的编写。也就是说，所有的动画特效都离不开Javascript同学的支持。市面上有很多特别的Javascript脚本库，例如，细细运用，就可以做出非同凡响的动画效果。
最后我们再以一个简单的表格来汇总这H5动效常见的制作手法，希望读完本文的小伙伴们都可以在下次遇见新动画效果时，第一时间挖掘出它背后的制作原理，好好运用这8大手法，人人都是优秀的动效设计师。（表格中所阐述的性能损耗和实现成本仅作参考，具体动画效果还需要具体分析，才可得知到底使用哪种方式是最适合的。）
感谢你的阅读，本文由版权所有
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
如果你是程序员，或者有一颗喜欢写程序的心，喜欢分享技术干货、项目经验、程序员日常囧事等等，欢迎投稿《程序员》专题。
专题主编：小...
· 242096人关注
爱前端，在路上，希望结伴而行。
· 5905人关注
干货技术文。
· 3707人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：