JSスポーツセット、便利なパッケージ機能機能

アニメの原理
均等運動

        // 1.      s = vt  v  
        let btn = document.querySelector("button");
        let div = document.querySelector(".box");
        btn.onclick = function () {
            starMove(div, 300)
        };
        //                 +      -
        function starMove(dom, target) {
            clearInterval(dom.timer);
            let speed = 7; //                 
            dom.timer = setInterval(() => {
                 //         
                speed = (target - dom.offsetLeft) > 0 ? 7 : -7;
                //          
                //      -           <         
                if (Math.abs(target - div.offsetLeft) < Math.abs(speed)) {
                    clearInterval(dom.timer);
                    dom.style.left = target + "px";
                } else {
                    dom.style.left = dom.offsetLeft + speed + "px";
                }
            }, 30);
        }

運動をやわらげる
各要素が独自のタイマーを持つように、タイマー名を要素の属性に付けます.緩動運動:まず加速して減速して変換します.

        // 2.                        
        let btn = document.querySelector("button");
        let div = document.querySelector(".box");

        btn.onclick = function () {
            startMove(div, 500)
        };
        
        function startMove(dom, target) {
            let speed = null;
            let step = 7;
            clearInterval(dom.timer);
            dom.timer = setInterval(() => {
                //                 
                //                  (       )  
                speed = (target - dom.offsetLeft) / step;  
                //                        
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 
				//                     
                if (dom.offsetLeft == target) {
                    clearInterval(dom.timer);
                } else {
                	//             speed +        -    
                    dom.style.left = dom.offsetLeft + speed + "px";
                }
            }, 30);
        };

属性の緩動運転
元素によって属性が変わる.透明度の緩み:

        
        //                    
        function getStyle(dom, attr) {
            if (window.getComputedStyle) {
                return window.getComputedStyle(dom, null)[attr];
            } else {
                return dom.currentStyle[attr];
            }
        }
        
        // 3.     
        let btn = document.querySelector("button");
        let div = document.querySelector(".box");

        btn.onclick = function () {
            //      100 
            startMove(div, "opacity", 20);
        };
        //      
        function startMove(dom, target) {
            clearInterval(dom.timer);
            let speed = null,
                iCur = null;
            let step = 7;
            dom.timer = setInterval(function () {
                iCur = parseFloat(getStyle(dom, "opacity")) * 100;
                // speed                。
                //                  (       )  
                speed = (target - iCur) / step;
                //                        
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 
                //      
                if (iCur == target) {
                    clearInterval(dom.timer);
                } else {
                    dom.style.opacity = (iCur + speed) / 100;
                }
            }, 30);
        };

パッケージはすべての属性の緩動に適しています.

        // 4.           
        function startMove(dom, attr, target) {
            let speed = null,
                iCur = null;
            let step = 7;
            clearInterval(dom.timer);
            dom.timer = setInterval(function () {
            	// 	            opacity       
                if (attr == "opacity") {
                    iCur = parseFloat(getStyle(dom, attr)) * 100;
                } else {
                    iCur = parseFloat(getStyle(dom, attr));
                }
                //               
                speed = (target - iCur) / step; //                
                //                        
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 
                if (iCur == target) {
                    clearInterval(dom.timer);
                } else {
                    if (attr == "opacity") {
                        dom.style.opacity = (iCur + speed) / 100;
                    } else {
                    	//             speed +        -    
                        dom.style[attr] = iCur + speed + "px";
                    }
                }
            }, 30);
        }

複数の属性が同時に入ってきます.
異なる要素の複数の属性が変化します.コールバック機構:コールバック関数、アニメーションが完了したら実行します.

        // 5.         
        let btn = document.querySelector("button");
        let div = document.querySelector(".box");

        btn.onclick = function () {
            //      100 
            startMove(div, {
                width: 400,
                height: 400,
                opacity: 50 //         100
            });
        };

        //     ：
        // 1.       ，
        // 2.           ，   *100
        // 3.    ：        opacity    /100
        // 4.                flag = true       
        // 5.                    .             .        flag = false
        // 6.      ，                        
        // 7.    ，      ，        

        function startMove(dom, attrObj, callback) {
            clearInterval(dom.timer);
            let speed = null,
                iCur = null;
            const step = 7;
            dom.timer = setInterval(function () {
                let flag = true; //   
                //         
                for (let attr in attrObj) {
                    //           opacity   
                    if (attr == "opacity") {
                        iCur = parseFloat(getStyle(dom, attr)) * 100;
                    } else {
                        iCur = parseFloat(getStyle(dom, attr));
                    }

                    //     
                    speed = (attrObj[attr] - iCur) / step;; //                
                    // console.log(speed);

                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //     
                    //           opacity   
                    if (attr == "opacity") {
                        dom.style.opacity = (iCur + speed) / 100;
                    } else {
                        dom.style[attr] = iCur + speed + "px";
                    }
                    //                 
                    if (iCur != attrObj[attr]) {
                        flag = false;
                    }
                }
                //               true                 
                if (flag) {
                    clearInterval(dom.timer);
                    //       ：callback     false   ，callback      callback()
                    callback && callback();
                }
            }, 30);
        }