JS 動畫效果原理

1. 原理：

（1）擷取需要添加動畫的元素

（2）為此元素設定一個定時器

（3）動畫效果代碼書寫

（4）當達到某種條件後，取消定時器

執行個體：一個方塊盒子左移到一定位置停止.

2. 函數封裝，便于複用

3. 性能優化改進

問題：

（1）每次調用函數都需要聲明一個timer，開辟一塊記憶體空間使用.

（2）不同元素的定時器名稱都是timer，容易引起混淆.

解決方案：

利用js動态語言機制，為不同元素對象聲明不同定時器，代碼如下.

4. 使用按鈕點選事件觸發動畫效果時，多次點選bug問題.

在函數第一行添加一行代碼【作用】：清除上次點選的動畫效果，防止多次點選效果累計，造成bug.

 5. 實作動畫随着運作減速效果

6. 回調函數的簡單試用

【連結轉載僅作為個人學習使用】

https://www.bilibili.com/video/bv1sy4y1c7ha?p=316