好资源导航 » 文章资讯 » js实现拖动缓动效果

js实现拖动缓动效果

2023-08-03 05:31:04 168

话不多说，先上效果，一个体验非常好的拖拽缓动的效果，让页面提升一个档次。

这个效果看似很简单，到也困惑了很长时间，为什么别人写出来的拖拽体验为什么这么好？
直到我自己实现了以后，才发现，原来我想的实现方式不对。接下来，我通过简短的几句话，来提供这个功能的实现思路。

首先，我们要明白，我们鼠标拖拽是在一个2d平面上拖拽
2d平面只有x轴和y轴，而且获取的拖拽值也是基于平面的像素获取的。所以，我们第一步，先通过鼠标事件来获取到当前的拖拽的长度像素。

首先，绑定鼠标按下事件，来获取到鼠标基于浏览器窗口左上角的xy平面二维坐标。

然后，绑定move事件，在move事件回调内获取到鼠标拖拽的坐标，和按下坐标相减，求出拖拽的距离。

然后，我们需要通过一定比例，将拖拽的像素转换为旋转角度
我这里设置的比例是，
鼠标横向拖拽10像素，那模型沿3d的Y轴坐标就旋转5度，
鼠标纵向拖拽10像素，模型沿3d世界的X轴坐标旋转1度，并且还设置了范围，即沿x轴旋转再-45度到45度之间

functiononDocumentMouseMove(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来实现的：

functionanimate(){
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翻转









正面

背面

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js实现拖动缓动效果

热门推荐

随机推荐