動畫實現原理
阿新 • • 發佈：2022-04-14
核心原理:通過定時器setlnterval0不斷移動盒子位置。
實現步驟：
1.獲取盒子當前位置
2.讓盒子在當前位置加上1個移動距離
3.利用定時器不斷重複這個操作
4.加一個結束定時器的條件
5.注意此元素需要新增定位，才能使用element.style.left
程式碼示例：
<!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> div { position: absolute; left: 0; width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div></div> </body> <script> var div = document.querySelector('div') var timer = setInterval(function () { if (div.offsetLeft >= 400) { // 停止動畫 本質是停止定時器 clearInterval(timer) } div.style.left= div.offsetLeft + 1 + 'px' }, 30) </script> </html>