day15(DOM高阶 缓动动画、匀速动画的封装)

DOM高级操作

一、运动的原理

运动的原理：

让某件物品沿着某种方向随着时间的变化改变位置

//让页面中的obox元素的left值，每30毫秒，在自身left的基础上增加10像素

setInterval(function(){
    obox.style.left = obox.offsetLeft+10+"px";
},30)

为什么是30毫秒呢？

因为电影播放每秒24帧，人眼就识别不出卡顿了，但是对于电脑来说，处理速度相对较快，需要每秒30帧以上才会显得流畅

二、缓冲运动

在变速运动中，曾经用物理学的知识实现过缓冲运动，缓冲运动实际上就是减速运动的一种特殊形式，指元素做减速运动，速度减到0时，恰好停在目标点位置，学名叫加速度恒定的匀减速运动

假设要从数值A变化到数值B，如果是线性运动，则每次移动距离是一样；如果是缓动，每次移动距离不一样。那如何才能不一样呢？很简单，按比例移动就可以。

比方说：你和初恋之间距离是64，每秒移动一半，则，你们之间的距离下一秒就是32, 再下一秒就是16，然后8，然后4，然后2，然后1，然后……你们就在一起了。你们在一起的这个过程就是一个典型的先快后慢的缓动运动过程

缓动动画公式：
step = (target - beigin)/10
比如：
100px

第一次步长：
step = (100 - 0)/10 = 10
第二次步长：
step = (100 - 10)/10 = 9
第三次步长：
step = (100 - 19)/10 = 8.1
...
走到最后几步的时候：0.9 0.8 ... 0.1  step>0  Math.ceil(step)   1  正值

走到最后几步的时候：-0.9 -0.8 ... -0.1  step<0  Math.floor(step) -1  负值

/*
获取css样式封装
    @param {object} elm 需要获取的元素
    @param{string}  你需要改变的属性
*/
function getStyle(elm,attr){
    if(window.getComputedStyle){
        return getComputedStyle(elm,null)[attr];
    }else{
        return elm.currentStyle[attr];
    }
}

/*
缓动动画封装
    注意点：缓动动画的步长需要使用缓动动画公式计算出来，所以不需要传步长值进去
    @param {object} elm 表示做动画的元素
    @param {number} elm 表示每次运动的步长
    @param{number}  target 表示你的目标值
    @param{string}  你需要改变的属性
    @param{function} 回调函数，当函数执行完毕后，后面回调函数执行
*/
function uniformAnimation(elm,des,target,attr,callback){
    // 要先清除在开启，不然会造成定时器累加
    // 把timer当成一个对象的属性，这样timer属于一个单独的对象，这样就不会影响
    clearInterval(elm.timer)
    elm.timer = setInterval(function(){
        var begin =parseFloat( getStyle(elm,attr));
        var num = des;
        var result = begin + num;
        // 判断当到达预定target位置时，附固定值给结果
        if(result >= target && num >0){
            result = target
            clearInterval(elm.timer);
            if(callback){
                callback()
            }
        }else if(result <= target && num <0){
            result = target
            clearInterval(elm.timer)
            if(callback){
                callback()
            }
        }
        // 记住一定要使用中括号的形式，参数用点会报错
        elm.style[attr] = result +"px";

    },30)//30毫秒：主要是动画都是24帧
}

/*
缓动动画封装
    注意点：缓动动画的步长需要使用缓动动画公式计算出来，所以不需要传步长值进去
    @param {object} elm 表示做动画的元素
    @param{number}  target 表示你的目标值
    @param{string}  你需要改变的属性
    @param{function} 回调函数，当函数执行完毕后，后面回调函数执行
*/
function slowAnimation(elm, target, attr, callback) {
    // 清除定时器，确保定时器没有累加
    clearInterval(elm.timer);
    elm.timer = setInterval(function () {
        var begin = parseFloat(getStyle(elm, attr));
        var result = (target - begin) / 30
        result = result > 0 ? Math.ceil(result) : Math.floor(result);
        var res = begin + result;
        elm.style[attr] = res + "px";
        if (target == res) {
            clearInterval(elm.timer)
            if (callback) {
                callback();
            }
        }
    }, 30)
}