javascript實現(xiàn)勻速動畫效果
本文實例為大家分享了javascript實現(xiàn)勻速動畫的具體代碼,供大家參考,具體內(nèi)容如下
實現(xiàn)思路:
1、主要使用定時函數(shù)setInterval()來實現(xiàn)動畫效果
2、可以將動畫封裝成一個函數(shù),這樣可以多個元素調(diào)用,不用重復(fù)寫
3、動畫函數(shù)接收參數(shù)- - -元素對象、目標(biāo)偏移量、回調(diào)函數(shù)
①函數(shù)里添加一個定時函數(shù),給定時函數(shù)一個名字,后面清除定時函數(shù)要使用定時函數(shù)名
②定時函數(shù)里面處理程序:
a. 給一個固定的每步移動值,設(shè)置元素對象的偏移量勻速變化- - -eg: obj.style.left = obj.offsetLeft + 5 + ‘px';
b. 判斷偏移量是否達(dá)到目標(biāo)值,達(dá)到的話停止動畫- - -
clearInterval(obj.timer);
并且在動畫停止時判斷是否存在回調(diào)函數(shù),有回調(diào)函數(shù)的話執(zhí)行回調(diào)函數(shù)
4、在動畫函數(shù)的最前面添加清除定時器函數(shù),清除之前的動畫影響- - -clearInterval(obj.timer);
有時需要點擊按鈕后,觸發(fā)動畫這種,沒有添加清除的話,重復(fù)點擊按鈕,動畫效果會疊加,越來越快
5、也可以將動畫函數(shù)封裝到j(luò)s文件中進(jìn)行引用
小提示:以上只是一種方法,不同動畫效果根據(jù)所需進(jìn)行調(diào)整實現(xiàn)方法
代碼示例:
<!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); }) // 動畫函數(shù) obj動畫對象, target目標(biāo)左偏移量, callback回調(diào)函數(shù) 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); // 如果有回調(diào)函數(shù),執(zhí)行回調(diào)函數(shù) if (callback) { callback(); } } }, 30); } </script> </body> </html>
頁面效果:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS簡單編號生成器實現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了JS簡單編號生成器實現(xiàn)方法,涉及JavaScript針對表單與字符串操作的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04JS獲取表格內(nèi)指定單元格html內(nèi)容的方法
這篇文章主要介紹了JS獲取表格內(nèi)指定單元格html內(nèi)容的方法,涉及javascript中innerHTML屬性的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03