JS隨拖拽速度設置傾斜角度的實現(xiàn)代碼

更新時間：2023年09月26日 08:53:02 作者：阿文最開心

這篇文章主要給大家介紹了JS如何隨拖拽速度設置傾斜角度,文中有詳細的代碼講解,對大家的學習或工作有一定的幫助,感興趣的小伙伴可以自己動手嘗試一下

實現(xiàn)

求拖拽速度設置傾斜角度，就是求速度與角度之間的關系。

∵ ( 角度 / 最大角度 ) = ( 速度 / 最大速度 ) * 固定系數(shù)

∴ 角度 = ( 速度 / 最大速度 ) / 最大角度 * 固定系數(shù)

這里的固定系數(shù)其實是旋轉(zhuǎn)系數(shù)，用于調(diào)整旋轉(zhuǎn)幅度。它是一個乘法因子，允許你根據(jù)需要增加或減小旋轉(zhuǎn)的幅度。好處就是自定義旋轉(zhuǎn)幅度，可以在不改變速度和最大旋轉(zhuǎn)角度的情況下，根據(jù)具體場景的需要自定義旋轉(zhuǎn)幅度。

上面的公式非常清楚了，接下來就是編寫 Code 求出速度就行。因為最大速度、最大角度、固定系數(shù)都是固定的。

而計算速度的方式就很簡單了，路程除以時間。

而在拖拽過程中，路程就是兩次觸發(fā)拖拽的時候的差值，時間就直接 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,
  }
}

當拖拽的時候，觸發(fā) calVelocity() ，然后將最新的 newTime 和 newX 賦值給 startTime 和 lastX 就行了。

以上就是核心代碼邏輯，下面有首圖的 ts 代碼，不過使用了 Vue 框架和 VueUse 、VueUse/motion工具類。如果想要跑通，需要配置一下。

// 1. 具有兩個動畫，一個是上下浮動，一個是拖拽的時候會有小幅度旋轉(zhuǎn)
// 2. 拖拽的時候，根據(jù)速度計算旋轉(zhuǎn)幅度，這個時候上下浮動消失
// 3. 拖拽結束后（速度小于一個閾值或者鼠標抬起或者鼠標移動到了外面），旋轉(zhuǎn)幅度取消，上下浮動重新開始
/** ************************設置拖拽和旋轉(zhuǎn)***************************** */
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 {
    // 拖拽結束后，設置旋轉(zhuǎn)角度為 0 ， 恢復上下浮動
    setRotate(0)
    rotationDelta = 0
  }
})
/** **************************************************************** */
/** ************************通過速度計算旋轉(zhuǎn)幅度***************************** */
let lastX = x.value
let startTime = performance.now()
// 當前角度 / 當前速度 = 最大角度 / 最大速度
// 得出：當前角度 = ( 最大角度 / 最大速度 ) * 當前速度
// 然后再乘以一個系數(shù)，用于調(diào)整旋轉(zhuǎn)幅度，角度跟速度的比例
const cfg = {
  maxVelocity: 10, // 最大速度
  maxRotation: 60, // 最大旋轉(zhuǎn)角度
  rotationFactor: 0.8, // 旋轉(zhuǎn)系數(shù)，用于調(diào)整旋轉(zhuǎn)幅度
}
watch(x, () => {
  const { velocity, newX, newTime } = calVelocity(lastX, x.value, startTime)
  const { maxVelocity, maxRotation, rotationFactor } = cfg
  // 速度除以最大速度，將速度歸一化為一個介于 0 和 1 之間的小數(shù)值，表示速度相對于最大速度的比例。
  // 將這個比例值乘以最大旋轉(zhuǎn)角度 maxRotation，這樣就得到了基于速度的旋轉(zhuǎn)角度
  // 但這得出的仍是一個相對值，最后，再將這個相對的旋轉(zhuǎn)角度乘以旋轉(zhuǎn)系數(shù) rotationFactor，以調(diào)整最終的旋轉(zhuǎn)幅度。
  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隨拖拽速度設置傾斜角度的實現(xiàn)代碼的詳細內(nèi)容，更多關于JS設置傾斜角度的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: