JavaScript實(shí)現(xiàn)緩動(dòng)動(dòng)畫
JavaScript原生定時(shí)器實(shí)現(xiàn)動(dòng)畫的緩動(dòng)效果，供大家參考，具體內(nèi)容如下
原理很簡單通過定時(shí)器修改邊距達(dá)到移動(dòng)動(dòng)畫效果
實(shí)現(xiàn)速度的變化
緩動(dòng)必然移動(dòng)速度會(huì)有變化,這里需要用到一個(gè)小公式或者說算法?
移動(dòng)單位 = (指定移動(dòng)位置邊距 - obj.offsetLeft) / 10;var step = (ydpx - obj.offsetLeft) / 10;
有一個(gè)細(xì)節(jié)需要注意下:
移動(dòng)的步數(shù)應(yīng)該去掉小數(shù),否者因?yàn)槌ǖ脑驘o法移動(dòng)到指定位置,會(huì)有一些差距當(dāng)step小于0對(duì)應(yīng)的是向左移動(dòng)舍去小數(shù)如:1.2 為1大于0向右移動(dòng),進(jìn)位,如:1.2為2這應(yīng)該是個(gè)數(shù)學(xué)問題**
之后代碼的實(shí)現(xiàn)就簡單多了：
//ydjl:移動(dòng)到指定位置 (obj.offsetLeft)function animate(obj,ydpx) { //清除定時(shí)器 防止每一次調(diào)用都產(chǎn)生一個(gè)定時(shí)器,疊加導(dǎo)致問題(速度變快) clearInterval(obj.timer); obj.timer=setInterval(function () { var step = (ydpx - obj.offsetLeft) / 10; //移動(dòng)距離 //取整 step = step>0 ? Math.ceil(step) : Math.floor(step); //判斷是否移動(dòng)到指定位置 if(obj.offsetLeft == ydpx) { //清除定時(shí)器,停止移動(dòng) clearInterval(obj.timer); } //修改left實(shí)現(xiàn)移動(dòng) obj.style.left = obj.offsetLeft + step + ’px’; },15)//移動(dòng)間隔設(shè)置}
下面是演示:
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <style> .boks{ position: absolute; top: 300px; left:0; width: 100px; height: 100px; background-color: #ff0011; } </style></head><body><button class='yd500'>移動(dòng)500px</button><button class='yd800'>移動(dòng)800px</button><div class='boks'>hezi</div></body><script> function animate(obj,ydpx) { //清除定時(shí)器 clearInterval(obj.timer); obj.timer=setInterval(function () { var step = (ydpx - obj.offsetLeft) / 10; step = step>0 ? Math.ceil(step) : Math.floor(step); if(obj.offsetLeft == ydpx) { clearInterval(obj.timer); } obj.style.left = obj.offsetLeft + step + ’px’; },15); } var yd500 = document.querySelector('.yd500'); var yd800 = document.querySelector('.yd800'); //盒子 var boks = document.querySelector('.boks'); yd500.addEventListener(’click’, function() { // 調(diào)用函數(shù) animate(boks, 500); //傳遞要移動(dòng)的對(duì)象 和 移動(dòng)位置 }) yd800.addEventListener(’click’, function() { // 調(diào)用函數(shù) animate(boks, 800); //傳遞要移動(dòng)的對(duì)象 和 移動(dòng)位置 })</script></html>
萌新小白的學(xué)習(xí)記錄
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
網(wǎng)公網(wǎng)安備