java script實現基礎的緩動動畫

方塊右移動畫的實現，移動速度逐漸降低。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    < 
style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .button-500 {
            margin-top:300px;
        }
        .button-800 {
            margin-top:350px;
        }
    </style>
</head>
< 
body>
   <div></div> 
   <button class="button-500">點選開啟運動到500</button>
   <button class="button-800">點選開啟運動到800</button>
   <script>
       var div=document.querySelector('div');
       var button1=document.querySelector('.button-500');
       var 
 button2=document.querySelector('.button-800');
       //封裝函式
       
       function animate(obj,target,callback){
           //先清除一次定時器，防止點選按鈕時重複呼叫
            clearInterval(obj.timer);
            obj.timer=setInterval(function() {
                var step=(target-obj.offsetLeft)/10; 
                //js中出現小數會有誤差，所以去除誤差的方法就是向上取整
                //兩個是因為當往回走的時候也需要判斷位置
                step=step>0?Math.ceil(step):Math.floor(step);
                if(div.offsetLeft==target){
                    clearInterval(obj.timer);
                    //設定一個回撥函式判斷，如果有回撥函式，則執行回撥函式
                    if(callback){
                        callback();
                    }
                }
                obj.style.left=obj.offsetLeft+step+'px';
            }, 15);
        }
        //呼叫函式直接可以實現動畫
        button1.addEventListener('click',function(){
            animate(div,500);
        })
        button2.addEventListener('click',function(){
            animate(div,800,function(){//設定回撥函式
                div.style.backgroundColor='red';
            });
        })
   </script>
</body>
</html>

（學習於黑馬的pink老師，相似之處還請見諒。）

java script實現基礎的緩動動畫

方塊右移動畫的實現，移動速度逐漸降低。

java script實現基礎的緩動動畫

javascript實現左右緩動動畫函式

JavaScript實現緩動動畫

js實現緩動動畫

javascript實現緩動動畫效果

JavaScript緩動動畫函式的封裝方法

js簡單動畫：勻速動畫、緩動動畫、多物體動畫以及透明度動畫

Javascript-緩動動畫封裝與應用

JS封裝緩動動畫效果函式

緩動動畫特效

自定義Marix的自定義動畫，支援緩動動畫屬性

JavaScript 詳解緩動動畫的封裝與使用

緩動動畫的函式封裝

js實現拖動緩動效果

在vue基礎上實現原生拖動事件draggable

js動畫緩動公式

Java進階基礎:繼承的實現,方法重寫注意事項,方法過載與重寫的區別,抽象類,程式碼塊

Java Script基礎

Java執行緒基礎及多執行緒的實現

【併發基礎】Java記憶體模型基礎知識

java script實現基礎的緩動動畫

方塊右移動畫的實現，移動速度逐漸降低。

相關推薦