JavaScript實現緩動動畫
阿新 • • 發佈：2020-11-27
JavaScript原生定時器實現動畫的緩動效果，供大家參考，具體內容如下
原理很簡單通過定時器修改邊距達到移動動畫效果
實現速度的變化
緩動必然移動速度會有變化,這裡需要用到一個小公式或者說演算法?
移動單位 = (指定移動位置邊距 - obj.offsetLeft) / 10;
var step = (ydpx - obj.offsetLeft) / 10;
有一個細節需要注意下:
移動的步數應該去掉小數,否者因為除法的原因無法移動到指定位置,會有一些差距
當step小於0對應的是向左移動捨去小數如:1.2 為1
大於0向右移動,進位,如:1.2為2
這應該是個數學問題**
之後程式碼的實現就簡單多了：
//ydjl:移動到指定位置 (obj.offsetLeft)
function animate(obj,ydpx) {
//清除定時器 防止每一次呼叫都產生一個定時器,疊加導致問題(速度變快)
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);
}
//修改left實現移動
obj.style.left = obj.offsetLeft + step + 'px';
},15)//移動間隔設定
}下面是演示:
<!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">移動500px</button>
<button class="yd800">移動800px</button>
<div class="boks">hezi</div>
</body>
<script>
function animate(obj,ydpx) {
//清除定時器
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() {
// 呼叫函式
animate(boks,500); //傳遞要移動的物件 和 移動位置
})
yd800.addEventListener('click',800); //傳遞要移動的物件 和 移動位置
})
</script>
</html>萌新小白的學習記錄
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。