溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關js怎么實現拖動緩動效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
這個效果看似很簡單，到也困惑了很長時間，為什么別人寫出來的拖拽體驗為什么這么好？
直到我自己實現了以后，才發現，原來我想的實現方式不對。接下來，我通過簡短的幾句話，來提供這個功能的實現思路。
首先，我們要明白，我們鼠標拖拽是在一個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); //拖拽后的目標位置
}上面獲取到目標角度，重點來了，如何實現惰性旋轉呢？
通過上面思路，我們知道了目標角度，那么直接設置目標角度，肯定就沒有這種想要的效果了，那么如何實現這種惰性效果呢？
接下來，我們需要一個專門實現動畫的requestAnimationFrame方法，這個方法是閑時運行，最大根據性能能夠達到60幀每秒，有好多小伙伴感覺一直遞歸運行會不會卡頓，或者影響性能。那是你多慮了，這個方法會根據當前頁面性能進行減幀，保證頁面流暢運行。
我們有了這個以后，然后做什么呢，就是用來實現緩動，在每一幀里面，獲取到目標角度和當前角度的角度差，然后每一次只選擇總進度的百分之10 ，然后你會發現選擇離目標角度越近，越慢，體驗效果也是非常的棒。
而且在運行中，角度也會無限制的接近目標角度，當前demo是通過css3d來實現的：
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)';
}案例全部代碼
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>css3d翻轉</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
perspective: 1000px;
}
.item {
width: 50vw;
height: 50vh;
transform: rotateX(-50deg);
perspective: 5000px;
transform-style: preserve-3d;
}
.box {
background: #abb9c5;
width: 100%;
height: 100%;
transform-style: preserve-3d;
position: relative;
}
.font,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 50vh;
background: #4cae4c;
backface-visibility: hidden;
}
.back {
background: #62ebff;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<!--item 可以觸發翻轉的區域-->
<div class="item">
<!--box 可以翻轉的容器-->
<div class="box">
<!--font 默認顯示的正面-->
<div class="font">正面</div>
<!--back 背面-->
<div class="back">背面</div>
</div>
</div>
</body>
<script>
var targetRotationX = 0;
var targetRotationY = 0;
var targetRotationOnMouseDownX = 0;
var targetRotationOnMouseDownY = 0;
var mouseX = 0;
var mouseY = 0;
var mouseXOnMouseDownX = 0;
var mouseXOnMouseDownY = 0;
var box = document.querySelector('.box');
var item = document.querySelector('.item');
var rotateY = 0;
var rotateX = 0;
init();
animate();
function init() {
// EVENTS
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
}
function onDocumentMouseDown(event) {
event.preventDefault();
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
mouseXOnMouseDownX = event.clientX;
mouseXOnMouseDownY = event.clientY;
targetRotationOnMouseDownX = targetRotationX;
targetRotationOnMouseDownY = targetRotationY;
}
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); //拖拽后的目標位置
}
function onDocumentMouseUp() {
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentTouchStart(event) {
event.preventDefault();
if (event.touches.length === 1) {
mouseXOnMouseDownX = event.touches[0].pageX;
mouseXOnMouseDownY = event.touches[0].pageY;
targetRotationOnMouseDownX = targetRotationX;
targetRotationOnMouseDownY = targetRotationY;
}
}
function onDocumentTouchMove(event) {
event.preventDefault();
if (event.touches.length === 1) {
mouseX = event.touches[0].pageX;
mouseY = event.touches[0].pageY;
targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDownX) * 0.5;
targetRotationY = Math.min(Math.max((targetRotationOnMouseDownY - (mouseY - mouseXOnMouseDownY) * 0.1), -45), 45); //拖拽后的目標位置
}
}
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)';
}
</script>
</html>關于“js怎么實現拖動緩動效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
