原生js實現動畫函式的封裝及核心原理
阿新 • • 發佈：2021-07-13
原生js實現動畫函式的封裝及核心原理
一、動畫實現原理
核心原理：通過定時器setInterval()不斷移動盒子的位置
二、實現步驟
1、獲得盒子當前的位置
2、讓盒子在當前位置加上移動的距離（步長）
3、注意元素需要新增定位，才能使用element.style.left
4、利用定時器不斷重複這個操作
5、加上一個結束定時器的條件
停止的條件：讓當前盒子的位置等於目標位置就停止定時器（實質是刪除定時器）
6、回撥函式寫的位置：定時器結束的位置，當動畫執行結束後才去呼叫該該函式
‘三、程式碼展示
function animate(obj, target, callback) { //新增定時器前先清除以前的定時器，只保留當前一個定時器window.clearInterval(obj.timer); obj.timer = window.setInterval(function() { //步長值寫在定時器裡面 /*把我們的步長值改為整數，不要出現小數問題 1）步長值>0,向上取整 2）步長值<0,向下取整 */ var step = (target - obj.offsetLeft) / 10;//緩動效果核心演算法 step = step >= 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) { //停止動畫 本質停止定時器 window.clearInterval(obj.timer); //回撥函式一定要寫到定時器結束裡面 if (callback) { callback(); } } else { obj.style.left = obj.offsetLeft + step + 'px'; } }, 15) }
將以上程式碼可以專門寫入annimate.js檔案，用到animate動畫函式，將js檔案引入
注意：
1、使用動畫函式的前提，該元素必須的定位
2、若index.js依賴animate.js，所以animate.js要寫到index.js上面
四、應用
【輪播圖的實現】
html檔案
<body> <div class="banner1"> <button class="forward50">前進50</button> <button class="back50">後退50</button> <div class="box50">50</div> </div> <div class="banner2"> <button class="forward100">前進100</button> <button class="back100">後退100</button> <div class="box100">100</div> </div> </body>
css檔案
<style> .banner1, .banner12 { position: relative; height: 150px; } .box50 { position: absolute; width: 50px; height: 50px; border: 3px solid #eeeeee; border-radius: 7px; background-color: peru; color: teal; font-weight: 700; text-align: center; line-height: 50px; } .box100 { position: absolute; width: 100px; height: 100px; border: 3px solid #eeeeee; border-radius: 7px; background-color: peru; color: teal; font-weight: 700; text-align: center; line-height: 100px; } .finish { background-color: tomato; } </style>
js檔案
<script>
// 1、獲取元素
var box50 = document.querySelector('.box50');
var box100 = document.querySelector('.box100');
var forward50 = document.querySelector('.forward50');
var back50 = document.querySelector('.back50');
var forward100 = document.querySelector('.forward100');
var back100 = document.querySelector('.back100');
//2、註冊事件
//前進50
forward50.addEventListener('click', function() {
animate(box50, 50, function() {
box50.style.backgroundColor = 'tomato';
console.log(box50.offsetLeft);
});
})
//後退50
back50.addEventListener('click', function() {
animate(box50, 0, function() {
box50.style.backgroundColor = 'peru';
console.log(box50.offsetLeft);
})
})
//前進100
forward100.addEventListener('click', function() {
animate(box100, 100, function() {
box100.style.backgroundColor = 'tomato';
console.log(box100.offsetLeft);
})
})
//後退100
back100.addEventListener('click', function() {
animate(box100, 0, function() {
box100.style.backgroundColor = 'peru';
console.log(box100.offsetLeft);
})
})
</script>
效果展現：