DOM的高级应用-动画之运动的封装（实用笔记）

动画的概念：动起来的画面，就是动画。

运动的概念： 动起来的物体，运动。

动画的原理：改变：位置，形态，属性，而且是持续的改变：一直进行某个动作或行为。

生物学的概念：人的眼睛，在一秒内能识别的连续的图片18张（18帧）。

动画的三要素：起点、速度：（步长，频率） 、终点。在页面上做运动的话，得遵守以上这些规定。

我们以后会经常用到运动这个函数，所以把它封装起来，以后可以直接拿来用了。下面说说运动的封装：

一、运动的封装-匀速：

 let obox = document.getElementById("box");
    let t;
    document.onclick = function(){
        clearInterval(t);
        t = setInterval(() => {
            if(obox.offsetLeft === 1000){
                clearInterval(t);
            }else{
                obox.style.left = obox.offsetLeft + 10 + "px";
            }
        }, 30);
    }

解释：持续的改变：计时器，不断的执行，不断的left的增加。

速度：步长10px，频率1000 / 18 = 55.55556毫秒数

二、运动的封装-缓冲

 let target = 600;
    let obox = document.getElementById("box");
    let t;
    document.onclick = function(){
        clearInterval(t);
        t = setInterval(() => {
            let speed = (target - obox.offsetLeft)/10;
            speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
            if(obox.offsetLeft === target){
                clearInterval(t);
            }else{
                obox.style.left = obox.offsetLeft + speed + "px";
            }
        }, 30);
    }

解释：行业习惯，DOM元素的改变，最低不要低于30毫秒执行一次。

三、运动的封装-封装

function move(ele,attr,target){
        // ele是一个元素对象，对象，对象可以做什么，存储数据
        clearInterval(ele.t);
        ele.t = setInterval(() => {
            var s = getStyle(ele,attr);   // 得到带有px的字符
            var iNow = parseInt(s);    // 借助parseInt的取整，得到整除部分，去掉px
            let speed = (target - iNow)/10;
            speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
            if(iNow === target){
                clearInterval(ele.t);
            }else{
                ele.style[attr] = iNow + speed + "px";
            }
        }, 30);
    }

完成运动的封装后，把这些运动函数放在一个js库里面，往后如果哪个地方需要用到运动，直接调用即可，简单方便。