前端动画大乱炖_H5之家 - 中国HTML5教程资源分享第一站

作为一只前端狗，我们的使命就是在满足产品需求、实现交互设计的基础上，将最好的体验呈现给用户爸爸们。在保证性能的同时，我们通常会给页面加一些动态效果，以增强页面的表现力并提升页面的交互体验。故将前端实现动效的几种常用方式做了个小结，温故而知新。

童年.png

动画即童年

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

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

超人大战赛亚人.avi

几个基本概念

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

帧：在动画过程中，每一幅静止画面即为一“帧”；

帧率：即每秒钟播放的静止画面的数量，单位是fps(Frame per second)或赫兹(Hz)；

帧时长：即每一幅静止画面的停留时间，单位一般是ms(毫秒)；

丢帧：在帧率固定的动画中，某一帧的时长远高于平均帧时长，导致其后续数帧被挤压而丢失的现象；

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

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

实现方式

通常我们在前端实现动画效果的几种主要实现方式如下：

JavaScript：通过定时器（setTimeout 和 setIterval）来间隔来改变元素样式，或者使用requestAnimationFrame；

CSS3：transition 和 animation；

HTML5：使用HTML5提供的绘图方式（canvas、svg、webgl）；

Animations.png

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);

使用 requestAnimationFrame API的优势如下：

会把每一帧中的所有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