JavaScript實現(xiàn)緩動動畫
JavaScript原生定時器實現(xiàn)動畫的緩動效果，供大家參考，具體內容如下
原理很簡單通過定時器修改邊距達到移動動畫效果
實現(xiàn)速度的變化
緩動必然移動速度會有變化,這里需要用到一個小公式或者說算法?
移動單位 = (指定移動位置邊距 - obj.offsetLeft) / 10;var step = (ydpx - obj.offsetLeft) / 10;
有一個細節(jié)需要注意下:
移動的步數(shù)應該去掉小數(shù),否者因為除法的原因無法移動到指定位置,會有一些差距當step小于0對應的是向左移動舍去小數(shù)如:1.2 為1大于0向右移動,進位,如:1.2為2這應該是個數(shù)學問題**
之后代碼的實現(xiàn)就簡單多了：
//ydjl:移動到指定位置 (obj.offsetLeft)function animate(obj,ydpx) { //清除定時器 防止每一次調用都產生一個定時器,疊加導致問題(速度變快) clearInterval(obj.timer); obj.timer=setInterval(function () { var step = (ydpx - obj.offsetLeft) / 10; //移動距離 //取整 step = step>0 ? Math.ceil(step) : Math.floor(step); //判斷是否移動到指定位置 if(obj.offsetLeft == ydpx) { //清除定時器,停止移動 clearInterval(obj.timer); } //修改left實現(xiàn)移動 obj.style.left = obj.offsetLeft + step + ’px’; },15)//移動間隔設置}
下面是演示:
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <style> .boks{ position: absolute; top: 300px; left:0; width: 100px; height: 100px; background-color: #ff0011; } </style></head><body><button class='yd500'>移動500px</button><button class='yd800'>移動800px</button><div class='boks'>hezi</div></body><script> function animate(obj,ydpx) { //清除定時器 clearInterval(obj.timer); obj.timer=setInterval(function () { var step = (ydpx - obj.offsetLeft) / 10; step = step>0 ? Math.ceil(step) : Math.floor(step); if(obj.offsetLeft == ydpx) { clearInterval(obj.timer); } obj.style.left = obj.offsetLeft + step + ’px’; },15); } var yd500 = document.querySelector('.yd500'); var yd800 = document.querySelector('.yd800'); //盒子 var boks = document.querySelector('.boks'); yd500.addEventListener(’click’, function() { // 調用函數(shù) animate(boks, 500); //傳遞要移動的對象 和 移動位置 }) yd800.addEventListener(’click’, function() { // 調用函數(shù) animate(boks, 800); //傳遞要移動的對象 和 移動位置 })</script></html>
萌新小白的學習記錄
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. Android 7.0 運行時權限彈窗問題的解決2. java實現(xiàn)圖形化界面計算器3. IntelliJ IDEA設置條件斷點的方法步驟4. IDEA的Mybatis Generator駝峰配置問題5. ASP.NET MVC解決上傳圖片臟數(shù)據(jù)的方法6. Python使用oslo.vmware管理ESXI虛擬機的示例參考7. Thinkphp3.2.3反序列化漏洞實例分析8. python 批量將PPT導出成圖片集的案例9. 原生js XMLhttprequest請求onreadystatechange執(zhí)行兩次的解決10. python編寫函數(shù)注意事項總結
網公網安備