动画函数

1 动画实现原理

**核心原理：**通过定时器setInterval()不断移动盒子位置。

实现步骤：

1. 获得盒子当前位置
2. 让盒子在当前位置加上1个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器条件
5. 注意此元素需要添加定位，才能使用element.style.left

// 1. 获得盒子当前位置 div.offsetLeft
// 2. 使用div.style.left更改盒子的位置
//div.style.left = div.offsetLeft + 1 +'px';
// 3. 添加定时器
setInterval(function() {
    
    
    div.style.left = div.offsetLeft + 1 +'px';
},30)//此时无结束定时器，盒子会走出页面

//完整写法：
var timer = setInterval(function() {
    
    
    if(div.offsetLeft >= 400) {
    
    
        //停止动画 本质是清除定时器
        clearInterval(timer);
    }
    div.style.left = div.offsetLeft + 1 +'px';
},30)

2 动画函数简单封装

函数需要传递2个参数，动画对象和移动距离。

//简单动画函数封装obj:目标对象 target: 目标位置
function animate(obj, target) {
    
    
    var timer = setInterval(function () {
    
    
        if (obj.offsetLeft >= target) {
    
    
            clearInterval(timer);
        }
        obj.style.left = obj.offsetLeft + 1 + 'px';
    }, 30);
}
var div = document.querySelector('div');
var span = document.querySelector('span')
//调用函数
animate(div, 300);
animate(span, 200);

3 动画函数给不同元素记录不同定时器

1. 如果多个元素都使用这个动画函数，每次都要var一个timer， 比较浪费内存空间
2. 如果div要使用这个定时器 叫做timer ,span 的定时器也叫timer 会引起歧义。 因此我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)

核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性。

function animate(obj, target) {
    
    
    // 使用obj.timer给不同的对象指定了不同的定时器
    obj.timer = setInterval(function () {
    
    
        if (obj.offsetLeft >= target) {
    
    
            clearInterval(obj.timer);
        }
        obj.style.left = obj.offsetLeft + 1 + 'px';
    }, 30);
}

4 缓动效果原理

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

思路：

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2. 核心算法：(目标值-现在的位置)/ 10 作为每次移动距离的步长
3. 停止的条件是：让当前盒子的位置等于目标位置时就停止计时器
4. 注意步长值需要取整

匀速动画与缓动动画的区别

• 匀速动画就是盒子当前的位置 + 固定的值
• 缓动动画就是 盒子当前的位置 + 变化的值((目标位置 - 现在的位置)/10)

function animate(obj, target) {
    
    
    //让元素只有一个定时器在执行，需要清除以前的定时器
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
    
    
        //步长值写到定时器的里面
        //把步长值改为整数，不会出现小数问题
        // var step= Math.ceil((target - obj.offsetLeft) / 10);
        //考虑到后退问题
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft >= target) {
    
    
            clearInterval(obj.timer)
        }
        //把每次加1这个步长值改为一个慢慢变小的值
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

5 动画函数添加回调函数

回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行之后，再去执行传进去的函数，这个过程叫做回调。

回调函数写的位置：定时器结束的位置。

function animate(obj, target, callback) {
    
    
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
    
    
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft >= target) {
    
    
            clearInterval(obj.timer);
            //回调函数写的位置
            if(callback) {
    
    
                //调用函数
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

//应用
btn.addEventListener('click', function() {
    
    
    animate(div, 800, function() {
    
    
        alert('hello');
    })
})

6 动画函数封装

动画在开发中会经常使用，所以可以把它封装到单独的一个js文件中，用的时候引入即可。