JavaScript 詳解緩動動畫的封裝與使用
實現過程分析
(1)如何重復調用?
答:封裝一個函數,用一次調用一次
代碼分析:
function animate(obj, target, callback) { //詳細實現步驟 };
animate :(動畫函數)
obj(動畫對象):給誰添加動畫效果
target(目標值):移動到什麼距離
callback(回調函數):同時要執行什麼功能
(2)如何實現緩動效果?(緩動動畫核心算法)
答:移動距離 =(目標值 – 現在盒子位置)/ 10,移動距離會慢慢變小,直至停下,就實現瞭緩動原理
代碼分析:
var step = (target - obj.offsetLeft) / 10;
step(移動距離): 元素要移動的距離
target(目標值):移動到什麼距離
obj.offsetLeft(盒子現在的位置):盒子現在距離左側的距離
(3)為什麼移動不到指定位置?(給的目標距離是500px,移動到496.4就停下瞭)
答:因為需要取整,正數往上取整,負數向下取整
代碼分析:
step = step > 0 ? Math.ceil(step) : Math.floor(step);
如果setp要移動的距離是正數,就向上取整,如果是負數,就向下取整,采取三元表達式以優化代碼,提升整體質量
(4)如何讓目標元素真正移動起來?
答:添加定時器,並將實時移動距離(步長)賦值給元素
代碼分析:
var timer = setInterval(function () { //詳細實現代碼 }, 15); //添加定時器 obj.style.left = obj.offsetLeft + step + 'px'; //步長
1.給定時器添加名字是為瞭好清除定時器,時間設置為15(實際開發常用15)
2.元素的左側的值 = 元素離左側的距離 + 移動距離 + ‘px’ (記得一定要加px單位),實現原理就是不斷將最新的值賦值給元素,實現動起來的效果
(5)為什麼會鬼畜或者越點越快?
答:因為定時器重復添加,需要每次調用時清除定時器
代碼分析:
clearInterval(timer);
兩個地方需要清除,第一是剛調用緩動動畫函數時,避免鬼畜和破速,第二是判斷元素到達指定位置沒有,如果到達瞭就停止定時器
案例測試:
<!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>Document</title> <style> .sliderbar { /* width: 240px; */ /* height: 40px; */ /* 父盒子定位根據實際要求來 */ position: absolute; right: 0; top: 100px; text-align: center; line-height: 40px; /* display: block; */ width: 40px; height: 40px; cursor: pointer; } .sp { position: relative; color: #fff; } .con { /* 設置瞭絕對定位就在父盒子裡飄起來 */ position: absolute; left: 0; top: 0; width: 200px; height: 40px; background-color: pink; z-index: -1; color: #fff; } </style> <script src="./animate.js"></script> </head> <body> <div class="sliderbar"> <span class="sp">←</span> <div class="con">問題反饋</div> </div> <script> var sliderbar = document.querySelector('.sliderbar'); // var sp = document.querySelector('.sp'); var con = document.querySelector('.con'); sliderbar.addEventListener('mouseenter', function() { //animate(obj, target, callback); animate(con, -160, function() { sliderbar.children[0].innerHTML = '→'; }); }) sliderbar.addEventListener('mouseleave', function() { //animate(obj, target, callback); animate(con, 0, function() { sliderbar.children[0].innerHTML = '←'; }); }) </script> </body> </html>
整體思路:通過給盒子添加鼠標事件來調用動畫函數,最終實現效果
運行效果:
緩動動畫函數最終封裝代碼(animate.js):
function animate(obj, target, callback) {
//調用函數就清除一次定時器,避免問題發生
clearInterval(obj.timer)
//添加定時器
obj.timer = setInterval(function () {
//步長值寫到計時器裡面 改為整數(往上取整)
var step = (target – obj.offsetLeft) / 10;
//整數往大瞭取,負數往小瞭取
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
//如果已經到達指定位置就停止定時器
clearInterval(obj.timer);
//回調函數寫到定時器結束之後
callback && callback();
}
//把每次加一步長值改變為慢慢變小的值
obj.style.left = obj.offsetLeft + step + ‘px’;
}, 15);
}
生命不息,學習不止,鍵盤敲爛,月薪過萬 !加油,代碼人
到此這篇關於JavaScript 詳解緩動動畫的封裝與使用的文章就介紹到這瞭,更多相關JavaScript 緩動動畫 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!