前端动画大乱炖

做为一只前端狗，咱们的使命就是在知足产品需求、实现交互设计的基础上，将最好的体验呈现给用户爸爸们。在保证性能的同时，咱们一般会给页面加一些动态效果，以加强页面的表现力并提高页面的交互体验。故将前端实现动效的几种经常使用方式整理成此篇小结，以求温故而知新，若有不当还望多多指正。

动画即童年

动画是指由许多帧静止的画面，以必定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误觉得画面活动的做品。-- 维基百科

以上是维基百科上给出的动画的定义。相信每个像我这样有童年的孩子，应该都玩过手翻书，或者就算你的童年稍微暗淡一点，应该也看过动画片吧...嗯嗯，并无跑题，其实这和咱们今天说起的动画本质上是同样的，只不过就是呈现方式或者说载体发生了改变。

几个基本概念

简单介绍几个关于动画的基本概念：

帧：在动画过程当中，每一幅静止画面即为一“帧”； 帧率：即每秒钟播放的静止画面的数量，单位是fps(Frame per second)或赫兹(Hz)； 帧时长：即每一幅静止画面的停留时间，单位通常是ms(毫秒)； 丢帧：在帧率固定的动画中，某一帧的时长远高于平均帧时长，致使其后续数帧被挤压而丢失的现象；

咱们在显示器上看到的动画，每一帧变化都是系统绘制出来的（GPU或者CPU）。它的最高绘制频率受限于显示器的刷新频率（而非显卡，大多数是60Hz或者75Hz）。

帧频越高，屏幕上图片闪烁感就越小，稳定性也就越高。人的眼睛不容易察觉75Hz以上刷新频率带来的闪烁感。

实现方式

一般咱们在前端实现动画效果的几种主要实现方式以下：

• JavaScript：经过定时器（setTimeout 和 setIterval）来间隔来改变元素样式，或者使用requestAnimationFrame；
• CSS3：transition 和 animation；
• HTML5：使用HTML5提供的绘图方式（canvas、svg、webgl）；

requestAnimationFrame

requestAnimationFrame是浏览器用于定时循环操做的一个接口，相似于setTimeout，主要用途是按帧对网页进行重绘。

设置这个API的目的是为了让各类网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）可以有一个统一的刷新机制，从而节省系统资源，提升系统性能，改善视觉效果。代码中使用这个API，就是告诉浏览器但愿执行一个动画，让浏览器在下一个动画帧安排一次网页重绘。

requestAnimationFrame使用一个回调函数做为参数，这个回调函数会在浏览器重绘以前调用，因为功效只是一次性的，因此想实现连续的动效，须要递归调用，示例以下：

<div id="demo" style="position:absolute; width:100px; height:100px; background:#ccc; left:0; top:0;"></div>

<script>
var demo = document.getElementById('demo');
function render(){
    demo.style.left = parseInt(demo.style.left) + 1 + 'px'; //每一帧向右移动1px
}
requestAnimationFrame(function(){
    render();
    //当超过300px后才中止
    if(parseInt(demo.style.left) <= 300) requestAnimationFrame(arguments.callee);
});
</script>
复制代码

cancelAnimationFrame方法用于取消重绘：

var requestID = requestAnimationFrame(repeatOften);
cancelAnimationFrame(requestID);
复制代码

使用requestAnimationFrameAPI的优点以下：

• 会把每一帧中的全部DOM操做集中起来，在一次重绘或回流中就完成，而且重绘或回流的时间间隔牢牢跟随显示器的刷新频率（60 Hz或者75 Hz）；
• 在隐藏或不可见的元素中，将不会进行重绘或回流，这固然就意味着更少的的cpu，gpu和内存使用量；

目前，主要浏览器Firefox 23 / IE 10 / Chrome / Safari）都支持这个方法。能够用下面的方法，检查浏览器是否支持这个API。若是不支持，则自行模拟部署该方法。

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame || 
          window.oRequestAnimationFrame || 
          window.msRequestAnimationFrame || 
          function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();
复制代码

因此，能够这么说，requestAnimationFrame就是一个性能优化版、专为动画量身打造的setTimeout，不一样的是requestAnimationFrame不是本身指定回调函数运行的时间，而是跟着浏览器内建的刷新频率来执行回调，这固然就能达到浏览器所能实现动画的最佳效果了。

DEMO传送门

Transition

CSS 中的 transition 属性容许块级元素中的属性在指定的时间内平滑的改变，简单看下其语法规则：

transition: property duration timing-function delay;
复制代码

具体属性值介绍以下：

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。（none / all / property）
transition-duration	规定完成过渡效果须要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。（linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)）
transition-delay	定义过渡效果什么时候开始。

DEMO传送门

Animation

相似的CSS还提供了一个Animation属性，不过区别于Transition，Animation做用于元素自己而不是样式属性，可使用关键帧的概念，应该说能够实现更自由的动画效果。

语法

animation: name duration timing-function delay iteration-count direction;
复制代码

具体属性值介绍以下：

值	描述
animation-name	规定须要绑定到选择器的 keyframe 名称。（keyframename、none）
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。（linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)）
animation-delay	规定在动画开始以前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。 （normal、alternate）

DEMO传送门

Canvas

<canvas>是HTML5新增的元素，做为页面图形绘制的容器，可用于经过使用JavaScript中的脚原本绘制图形。例如，它能够用于绘制图形，制做照片，建立动画，甚至能够进行实时视频处理或渲染，Canvas具备以下特色：

• 依赖分辨率，基于位图；
• 不支持事件处理器；
• 弱的文本渲染能力；
• 可以以 .png 或 .jpg 格式保存结果图像；
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘；

大多数 Canvas 绘图 API 都没有定义在 元素自己上，而是定义在经过画布的 getContext()方法得到的一个“绘图环境”对象上。 Canvas API也使用了路径的表示法。可是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，好比调用 beginPath() 和 arc() 方法。一旦定义了路径，其余的方法，如 fill()，都是对此路径操做。

DEMO传送门

SVG

SVG是英文Scalable Vector Graphics的缩写，意为可缩放矢量图形，用来定义用于网络的基于矢量的图形，其使用 XML 格式定义图像，而且具备以下特色：

• 不依赖分辨率，基于矢量图；
• 支持事件处理器；
• 最适合带有大型渲染区域的应用程序（好比谷歌地图）；
• 复杂度高会减慢渲染速度（任何过分使用 DOM 的应用都不快）；
• 不适合游戏应用；

来看一个简单的示例，用SVG画了一个圆：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
复制代码

SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

SVG 的 <circle> 用来建立一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。若是忽略这两个属性，那么圆点会被设置为 (0, 0)。r属性定义圆的半径。

下面主要是介绍SVG中的几个用于动画的元素，它们分别是：

：一般放置到一个SVG图像元素里面，用来定义这个图像元素的某个属性的动画变化过程； ：元素也是放置一个图像元素里面，它能够引用一个事先定义好的动画路径，让图像元素按路径定义的方式运动； ：元素对图形的运动和变换有更多的控制，它能够指定图形的变换、缩放、旋转和扭曲等； ：元素的用法在上面的例子里出现过，它是一个辅助元素，经过它，<animateMotion>等元素能够引用一个外部的定义的<path>。让图像元素按这个<path>轨迹运动；

DEMO传送门

WebGL

WebGL使得网页在支持HTML <canvas>标签的浏览器中，不须要安装任何插件，即可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行3D渲染。 WebGL 程序由JavaScript的控制代码，和在计算机的图形处理单元（GPU）中执行的特效代码(shader code，渲染代码) 组成。

WebGL 本质上是基于光栅化的 API，而不是基于 3D 的 API。WebGL 只关注两个方面，即投影矩阵的坐标和投影矩阵的颜色。使用 WebGL 程序的任务就是实现具备投影矩阵坐标和颜色的 WebGL 对象便可。可使用“着色器”来完成上述任务。顶点着色器能够提供投影矩阵的坐标，片断着色器能够提供投影矩阵的颜色。

因为WebGL的体系比较庞大，三言两语说不完，因此如下仅提供各类传送门了（不准说我懒！！）： WebGL 参考资料 WebGL API

几个经常使用的动画库

Ani.js -- 基于CSS动画的生命处理库 Dynamics.js -- 建立具备物理运动效果动画的js库 Animate.css -- 齐全的CSS3动画库 Three.js -- 让用户经过javascript入手进入搭建webgl项目的类库