溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下javascript如何實現勻速動畫效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
1、主要使用定時函數setInterval()來實現動畫效果
2、可以將動畫封裝成一個函數，這樣可以多個元素調用，不用重復寫
3、動畫函數接收參數- - -元素對象、目標偏移量、回調函數
①函數里添加一個定時函數，給定時函數一個名字，后面清除定時函數要使用定時函數名
②定時函數里面處理程序：
a. 給一個固定的每步移動值，設置元素對象的偏移量勻速變化- - -eg: obj.style.left = obj.offsetLeft + 5 + ‘px';
b. 判斷偏移量是否達到目標值，達到的話停止動畫- - -
clearInterval(obj.timer);
并且在動畫停止時判斷是否存在回調函數，有回調函數的話執行回調函數
4、在動畫函數的最前面添加清除定時器函數，清除之前的動畫影響- - -clearInterval(obj.timer);
有時需要點擊按鈕后，觸發動畫這種，沒有添加清除的話，重復點擊按鈕，動畫效果會疊加，越來越快
5、也可以將動畫函數封裝到js文件中進行引用
小提示：以上只是一種方法，不同動畫效果根據所需進行調整實現方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>勻速動畫</title>
<style>
.box {
position: relative;
width: 1000px;
margin-top: 20px;
}
.xiaohuli {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
}
.pikaqiu {
position: absolute;
top: 150px;
left: 0;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<button class="btn1">點擊移動小狐貍</button>
<button class="btn2">點擊移動皮卡丘</button>
<div class="box">
<img src="images/小狐貍.jpg" alt="" class="xiaohuli">
<img src="images/皮卡丘.jpg" alt="" class="pikaqiu">
</div>
<script>
var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
var xiaohuli = document.querySelector('.xiaohuli');
var pikaqiu = document.querySelector('.pikaqiu');
btn1.addEventListener('click', function() {
animate(xiaohuli, 300);
})
btn2.addEventListener('click', function() {
animate(pikaqiu, 450);
})
// 動畫函數 obj動畫對象, target目標左偏移量, callback回調函數
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
obj.style.left = obj.offsetLeft + 5 + 'px';
if (obj.offsetLeft >= target) {
// 停止動畫
clearInterval(obj.timer);
// 如果有回調函數，執行回調函數
if (callback) {
callback();
}
}
}, 30);
}
</script>
</body>
</html>頁面效果：
以上是“javascript如何實現勻速動畫效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
