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

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

原理很簡(jiǎn)單通過(guò)定時(shí)器修改邊距達(dá)到移動(dòng)動(dòng)畫(huà)效果

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

緩動(dòng)必然移動(dòng)速度會(huì)有變化,這里需要用到一個(gè)小公式或者說(shuō)算法

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

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

移動(dòng)的步數(shù)應(yīng)該去掉小數(shù),否者因?yàn)槌ǖ脑驘o(wú)法移動(dòng)到指定位置,會(huì)有一些差距
當(dāng)step小于0對(duì)應(yīng)的是向左移動(dòng)舍去小數(shù)如:1.2 為1
大于0向右移動(dòng),進(jìn)位,如:1.2為2
這應(yīng)該是個(gè)數(shù)學(xué)問(wèn)題**

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

//ydjl:移動(dòng)到指定位置 (obj.offsetLeft)
function animate(obj,ydpx) {
 //清除定時(shí)器 防止每一次調(diào)用都產(chǎn)生一個(gè)定時(shí)器,疊加導(dǎo)致問(wèn)題(速度變快)
 clearInterval(obj.timer); 
 obj.timer=setInterval(function () {
  var step = (ydpx - obj.offsetLeft) / 10; //移動(dòng)距離
  //取整
  step = step>0 ? Math.ceil(step) : Math.floor(step);
  //判斷是否移動(dòng)到指定位置
  if(obj.offsetLeft == ydpx)
  {
  //清除定時(shí)器,停止移動(dòng)
   clearInterval(obj.timer);
  }
  //修改left實(shí)現(xiàn)移動(dòng)
  obj.style.left = obj.offsetLeft + step + 'px';

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

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

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

廣告

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