useRafFn

分类

动画

导出大小

443 B

上次更改

8 个月前

在每个 requestAnimationFrame 上调用函数。带有暂停和恢复的控制。

演示

源代码演练场 (beta)

帧数: 0

增量: 0ms

FPS 限制: 60

用法

import { useRafFn
 } from '@vueuse/core'
import { shallowRef
 } from 'vue'

const count
 = shallowRef
(0)

const { pause
, resume
 } = useRafFn
(() => {
  count
.value
++
  console
.log
(count
.value
)
})

类型声明

显示类型声明

export interface UseRafFnCallbackArguments {
  /**
   * Time elapsed between this and the last frame.
   */
  delta
: number
  /**
   * Time elapsed since the creation of the web page. See {@link https://mdn.org.cn/en-US/docs/Web/API/DOMHighResTimeStamp#the_time_origin Time origin}.
   */
  timestamp
: DOMHighResTimeStamp

}
export interface UseRafFnOptions extends ConfigurableWindow {
  /**
   * Start the requestAnimationFrame loop immediately on creation
   *
   * @default true
   */
  immediate
?: boolean
  /**
   * The maximum frame per second to execute the function.
   * Set to `undefined` to disable the limit.
   *
   * @default undefined
   */
  fpsLimit
?: MaybeRefOrGetter
<number>
  /**
   * After the requestAnimationFrame loop executed once, it will be automatically stopped.
   *
   * @default false
   */
  once
?: boolean
}
/**
 * Call function on every `requestAnimationFrame`. With controls of pausing and resuming.
 *
 * @see https://vueuse.org.cn/useRafFn
 * @param fn
 * @param options
 */
export declare function useRafFn
(
  fn
: (args
: UseRafFnCallbackArguments) => void,
  options
?: UseRafFnOptions,
): Pausable