这篇文章给大家介绍JavaScript中怎么实现拖动缓动效果，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
通化县ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为
创新互联建站的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！
首先，绑定鼠标按下事件，来获取到鼠标基于浏览器窗口左上角的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)'; }
案例全部代码
css3d翻转
正面
背面
关于JavaScript中怎么实现拖动缓动效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
网站栏目：JavaScript中怎么实现拖动缓动效果-创新互联
标题URL：
http://cdkjz.cn/article/ccheho.html
