JS_動畫

1. 動畫和封裝

1.1 動畫的分類

閃現
p.style.left =”500px” 勻速 緩動

1.2 動畫原理

盒子未來的位置 = 盒子現在的位置 + 步長;

style.left賦值,用offsetLeft獲取值。
style.left獲取值不方便,獲取行內式,如果沒有值“”;容易出現NaN;
offsetLeft獲取值特別方便,而且是現成number方便計算。因為他是隻讀的不能賦值。

1.3 緩動動畫原理

動畫原理 = 盒子位置 + 步長(步長越來越小)

leader=leader+(target-leader)/10;
盒子位置 = 盒子本身位置+(目標位置-盒子本身位置)/ 10;

1.4 動畫封裝實例代碼

 var btnArr = document.getElementsByTagName("button");
    var box = document.getElementsByClassName("box")[0];
    //綁定事件
    btnArr[0].onclick = function () {
        //如果有一天我們要傳遞另外一個盒子,那麼我們的方法就不好用瞭
        //所以我們要增加第二個參數,被移動的盒子本身。
        animate(box,200);
    }

    function animate(ele,target){
        //要用定時器,先清除定時器
        //一個盒子隻能有一個定時器,這樣兒的話,不會和其他盒子出現定時器沖突
        //而定時器本身就成為盒子的一個屬性
        clearInterval(ele.timer);
        //我們要求盒子既能向前又能向後,那麼我們的步長就得有正有負
        //目標值如果大於當前值取正,目標值如果小於當前值取負
        var speed = target>ele.offsetLeft?10:-10;
        ele.timer = setInterval(function () {
            //在執行之前就獲取當前值和目標值之差
            var val = target - ele.offsetLeft;
            ele.style.left = ele.offsetLeft + speed + "px";
            //目標值和當前值之差如果小於步長,那麼就不能在前進瞭
            //因為步長有正有負,所有轉換成絕對值來比較
            if(Math.abs(val)

1.5 緩動動畫封裝實例代碼

 var btn = document.getElementsByTagName("button")[0];
    var p = document.getElementsByTagName("p")[0];

    var timer = null;

    btn.onclick = function () {
        //要用定時器,先清定時器
        clearInterval(timer);
        timer = setInterval(function () {
            var target = 0;
            //緩動。如何緩動呢?步長越來越小....
            //   步長用目標位置和盒子自身位置的十分之一
            //最後10像素的時候都是1像素1像素的向目標位置移動,就能夠到達指定位置。
            var step = (target - p.offsetLeft)/10;
            //每次獲取步長都向上取整,這種情況就包含step<0.4的情況
            //拓展:差值大於0的時候,向上取整,小於0的時候向下取整。
            //step = Math.ceil(step);
            step = step>0?Math.ceil(step):Math.floor(step);
            //step = target>p.offsetLeft?Math.ceil(step):Math.floor(step);

            //動畫原理:盒子未來的位置 = 盒子當前的位置+步長
            p.style.left = p.offsetLeft + step + "px";
            //跳出條件:目標位置-當前位置的絕對值,小於步長
            console.log(1);
            if(Math.abs(0-p.offsetLeft)

發佈留言