溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關如何使用原生JS制作一個緩動動畫，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
原理很簡單通過定時器修改邊距達到移動動畫效果
實現速度的變化
緩動必然移動速度會有變化,這里需要用到一個小公式或者說算法
移動單位 = (指定移動位置邊距 - 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', function() {
// 調用函數
animate(boks, 800); //傳遞要移動的對象 和 移動位置
})
</script>
</html>上述就是小編為大家分享的如何使用原生JS制作一個緩動動畫了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
