js--动画函数（最全版）

一、简单版

可以实现动画移动的效果

function animate(obj, target) {
    //Obj目标对象 target目标位置
    var timer = setInterval(function () {
        if (obj.offsetLeft >= target) {
            clearInterval(timer);
        }
        else {
            obj.style.left = obj.offsetLeft + 1 + 'px';
        }
    }, 30)
}

二、

思考：如果有多个对象点用函数就会在内存中开辟多个空间，浪费资源

2、多次调用，函数名在内存空间中都一样，容易混乱

 js是一个动态语言，很方便添加属性

function animate(obj, target) {
    //把对象作为obj的属性
    obj.timer = setInterval(function () {
        if (obj.offsetLeft >= target) {
            clearInterval(obj.timer);
        }
        else {
            obj.style.left = obj.offsetLeft + 1 + 'px';
        }
    }, 30)
}

三、

思考：如果按钮调用动画函数，点击按钮次数越多动画速度越快   怎么办？

点的次数越多，开启的定时器就越多。让元素只有一个定时器在运行就可以解决

 

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';
        }
    }, 30)
}

四、

思考：以上都是匀速动画，如何让它缓动？

一开始快，越来越放慢步伐

 应该用一个步长公式来控制每次行走的步长

step=（目标值-当前位置）/10  

这样就会有规律的缓动

function animate(obj, target) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        //添加步长公式
        step = (target - obj.offsetLeft) / 10;
        if (obj.offsetLeft >= target) {
            clearInterval(obj.timer);
        }
        else {
            obj.style.left = obj.offsetLeft + step + 'px';
        }
    }, 30)
}

五、

思考：打开浏览器控制台你会发现它到不了精准的值，是因为步长会有小数存在

而也会有负数存在，所以我们要考虑两个方面：一个是步长为正数（取大）一个是步长为负数（取小）

 用到了数学函数：Math.ceil取大     Math.floor取小

function animate(obj, target) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        step = (target - obj.offsetLeft) / 10;
        //正数取大   负数取小
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft >= target) {
            clearInterval(obj.timer);
        }
        else {
            obj.style.left = obj.offsetLeft + step + 'px';
        }
    }, 30)
}

六、

 callback回调函数：将函数传递到另一个函数中

 

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        step = (target - obj.offsetLeft) / 10;
        //正数取大   负数取小
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft >= target) {
            clearInterval(obj.timer);
            //放在函数结束的条件里 因为回调函数等函数结束后才执行
            if (callback) {
                //判断如果有就执行
                callback();
            }
        }
        else {
            obj.style.left = obj.offsetLeft + step + 'px';
        }
    }, 30)
}

好,动画函数就总结到这里了，我要继续苦研轮播图去咯

希望下一篇是我写得手写轮播图！加油