javascript勻速動畫和緩衝動畫

時間 2019-12-07

原文原文鏈接

關於網頁中的動畫，在css3中咱們已經可使用一些屬性快速的作出來，可是有時候爲了瀏覽器的兼容性咱們仍是須要使用js來製做網頁中的動畫。javascript

使用js作動畫最重要的一個函數就是setInterval函數，這裏再也不贅述，不懂能夠直接百度用法。本文主要講動畫的原理已經在製做過程當中的要點。css

老規矩，先上代碼，能直接看懂的能夠節省時間。html

html部分：java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>move</title>
    <link rel="stylesheet" href="move1.css">
</head>
<body>
    <input type="button" value="勻速移動" id="move1">
    <input type="button" value="漸變移動" id="move2">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <script type="text/javascript" src="move1.js"></script>
</body>
</html>

css部分：

*{
    margin: 0px;
    padding: 0px;
}
.box{
    width: 100px;
    height: 100px;
    background-color: green;
    position: relative;
    margin-top: 10px;
}

js部分：

/**
 * Created by siri on 2016/9/10.
 */
window.onload=function () {
    var btn1 = document.getElementById('move1');
    var btn2 = document.getElementById('move2');
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    btn1.onclick = function () {
        animate1(box1,500);
    }
    btn2.onclick = function () {
        animate2(box2,500);
    }
    //勻速動畫
    function animate1(ele,target){
        //要用定時器，先清除定時器
        //一個盒子只能有一個定時器，這樣兒的話，不會和其餘盒子出現定時器衝突
        //而定時器自己講成爲盒子的一個屬性
        clearInterval(ele.timer);
        //咱們要求盒子既能向前又能向後，那麼咱們的步長就得有正有負
        //目標值若是大於當前值取正，目標值若是小於當前值取負
        var speed = target>ele.offsetLeft?3:-3;
        ele.timer = setInterval(function () {
            //在執行以前就獲取當前值和目標值之差
            var val = target - ele.offsetLeft;
            ele.style.left = ele.offsetLeft + speed + "px";
            //目標值和當前值只差若是小於步長，那麼就不能再前進了
            //由於步長有正有負，全部轉換成絕對值來比較
            console.log(val);
            if(Math.abs(val)<=Math.abs(speed)){
                ele.style.left = target + "px";
                clearInterval(ele.timer);

            }
        },30);
    }

    //緩動動畫封裝
    function animate2(ele,target) {
        clearInterval(ele.timer); //清楚歷史定時器
        ele.timer = setInterval(function () {
            //獲取步長 肯定移動方向(正負值) 步長應該是愈來愈小的，緩動的算法。
            var step = (target-ele.offsetLeft)/10;
            //對步長進行二次加工(大於0向上取整,小於0項下取整)
            step = step>0?Math.ceil(step):Math.floor(step);
            //動畫原理： 目標位置 = 當前位置 + 步長
            console.log(step);
            ele.style.left = ele.offsetLeft + step + "px";
            //檢測緩動動畫有沒有中止
            if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
                ele.style.left = target + "px"; //直接移動指定位置
                clearInterval(ele.timer);
            }
        },30);
    }


}

html和css基本就是爲了咱們的js部分搭框架，不講太多， 要注意的是，必定要對全局的margin和padding清零，不然的話他在計算的時候初始的margin和padding會影響計算，從而致使有時候運動不中止的狀況。

javascript部分代碼的解析在源碼中已經很詳細了，下面主要講解原理。css3

勻速運動：算法

經過setInterval函數咱們控制每多少毫秒運動的距離，而後在快要到達指定位置的時候，判斷步長（每多少毫秒運動的距離）和此時和目標位置的距離，若是步長大於此時和目標位置的距離，則直接定位到目標位置，這樣作是爲了不步長和總距離不是整數倍關係而產生最後到達位置和目標位置有差值的錯誤。瀏覽器

緩衝運動：框架

緩衝運動的基本函數是和勻速運動同樣的，只是緩衝運動的步長咱們是經過和目標位置的距離來肯定的，這樣咱們的步長是不斷變小的，從而實現緩衝運動的效果。在肯定步長的時候咱們使用Math.ceil和Math.floor對步長值進行取整是爲了不出現小數，由於若是出現小數後面最後到達的位置確定是和目標位置有偏差的。函數

注意事項：在每次移動開始前必定要使用clearInterval清除定時器。動畫

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。