useRequestAnimationFrame

当使用useRequestAnimationFrame的时候，会立即开始调用window.requestAnimationFrame。传入的函数会接收到两个参数，分别是当前执行进度和一个next函数，当执行next函数时会立即进行下一次window.requestAnimationFrame调用。当动画进度达到100（默认值）时，整个过程结束。也可以在第二个参数中设置finishAt来控制结束时机。

使用

import { useRequestAnimationFrame } from 'beautiful-vue-hooks'

export default {
  setup () {
    const onFinish = useRequestAnimationFrame((progress, next) => {
      // ...
      next() // 执行下一帧动画
    })
  }
}

示例

选项

第二个参数可以传入一个对象作来控制动画行为。选项包括三个字段startAt, increment, finishAt。

WARNING

当finishAt为-1时，动画会无限循环。

动画结束

返回一个函数注册器，注册的回调函数将会在动画结束后调用。