這期內(nèi)容當中小編將會給大家?guī)碛嘘P如何使用原生JS制作一個緩動動畫，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

專業(yè)成都網(wǎng)站建設公司，做排名好的好網(wǎng)站，排在同行前面，為您帶來客戶和效益!創(chuàng)新互聯(lián)為您提供成都網(wǎng)站建設，五站合一網(wǎng)站設計制作，服務好的網(wǎng)站設計公司，網(wǎng)站建設、成都網(wǎng)站制作負責任的成都網(wǎng)站制作公司!

原理很簡單通過定時器修改邊距達到移動動畫效果

實現(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) {
 //清除定時器 防止每一次調(diào)用都產(chǎn)生一個定時器,疊加導致問題(速度變快)
 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)//移動間隔設置
}

本文名稱：如何使用原生JS制作一個緩動動畫-創(chuàng)新互聯(lián)
URL分享：http://weahome.cn/article/iccco.html