干货!由浅入深科普最常用的八种HTML 5动效制作手法.pdf

干货 ！由浅入深科普最常用的八种HT ML 5动效制作手法 众所周知 ，一个元素 ，动往往 静更吸引眼球 ；一套操作界面 ，合适的动态交互反馈能给用 户带来更好的操作体验 ；一个H5运营宣传页 ，炫酷的动画特效定能助力传播和品牌打造。 近两年 ，小到loading动画 ，表单动效 ，大到各式各样H5运营页的炫酷展现 ，“动效设计”一词可谓是 火遍大江南北 ，而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例 ， 和大家一同挖掘几种常见的H5动效制作手法。 我们由浅入深来挖掘这动效制作的秘密 ，一个入门级的小问题 ：看上图这几个动画例子 ，大家是否 能说出这动画是如何制作出来的呢 ？而又是如何在网页之上呈现的呢 ？ 对 ，答案必须是设计师们都非常熟悉的gif 小动画了 ，H5动效制作的第一手法 ，便是GIF了。 动效制作手法 1 ：GIF GIF图片擅长于制作细节的小动画 ，位图 ，优势在于 “体型”很小 ，可压缩 ，制作成本低 ，以图片的形 态适用于各种操作系统 ，无兼容性的后顾之忧。制作GIF动画的方式有很多 ，例如我们所熟悉 的Phot osho p时间轴 ，或是利用Flash ，A E将动画导出存成GIF格式等等。 GIF动画最常在H5动效里当担loading导航条 ，热门小标签等元素 ，要把控图片大小和精度之间的 平衡 ，所以它一般用于制作小细节的动画。 H5页面承载GIF图片的方式相对以下要介绍的其他方法 ，是最省成本 ，最为简便的。只需要以背景 图片/内容图片的形式在页面上进行引用即可。 聊完了GIF动画的一些特点 ，那么我们必须同时对 一下它的堂兄弟 ：逐帧动画 。 动效制作手法 2 ：逐帧动画 逐帧动画即是利用一张等间距的动画分解逐帧图片 ，由js脚本模拟编写或是使用css 新属性st ep()制 作而成。st ep()在移动端的兼容性是很好的 ，但使用 较小众。逐帧动画和GIF动画的差别在于 ，脚 本可以控制逐帧动画的快慢和动作的暂停 ，而GIF动画无法在后期通过代码进行动画速率及透明度 的修改。 做一个逐帧动画必不可缺的就是需要一张等间距的“动画分解逐帧图片.png” ，再通过JavaScript 脚本 或CSS animat io n的过度函数st ep() 来控制图片的backgro und-posit io n ，二者结合就可以快速输出 一个逐帧动画啦。 从以往的经验看GIF动画或是逐帧动画 ，我们往往认为它们只适合做一些小细节的动画。其实二者 也可以承载一些很独特的动画效果 ！如以下这个例子 ，这是陌陌的一个宣传h5页面 ，它便是由逐帧 分解图+JavaScript 脚本模拟逐帧动画 拼合而成的。 视频直接观看H5效果 ：ht t p://v.qq.co m/page/r/4/t/r0174 e7f g4t .ht ml 动效制作手法 ：CSS CSS 应该是动画家族里绝对不会被遗忘的一名成员。这里我们定义它为擅长于平面层的动画。 CSS 的缺陷应该在于它的部分属性还没有被浏览器有好的支持。先来看个例子 ，来自阿迪达斯 的H5运营页 《罗斯-绝不凋谢》 ： 视频直接观看H5效果 ：ht t p://v.qq.co m/page/w/6/l/w0174 ud2x6l.ht ml 这炫酷到没朋友的动画效果其实主要就是依靠CSS 编写完成的。 这里给大家介绍一下CSS 的动画三大属性 ：T ransf o rm 变形 ，T ransit io n 过渡 ，和A nimat io n 动画 。 T ransf o rm 变形 ：拥有 rot at e 旋转 skew 扭曲 scale 缩放 t ranslat e 移动 mat rix 矩阵变形五大特效 ， 罗斯的例子中 ，便是对充分结合了这几个变化特效的产物。 T ransit io n 过渡 ：拥有修改执行变换的属性 ，时长 ，速率和延迟时间的能力 ，大家都很熟悉的贝塞 尔曲线 ，也是归属于t ransit io n的设定之下的。 ***拓展工具 ：贝塞尔定制传送门*** A nimat io n 动画 ：若将T ransf o rm解释为动作 ，T ransit io n解释为过渡 ，那么A nimat io n则是连续的 几个动作 ，即动画。A nimat io n可以我们设定keyf rames的值 ，让元素在一段时间内完成多个动作。 然而我们如何高质高效把动画设计传达给工程师呢 ？ 这里来个小小的T ips ：建议使用“案例Demo或者分镜头脚本+动画属性分解表+素材切图”的套