這期內容當中小編將會給大家帶來有關如何使用原生JS制作一個緩動動畫，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

實現速度的變化

緩動必然移動速度會有變化,這里需要用到一個小公式或者說算法

移動單位 = (指定移動位置邊距 - obj.offsetLeft) / 10;
var step = (ydpx - obj.offsetLeft) / 10;

有一個細節需要注意下:

移動的步數應該去掉小數,否者因為除法的原因無法移動到指定位置,會有一些差距
當step小于0對應的是向左移動舍去小數如:1.2 為1
大于0向右移動,進位,如:1.2為2
這應該是個數學問題**

之后代碼的實現就簡單多了：

//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實現移動
  obj.style.left = obj.offsetLeft + step + 'px';

 },15)//移動間隔設置
}