這篇文章將為大家詳細(xì)講解有關(guān)js怎么實現(xiàn)拖動緩動效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

為長洲等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及長洲網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、長洲網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

這個效果看似很簡單，到也困惑了很長時間，為什么別人寫出來的拖拽體驗為什么這么好？
直到我自己實現(xiàn)了以后，才發(fā)現(xiàn)，原來我想的實現(xiàn)方式不對。接下來，我通過簡短的幾句話，來提供這個功能的實現(xiàn)思路。

首先，我們要明白，我們鼠標(biāo)拖拽是在一個2d平面上拖拽
2d平面只有x軸和y軸，而且獲取的拖拽值也是基于平面的像素獲取的。所以，我們第一步，先通過鼠標(biāo)事件來獲取到當(dāng)前的拖拽的長度像素。

首先，綁定鼠標(biāo)按下事件，來獲取到鼠標(biāo)基于瀏覽器窗口左上角的xy平面二維坐標(biāo)。

然后，綁定move事件，在move事件回調(diào)內(nèi)獲取到鼠標(biāo)拖拽的坐標(biāo)，和按下坐標(biāo)相減，求出拖拽的距離。

然后，我們需要通過一定比例，將拖拽的像素轉(zhuǎn)換為旋轉(zhuǎn)角度
我這里設(shè)置的比例是，
鼠標(biāo)橫向拖拽10像素，那模型沿3d的Y軸坐標(biāo)就旋轉(zhuǎn)5度，
鼠標(biāo)縱向拖拽10像素，模型沿3d世界的X軸坐標(biāo)旋轉(zhuǎn)1度，并且還設(shè)置了范圍，即沿x軸旋轉(zhuǎn)再-45度到45度之間

function onDocumentMouseMove(event) {
    mouseX = event.clientX;
    mouseY = event.clientY;
    targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDownX) * 0.5;
    targetRotationY = Math.min(Math.max((targetRotationOnMouseDownY - (mouseY - mouseXOnMouseDownY) * 0.1), -45), 45); //拖拽后的目標(biāo)位置
  }

上面獲取到目標(biāo)角度，重點來了，如何實現(xiàn)惰性旋轉(zhuǎn)呢？

通過上面思路，我們知道了目標(biāo)角度，那么直接設(shè)置目標(biāo)角度，肯定就沒有這種想要的效果了，那么如何實現(xiàn)這種惰性效果呢？

接下來，我們需要一個專門實現(xiàn)動畫的requestAnimationFrame方法，這個方法是閑時運行，大根據(jù)性能能夠達到60幀每秒，有好多小伙伴感覺一直遞歸運行會不會卡頓，或者影響性能。那是你多慮了，這個方法會根據(jù)當(dāng)前頁面性能進行減幀，保證頁面流暢運行。

我們有了這個以后，然后做什么呢，就是用來實現(xiàn)緩動，在每一幀里面，獲取到目標(biāo)角度和當(dāng)前角度的角度差，然后每一次只選擇總進度的百分之10 ，然后你會發(fā)現(xiàn)選擇離目標(biāo)角度越近，越慢，體驗效果也是非常的棒。

而且在運行中，角度也會無限制的接近目標(biāo)角度，當(dāng)前demo是通過css3d來實現(xiàn)的：

function animate() {
    requestAnimationFrame(animate);
    rotateY += (targetRotationX - rotateY) * 0.1;
    rotateX += (targetRotationY - rotateX) * 0.1;
    box.style.transform = 'rotateY(' + rotateY + 'deg)';
    item.style.transform = 'rotateX(' + rotateX + 'deg)';
  }

案例全部代碼

  
  
  



  
  
    
    
      
      正面