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

成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網站設計、成都做網站、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯(lián)網時代的合陽網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

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

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

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

然后，綁定move事件，在move事件回調內獲取到鼠標拖拽的坐標，和按下坐標相減，求出拖拽的距離。

然后，我們需要通過一定比例，將拖拽的像素轉換為旋轉角度
我這里設置的比例是，
鼠標橫向拖拽10像素，那模型沿3d的Y軸坐標就旋轉5度，
鼠標縱向拖拽10像素，模型沿3d世界的X軸坐標旋轉1度，并且還設置了范圍，即沿x軸旋轉再-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); //拖拽后的目標位置
  }

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

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

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

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

而且在運行中，角度也會無限制的接近目標角度，當前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)';
  }

案例全部代碼

  
  
  



  
  
    
    
      
      正面