[JavaScript] 动画函数的封装

4. 加一个结束定时器的条件

5. 注意此元素需要添加定位，才能使用element.style.left

js的动画：

---

那么我们下面体会一下js的动画效果：

css的动画：

---

再复习一下css的动画效果：

动画函数简单封装

=======================================================================

因为我们的页面中需要用到大量的动画效果，所以能够封装成一个函数就非常方便了，注意函数需要传递两个参数，动画对象和移动到的距离

var div = document.querySelector(‘div’);

//obj目标对象，target目标位置

function animate(obj,target) {

var timer = setInterval(function() {

if(obj.offsetLeft >= target)

{

clearInterval(timer);

}

else {

obj.style.left = obj.offsetLeft + 1 + ‘px’;

}

},10);

}

animate(div,800);

这样封装完的就是一个简单的动画函数，和上例中的效果相同

给不同对象添加不同的定时器

============================================================================

在上例中我们每调用一次动画函数就会在内存中开辟一个空间，因为我们赋值了一个var 变量。这样的话浪费内存资源。其次，如果不同元素调用动画函数，但是在我们的函数里定时器都叫timer,这很容易引起歧义。所以，我们可以给不同的元素使用自己专用的自己的定时器

核心原理：

---

利用js是一门动态语言，可以很方便的给当前对象添加属性

因为我们的函数传递进来的obj就是一个对象，所以我们给他添加一个属性，就避免了内存资源的浪费。并且timer属性是专门属于obj对象的，div.timer就是div对象的定时器，span.timer就是span对象的定时器

代码示例：

---

var div = document.querySelector(‘div’);

//obj目标对象，target目标位置

function animate(obj,target) {

//先清除以前的定时器，只保留当前的一个定时器执行

clearInterval(obj.timer);

obj.timer = setInterval(function() {

if(obj.offsetLeft >= target)

{

clearInterval(obj.timer);

}

else {

obj.style.left = obj.offsetLeft + 1 + ‘px’;

}

},10);

}

animate(div,800);

为什么在函数开头要加清除定时器呢，因为如果我们通过一个外部事件调用这个函数，比如点击一个按钮会调用动画函数，那如果我们不停的按这个按钮，那么就会给对象不停添加定时器，他就会越跑越快，所以在开头清除其他的定时器是必须的。

缓动动画原理

=====================================================================

缓动动画就算让元素运动速度有所变化，最常见的就是让速度慢慢停下来

思路：

---

1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来

2.核心算法：（目标值-现在的位置）/ 20 做为每次移动的距离步长

3.停止的条件是：让当前盒子位置等于目标位置就停止定时器

4.注意步长值要取整

实现效果：

---

代码示例：

---

我们只需要在把代码做一点小小的改动：

移动到500

移动到800