原理
动画是利用人眼的视觉残留特性而达成的一种视觉效果，即人眼看到的影像会有短暂时间的残留，这个时间约为1/24秒，当一段连续变化的影像在较短时间内变化时就会给人以流畅的感觉。根据1/24秒这个数据我们可以推断出，当连续变化的影像为每秒24次的速度就能给人流畅的感觉。所以电影的帧频为24帧，而电视一般采用的是25帧和30帧两种制式。
所谓的动画，就是通过一些列的运动形成的动的画面。我们可以通过JavaScript利用时间或时间增量来改变元素样式(位置,颜色或大小等)，来达到动的效果。
JavaScript的动画用的最多的3个api就是setInterval()、setTimeout()和requestAnimationFrame()
requestAnimationFrame是setTimeout函数的性能增强版,它不能自行指定函数运行频率，而是由浏览器决定刷新频率,调用requestAnimationFrame后，它会要求浏览器根据自己的频率进行一次重绘
思路
用JavaScript实现动画的思路都是通过连续改变物体的属性值来实现效果的。一般来说都是改变一个物体的left,right,width,height,opacity.
我们完成一个动画,首先要做得一件事就是事件拆解,如果是一个很复杂的动画,我们就要将其拆解成若干子动画过程,然后再逐一完成并拼接成一个连贯的动画,在拆解的过程中我们将要考虑的另一个问题,也就是这个动画的子过程我们要用什么技术或者用什么方式来完成
总体来说,如果是自己实现一个动画是个面向过程的思维方式,我们将要从上至下逐一细化思路及细节,最终完成动画;对于实现动画,我们还有另外一种更加面向对象的方式,那就是利用第三方的动画库去完成动画的绘制,这种方式将会让开发者面向开源库开发,我们可以直接去库里面去寻找符合我们要求的动画内容,并加以集成, 这种开发方式在日常的工作中会大幅度的提高开发效率,会一定程度上节省开发时间
常用的JavaScript动画库
下面介绍几种常用的JavaScript动画库:
Velocity 是一个简单易用、高性能、功能丰富的轻量级 JS 动画库。它能和 jQuery 完美协作，并和 $.animate() 有相同的 API， 但它不依赖 jQuery，可单独使用
Bounce.js 是一个基于CSS3实现的漂亮的关键帧动画生成工具和类库
Dynamics.js 是一款可以创建物理运动动画效果的 js 库插件
Vivus 是一款可以执行 SVG 路径动画的轻量级 Javascript 库
JavaScript动画实战
下面我们用JavaScript来完成一些动画,整个动画的顺序将会由浅至深:
透明度动画
我们用CSS可以也可以做出透明度变化的动画,但是使用JavaScript可以更加精细的控制时间与动画的变换关系,下面我们以一个匀速的透明度动画举例:
这个动画让我们在固定的时间来完成一个盒子颜色透明度的匀速变化,假设我们初始的透明度为30%,鼠标移动到盒子上面,我们的透明度变为100%,鼠标移出颜色又变回初始状态,我们使用定时器来完成渐进改变的过程:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>透明度动画</title>
</head>
<body>
<div id="box"></div>
</body>
</html>
