上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useRafLoop

Tags:
Animation
Pausable

一个 React Hook，帮助在每一帧使用 requestAnimationFrame 运行一个函数。

演示

源码
RAF
Interval

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const controls = useRaf(callback, options)

回调函数 Callback

一个将在每一帧被调用的函数。

export interface UseRafLoopCallbackArgs {
  /**
   * 自上一帧以来所经过的时间
   */
  delta: number
  /**
   * 当前帧的时间戳
   */
  timestamp: DOMHighResTimeStamp
}

export type UseRafLoopCallback = (args: UseRafLoopCallbackArgs) => void

选项 Options

export interface UseRafLoopOptions {
  /**
   * 最大的 fps 限制
   *
   * @defaultValue undefined
   */
  fpsLimit?: number
  /**
   * 是否在挂载时立即开始间隔
   *
   * @defaultValue true
   */
  immediate?: boolean
  /**
   * 是否在间隔开始前立即执行回调
   *
   * @defaultValue false
   */
  immediateCallback?: boolean
}