JavaScript學習筆記(二十)DOM動畫效果

DOM動畫效果

讓一個元素從左至右進行運動

var box = document.getElementById("box");

var t = null;

t = setInterval(function(){

})

運動的終止條件

t = setInterval(function()) // 元素的屬性值 === 目標點if(dom.attr === target){

clearInterval(t);}

運動的三要素

起始點

一個運動的起始點其實就是當前元素的位置，我們通過API獲取當前元素的位置，讓這個位置作為運動的起始。

目標

速度

DOM動畫效果封裝

單屬性運動框架:

function move( ele , attr , target){

// 1. 關閉開啟定時器; clearInterval( ele.timer );

ele.timer = setInterval( function(){

// 2. 計算速度; if(attr === "opacity"){

var iNow = parseInt(getComputedStyle(ele)[attr] * 100); //0 ~ 100 }else{

var iNow = parseInt(getComputedStyle(ele)[attr]); //100 }

var speed = (target - iNow) / 10;

// 3. 速度取整; if(speed > 0){

speed = Math.ceil(speed);

}else{

speed = Math.floor(speed);

}

if(attr === "opacity"){

ele.style[attr] = (iNow + speed) / 100 ;

}else{

ele.style[attr] = iNow + speed + "px";

}

// 4. 終止條件; if(iNow === target){

clearInterval(ele.timer);

}

} , 50)

}

多屬性運動框架 (拓展)

多屬性運動框架