useAnimationFrame 组合式 API
v2.23+

useAnimationFrame() composable 的作用与原生的 requestAnimationFrame() 类似，但有几处关键差异。它会在你的组件被销毁或被停用（与 keep-alive 相关）时自动“取消”这一帧动画；而且在下一帧到来之前，你还可以覆盖之前登记的那个执行函数。

换句话说，如果你想在下一帧安排一个函数执行，但又可能想在超时发生之前覆盖它、甚至取消它，那么这个 composable 正是为你准备的。

TIP

在 SSR 或 SSG 模式的服务端，登记一帧动画是一个空操作（no-op）。请显式地在组件渲染生命周期之外启动服务端的相关工作，而不要在 setup() 期间创建一个定时器。

在组件之外使用

该 composable 也可以在 setup() 之外调用：在 boot 文件、store 或普通模块中。在那种场景下没有组件会被销毁或停用，因此不会有任何东西自动取消一帧待执行的动画：当你不再需要它运行时，请调用 removeAnimationFrame()。

语法

import { useAnimationFrame } from 'quasar'

setup () {
  const {
    registerAnimationFrame,
    removeAnimationFrame
  } = useAnimationFrame()

  // ...
}

function useAnimationFrame(): {
  registerAnimationFrame(fn: () => void): void
  removeAnimationFrame(): void
}

示例

import { useAnimationFrame } from 'quasar'

setup () {
  const { registerAnimationFrame } = useAnimationFrame()

  function onSomeEvent (param) {
    registerAnimationFrame(() => {
      console.log('param is', param)
    })
  }

  // ...

  // You can call onSomeEvent() multiple
  // times in a row and only the last
  // registered Function will run when it
  // is time for it
}

如果你在同一个组件里需要不止一个 useAnimationFrame()，只需给返回对象里的函数重命名即可：

const {
  registerAnimationFrame: registerFirstAnimationFrame,
  removeAnimationFrame: removeFirstAnimationFrame
} = useAnimationFrame()

const {
  registerAnimationFrame: registerSecondAnimationFrame,
  removeAnimationFrame: removeSecondAnimationFrame
} = useAnimationFrame()

Caught a mistake?Edit this page in browser

useAnimationFrame 组合式 API v2.23+

语法

示例

useAnimationFrame 组合式 API
v2.23+