如何使用原生JS制作一個緩動動畫-創(chuàng)新互聯(lián)

這期內(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)//移動間隔設置
}

網(wǎng)站標題：如何使用原生JS制作一個緩動動畫-創(chuàng)新互聯(lián)
標題網(wǎng)址：http://muchs.cn/article20/iccco.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站改版、App開發(fā)、企業(yè)建站、自適應網(wǎng)站、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)