HTML5 动画效果的多种实现方式
1. CSS3 transform + transition
https://www.w3.org/TR/css-transforms-1/
https://www.w3.org/TR/css3-transitions/
1
1
1
2. CSS3 @keyframes + animation
https://www.w3.org/TR/css3-animations/
1
3. HTML5 Canvas
https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element
https://www.w3.org/TR/html5/scripting-1.html#the-canvas-element
https://www.w3.org/TR/2dcontext/
1
1
4. HTML5 SVG
https://www.w3.org/TR/html5/embedded-content-0.html#svg
https://www.w3.org/TR/SVG/animate.html
1
1
1
5. requestAnimationFrame
https://html.spec.whatwg.org/multipage/webappapis.html#animation-frames
https://www.w3.org/TR/animation-timing/
1
1
6. jQuery animaition
1
1
7. WebGL three.js
1
1
8.
1
1
...
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
HTML5 动画效果的常见实现方法
https://isux.tencent.com/h5active.html
1
1
1
1
众所周知，一个元素，动往往比静更吸引眼球；
一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验；
一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。
近两年，小到loading动画，表单动效，大到各式各样H5运营页的炫酷展现，“动效设计”一词可谓是火遍大江南北，而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例，和大家一同挖掘几种常见的H5动效制作手法。
我们由浅入深来挖掘这动效制作的秘密，一个入门级的小问题：看上图这几个动画例子，大家是否能说出这动画是如何制作出来的呢？而又是如何在网页之上呈现的呢？
对，答案必须是设计师们都非常熟悉的gif小动画了，H5动效制作的第一手法，便是GIF了。
动效制作手法1：GIF
GIF图片擅长于制作细节的小动画，位图，优势在于 “体型”很小，可压缩，制作成本低，以图片的形态适用于各种操作系统，无兼容性的后顾之忧。制作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：CSS3
CSS3应该是动画家族里绝对不会被遗忘的一名成员。这里我们定义它为擅长于平面层的动画。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：SVG
SVG，也是动效制作中不可忽略的一大热门方法，我们定义它为擅长于线条的动画，弊端是：IE8,Android4.2及以下支持不好。看下图几个例子，涉及到这种沿着元素描边的动画，一般都是出自SVG之手啦，当然，它也可以实现一些复杂的动画，类似这个表情图片，不过实现成本是不太划算的。
知识普及：SVG，可缩放矢量图形（Scalable Vector Graphics）， 是被存成了 XML 格式的图像，它有一些特别的地方：
- 可被多种工具读取和修改（比如记事本）
- 尺寸更小，可压缩性更强
- 矢量
- 纯粹的 XML
一张SVG图，其实是由一堆的定位锚点连线生成的。所以它可以很方便的存为文档格式。而页面中的引用，也是简单的将此文本引入即可。这里必须要注意的点是：如果你想制作一个SVG动画，请一定要使用AI工具绘制输出矢量图给到工程师同学哦。
动效制作手法5：Canvas
HTML5 的新元素 <canvas>，类似画板，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。本身是没有绘图能力的。所有的绘制工作必须依赖 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脚本库，例如three.js，细细运用，就可以做出非同凡响的动画效果。
最后我们再以一个简单的表格来汇总这H5动效常见的制作手法，希望读完本文的小伙伴们都可以在下次遇见新动画效果时，第一时间挖掘出它背后的制作原理，好好运用这8大手法，人人都是优秀的动效设计师。（表格中所阐述的性能损耗和实现成本仅作参考，具体动画效果还需要具体分析，才可得知到底使用哪种方式是最适合的。）
Tags: canvas, html5, svg, 动画, 移动端
1
1
今天我们将向大家展示下网页动画的现状地图，并收集了一些具有多变表现力的类库、框架和插件。
图1：网络动画地图
下图分为三个区域，第一部分是一些容易理解的动画类库，撇开已经达到期望的通用动画方法外，还从简单的方法和函数到时间控制都提供了大家所希望的工具。我们从JavaScript类库中分离了用CSS3过渡的动画元素，也挑选出了能够和SVG，WebGL或者HTML5 Canvas相连接的动画类库。
图2：工具列表
第二部分是专为文档模型中像滚动动画，视差，CSS sprite，3D变换，物理引擎和过渡这种动画元素提供不同的方法。
图3：表现技巧
最后一个重要的部分，也就是第三部分展示了一些能够帮助你根据项目要求来选择CSS或者Javascript为基础的动画的技巧。
我们相信你已经意识到CSS和以JavaScript为基础的动画备受争议，你会用自己的实际体验来选择。运行在你电脑上的每个项目最终的选择都决定于浏览器版本。好吧，从没人说过这很简单。
参考阅读：
我们能做的就是推荐一些有趣的文章和观点，当你需要做决定的时候提供一点点帮助。
[1] Myth Busting: CSS Animation vs. JavaScript,作者Jack Doyle给我们大致比较了一下以JavaScript为基础的动画和CSS动画组件。
[2] CSS Animations and Transitions Performance: Looking inside the Browser,作者Adobe网络团队。我们为你推荐这个文章是其完美的诠释了浏览器渲染的过程和问题。
[3] 第三篇，可能是最臭名昭著的一篇来自Paul Irish的Why Moving Elements with Translate() is better than Pos:abs Top/Left.
[4] Paul Irish另一篇是他与Paul Lewis 一起讨论的High Performance Animations.
[5] 不会被超越的，也是来自Paul Lewis的包含他对动画变现力深刻见解的Leaner, Meaner, Faster Animations with requestAnimationFrame.
特色工具：
工具太多了，现在的编辑器又不能加链接，所以请各位去原文地址点击链接。前文也复制了一些链接，如果失效，也请移驾原文，谢谢观看。
1.scrollReveal.js (http://h5bp.github.io/Effeckt.css/)
达成“滚动获取动效”的效果，这是JulianLloyd的开源项目
2.svg.js (http://www.svgjs.com/)
这是其中支持的一个效果
svg.js让设计师可以更得心应手的处理svg图像（包括动画效果）
3.three.js (http://threejs.org/)
Three.js是一款轻量化的JS库，能够用来创造3D动画，Three.js可以和Html 5 Canvas元素，SVG以及WebGL结合
4.Agile CSS3 引擎 (http://a-jie.github.io/Agile/#page-nav-top)
其中的一个demo演示
agile使用JS生成纯CSS3代码，无html canvas,无webGL，无SVG。在移动端Agile的表现力极佳！
5.Jaguarjs（Collie） (http://jindo.dev.naver.com/collie/index.html#about)
Collie是一款JS库，可以帮助设计师用HTML5构建效果极佳的动画和游戏。Collie使用了HTML5 和 DOM，能够很好地运行在移动端和桌面端，并且针对不同平台，提供最优渲染模式。
6.Effeckt.js (http://h5bp.github.io/Effeckt.css/)
精良的动效库，基于CSS的动效能够开启硬件加速
7.Skrollr （http://prinzhorn.github.io/skrollr/）
JS库，提供出众的视差滚动效果，仅有12k大，支持移动端和桌面端
8.Clickstream.js (http://git.blivesta.com/clickstream/)
丰富的页面转换效果
9.Parallax.js （https://github.com/wagerfield/parallax）
Parallax的引擎能够针对设备屏幕方向和尺寸做出相应。如果设备没有陀螺仪和运动传感器，那么用光标来代替。
10.Stellar.js （http://markdalgleish.com/projects/stellar.js/）
超级轻松即可实现视差滚动效果。
11.Physics.js 需FQ （http://wellcaffeinated.net/PhysicsJS/#demo-7）
模块化、易于扩展的JS物理引擎
12.animate.css (http://daneden.github.io/animate.css/)
简单、易用、强大，无需赘言
13.Matter.js （http://brm.io/matter-js/）
html5 javascript物理引擎，包括物理特性，冲撞特性，canvans渲染，webGL渲染
14.Box2dweb (https://code.google.com/p/box2dweb/)
又一个物理引擎
15.Morf.js （http://www.joelambert.co.uk/morf/）
支持CSS3硬件加速，可定制缓动函数
16.Snap.svg(http://snapsvg.io/)
轻松创建可交互矢量图形，方便适配多种设备。
17.Impress.js （https://github.com/bartaz/impress.js）
非常棒的演示框架，利用了CSS3 转换效果
18.Transit （http://ricostacruz.com/jquery.transit/）
超级流畅的CSS动效
19.Sly （http://darsa.in/sly/）
JS库，主要可用于轮播效果
20.Magic Animation （http://www.minimamente.com/example/magic_animations/）
CSS3特效动画
21.Superscrollorama (http://johnpolacek.github.io/superscrollorama/)
超级酷炫的滚动效果
1
1
1
1
1
1
1