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

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

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

實(shí)現(xiàn)速度的變化

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

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

有一個細(xì)節(jié)需要注意下:

移動的步數(shù)應(yīng)該去掉小數(shù),否者因為除法的原因無法移動到指定位置,會有一些差距
當(dāng)step小于0對應(yīng)的是向左移動舍去小數(shù)如:1.2 為1
大于0向右移動,進(jìn)位,如:1.2為2
這應(yīng)該是個數(shù)學(xué)問題**

之后代碼的實(shí)現(xiàn)就簡單多了：

//ydjl:移動到指定位置 (obj.offsetLeft)
function animate(obj,ydpx) {
 //清除定時器 防止每一次調(diào)用都產(chǎn)生一個定時器,疊加導(dǎo)致問題(速度變快)
 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實(shí)現(xiàn)移動
  obj.style.left = obj.offsetLeft + step + 'px';

 },15)//移動間隔設(shè)置
}

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

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

廣告

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