基本的动画效果包括以下几种：
- 运动（改变值例如 left、right、width、height、opacity）
- 缓冲运动
- 多物体运动
- 任意值变化
- 链式运动
- 同时运动
简单动画
简单的动画效果直接通过改变元素的属性即可，下面的例子要实现一个动画效果，当鼠标移动到分享按钮时，元素框会向右移动，当鼠标移开时，元素框还原到原来位置。思路是通过设定定时器改变元素的属性值，当属性值达到期望的效果时删除定时器。
See the Pen js 基本运动 – 简单运动 by FengChenming (@koromon) on CodePen.
这里需要注意的是对定时器的清除：
|
1 2 |
clearInterval(timer); |
因为定时器可以一直叠加，如果我们在对象进行运动的同时再次触发移入事件，会造成多个定时器叠加，因此每次触发移入事件要先清除定时器。
缓冲动画
缓冲动画和简单动画的思路是一致的，唯一的区别就是会有变速的效果，因此需要添加一个会变化的变量控制动画速度。在本例中会不断变化的值就是要改变的属性值和最终值之间的差距。需要修改的代码如下：
|
1 2 3 4 5 6 |
// 6、避免动画速度过快，我们可以降低变化 var speed = (iTarget - oleft) * 0.1; // 7、因为 speed 减速后不为整数，并且会有精度丢失的情况，因此需要通过 Math 函数来取整动画速度。 // 当速度大于 0 时向上取整，避免速度取整为 0 造成无运动；反之向下取整，避免速度取整为 0 造成无运动。 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); |
See the Pen js 基本运动 – 缓冲运动 by FengChenming (@koromon) on CodePen.
多物体动画
多物体动画即多个物体一起运动，实现方法和上面的例子类似，但要注意的是，如果我们直接为每个物体添加动画，会导致以下情况发生：
可以发现当同时触发多个物体运动时，会导致动画效果无法正常运作。关键点在于定时器的设置，在前面的例子中我们是这样清除定时器的：
|
1 2 |
clearInterval(timer); |
这意味着每个对象都拥有相同的定时器，当新的对象运动时，即使旧的定时器还未完成任务也会被清除。因此我们需要辨别不同对象的定时器。我们给不同的对象设置定时器即可：
|
1 2 |
obj.timer; |
See the Pen js 基本运动 – 多物体运动 by FengChenming (@koromon) on CodePen.
任意值变化
现在我们的基本动画框架已经差不多实现了，但是动画效果有很多种，宽、高、透明度等，如果为每个效果都重写一次方法无疑是很浪费的，接下来让我们来完善我们的框架：
要适配多种属性，需要先给函数添加一个新的属性参数
|
1 2 |
startAnimate(obj, attr ,iTarget) |
然后我们把函数里面之前的固定属性都替换为参数值 attr。
但是基本动画中透明度和其他位置动画是有一定区别的，因为透明度是没有 px 的，因此在函数中需要新增 if else 判断。
获取透明度
|
1 2 3 |
// 此处未考虑 IE9 之前的兼容，乘100的原因是为了兼容下面的 speed 设置 var oAttr = getStyle(obj,attr) * 100; |
改变透明度
|
1 2 |
obj.style.opacity = (oAttr + speed)/100; |
See the Pen js 基本运动 – 任意值变化 by FengChenming (@koromon) on CodePen.
链式动画
链式动画即当元素完成一个动画后立即完成下一个动画，换句话说就是元素依次完成不同的动画，也就是当前动画完成后执行下一个动画，即清除当前定时器后执行下一段动画。
参考以下代码：
|
1 2 3 4 5 6 7 8 |
xx.onmousemove = function() { recursion(obj,attr,iTarget,function(){ recursion(obj,attr,iTarget,function(){ // code }); }); } |
完善后的代码如下：
See the Pen js 基本运动 – 链式运动 by FengChenming (@koromon) on CodePen.
同时运动
同时运动即一个元素在实现某个动画的同时实现另外一个动画，比如长宽透明度同时变化等。这里我们需要使用到 JSON 格式传递数据。关于 JSON 的简单介绍可以参考维基百科或者百度百科。
和多物体运动的思路类似，此时我们需要给同一个元素传递不同的运动属性，使用 forin 循环配合 JSON 即可实现。
首先需要修改函数参数
|
1 2 |
function startAnimate(obj, json, fn){} |
在定时器内循环 JSON 为每个动画属性赋值
|
1 2 3 |
// 添加不同的动画效果 attr 即每个属性，json[attr] 即属性值 for (var attr in json) {} |
修改上面两步后我们发现动画效果还有点小瑕疵，查看元素时会发现多个动画效果可能只有一个达到最终值，其余的动画效果可能均未实现最后效果。因为我们判断定时器的清除是按照是否完成动画效果来判断的，如果第一个动画效果完成后就会清楚定时器，但是同时运动时我们会有多个动画效果，因此需要等到最后一个效果完成才清楚定时器。
解决思路是创建一个 json1 变量深拷贝传入的 json，每当完成一个动画就删除 json1 中的属性值，然后判断 json1 中的元素个数，若为 0 即可清楚定时器。
See the Pen js 基本运动 – 同时运动 by FengChenming (@koromon) on CodePen.
至此为止，一个简单的 JS 动画框架就完成了。
动画实例
下面是一个利用刚才完成的框架实现动画效果的例子：
See the Pen js 基本运动 – 简单的实例 by FengChenming (@koromon) on CodePen.
总结
要用 JS 实现基本的动画效果，有几点需要留意：
- 定时器的设定和清除时机
- 对运动属性的获取和设置
- 对于公共属性需要判断其所属的对象
- JSON 对象的设置
当然，通过 JQuery 和 CSS3 能够更加快速的实现动画效果，但是不仅仅是知道怎么用，也要对其基本实现有个大概了解，而通过上面的几个基本例子，相信大家对动画效果的实现思路也有了大概的理解。