JS随拖拽速度设置倾斜角度的实现代码
作者：阿文最开心
这篇文章主要给大家介绍了JS如何随拖拽速度设置倾斜角度,文中有详细的代码讲解,对大家的学习或工作有一定的帮助,感兴趣的小伙伴可以自己动手尝试一下
拖拽速度设置倾斜角度
实现
求拖拽速度设置倾斜角度，就是求速度与角度之间的关系。
∵ ( 角度 / 最大角度 ) = ( 速度 / 最大速度 ) * 固定系数
∴ 角度 = ( 速度 / 最大速度 ) / 最大角度 * 固定系数
这里的固定系数其实是旋转系数，用于调整旋转幅度。它是一个乘法因子，允许你根据需要增加或减小旋转的幅度。 好处就是自定义旋转幅度，可以在不改变速度和最大旋转角度的情况下，根据具体场景的需要自定义旋转幅度。
上面的公式非常清楚了，接下来就是编写 Code 求出速度就行。因为最大速度、最大角度、固定系数都是固定的。
而计算速度的方式就很简单了，路程除以时间。
而在拖拽过程中，路程就是两次触发拖拽的时候的差值，时间就直接 performance.now() 。所以计算速度的方法如下：
// eslint-disable-next-line prefer-const
let lastX = x.value
// eslint-disable-next-line prefer-const
let startTime = performance.now()
function calVelocity(lastX: number, currentX: number, lastTime: number, currentTime = performance.now()) {
const distanceX = currentX - lastX
const deltaTime = currentTime - lastTime
return {
velocity: distanceX / deltaTime,
newTime: currentTime,
newX: currentX,
}
}当拖拽的时候，触发 calVelocity() ， 然后将最新的 newTime 和 newX 赋值给 startTime 和 lastX 就行了。
以上就是核心代码逻辑，下面有首图的 ts 代码，不过使用了 Vue 框架和 VueUse 、VueUse/motion工具类。如果想要跑通，需要配置一下。
// 1. 具有两个动画，一个是上下浮动，一个是拖拽的时候会有小幅度旋转
// 2. 拖拽的时候，根据速度计算旋转幅度，这个时候上下浮动消失
// 3. 拖拽结束后（速度小于一个阈值或者鼠标抬起或者鼠标移动到了外面），旋转幅度取消，上下浮动重新开始
/** ************************设置拖拽和旋转***************************** */
const props = defineProps({
initialPosition: {
default: () => ({
x: Math.random() * (window.innerWidth - 400),
y: Math.random() * (window.innerHeight - 160),
}),
},
})
const target = ref<HTMLElement>()
const { apply: waveApply } = useMotion(target, {
initial: { rotate: 0 },
enter: { rotate: 0 },
})
async function setRotate(rotate: number) {
await waveApply({
rotate,
})
}
const { x, style, isDragging } = useDraggable(target, { initialValue: props.initialPosition })
let rotationDelta = 0
watch(isDragging, async () => {
if (isDragging.value) {
// 拖拽的时候，取消上下浮动
}
else {
// 拖拽结束后，设置旋转角度为 0 ， 恢复上下浮动
setRotate(0)
rotationDelta = 0
}
})
/** **************************************************************** */
/** ************************通过速度计算旋转幅度***************************** */
let lastX = x.value
let startTime = performance.now()
// 当前角度 / 当前速度 = 最大角度 / 最大速度
// 得出：当前角度 = ( 最大角度 / 最大速度 ) * 当前速度
// 然后再乘以一个系数，用于调整旋转幅度，角度跟速度的比例
const cfg = {
maxVelocity: 10, // 最大速度
maxRotation: 60, // 最大旋转角度
rotationFactor: 0.8, // 旋转系数，用于调整旋转幅度
}
watch(x, () => {
const { velocity, newX, newTime } = calVelocity(lastX, x.value, startTime)
const { maxVelocity, maxRotation, rotationFactor } = cfg
// 速度除以最大速度，将速度归一化为一个介于 0 和 1 之间的小数值，表示速度相对于最大速度的比例。
// 将这个比例值乘以最大旋转角度 maxRotation，这样就得到了基于速度的旋转角度
// 但这得出的仍是一个相对值，最后，再将这个相对的旋转角度乘以旋转系数 rotationFactor，以调整最终的旋转幅度。
rotationDelta = -(velocity / maxVelocity * maxRotation * rotationFactor)
setRotate(rotationDelta)
lastX = newX
startTime = newTime
})
function calVelocity(lastX: number, currentX: number, lastTime: number, currentTime = performance.now()) {
const distanceX = currentX - lastX
const deltaTime = currentTime - lastTime
return {
velocity: distanceX / deltaTime,
newTime: currentTime,
newX: currentX,
}
}
/** **************************************************************** */以上就是JS随拖拽速度设置倾斜角度的实现代码的详细内容，更多关于JS设置倾斜角度的资料请关注脚本之家其它相关文章！