useAnimate

类别

Animation

导出体积

1.74 kB

上次更改

6 months ago

响应式的 Web Animations API。

示例

源码 playground (beta)

VueUse useAnimate

startTime: null
currentTime: null
playbackRate: 1
playState: idle
replaceState: active
pending: false

用法

基本用法

useAnimate 函数将返回动画实例及其控制函数。

vue

<script setup lang="ts">
import { useAnimate
 } from '@vueuse/core'
import { useTemplateRef
 } from 'vue'

const el
 = useTemplateRef
('el')
const {
  isSupported
,
  animate
,

  // 动作
  play
,
  pause
,
  reverse
,
  finish
,
  cancel
,

  // 状态
  pending
,
  playState
,
  replaceState
,
  startTime
,
  currentTime
,
  timeline
,
  playbackRate
,
} = useAnimate
(el
, { transform
: 'rotate(360deg)' }, 1000)
</script>

<template>
  <span
 ref
="el
" style
="display:inline-block">useAnimate</span
>
</template>

自定义关键帧

关键帧可以是关键帧对象数组、单个关键帧对象，或者是一个 ref。更多详情请参考关键帧格式。

TypeScript

const keyframes
 = { transform
: 'rotate(360deg)' }
// 或者
const keyframes
 = [
  { transform
: 'rotate(0deg)' },
  { transform
: 'rotate(360deg)' },
]
// 或者
const keyframes
 = ref
([
  { clipPath
: 'circle(20% at 0% 30%)' },
  { clipPath
: 'circle(20% at 50% 80%)' },
  { clipPath
: 'circle(20% at 100% 30%)' },
])

useAnimate
(el
, keyframes
, 1000)

'use strict'
const keyframes = { transform: 'rotate(360deg)' }
// 或者
const keyframes = [
  { transform: 'rotate(0deg)' },
  { transform: 'rotate(360deg)' },
]
// 或者
const keyframes = ref([
  { clipPath: 'circle(20% at 0% 30%)' },
  { clipPath: 'circle(20% at 50% 80%)' },
  { clipPath: 'circle(20% at 100% 30%)' },
])
useAnimate(el, keyframes, 1000)

选项

第三个参数可以是持续时间数字，也可以是包含以下额外属性的选项对象，基于 KeyframeAnimationOptions：

import { useAnimate
 } from '@vueuse/core'

useAnimate
(el, keyframes, {
  duration
: 1000,
  // 是否立即开始播放（默认: true）
  immediate
: true,
  // 是否将结束时的样式状态提交到元素上（默认: false）
  commitStyles
: false,
  // 是否保持动画（默认: false）
  persist
: false,
  // 动画初始化时的回调
  onReady
(animate
) {
    console
.log
('动画已准备好', animate
)
  },
  // 发生错误时的回调
  onError
(e
) {
    console
.error
('动画错误', e
)
  },
})

延迟开始

设置 immediate: false 以防止动画自动启动。

import { useAnimate
 } from '@vueuse/core'

const { play
 } = useAnimate
(el, keyframes, {
  duration
: 1000,
  immediate
: false,
})

// 手动开始动画
play
()

类型声明

显示类型声明

export interface UseAnimateOptions
  extends KeyframeAnimationOptions, ConfigurableWindow {
  /**
   * 当使用 `useAnimate` 时，是否自动运行播放
   *
   * @default true
   */
  immediate
?: boolean
  /**
   * 是否将动画的结束样式状态提交给被动画的元素
   * 通常情况下，你应该使用 `fill` 选项
   *
   * @default false
   */
  commitStyles
?: boolean
  /**
   * 是否持续动画
   *
   * @default false
   */
  persist
?: boolean
  /**
   * 在动画初始化后执行
   */
  onReady
?: (animate
: Animation) => void
  /**
   * 捕获到错误时的回调
   */
  onError
?: (e
: unknown) => void
}
export type UseAnimateKeyframes
 = MaybeRef
<
  Keyframe[] | PropertyIndexedKeyframes | null
>
export interface UseAnimateReturn extends Supportable {
  animate
: ShallowRef
<Animation | undefined>
  play
: () => void
  pause
: () => void
  reverse
: () => void
  finish
: () => void
  cancel
: () => void
  pending
: ComputedRef
<boolean>
  playState
: ComputedRef
<AnimationPlayState
>
  replaceState
: ComputedRef
<AnimationReplaceState
>
  startTime
: WritableComputedRef
<CSSNumberish
 | number | null>
  currentTime
: WritableComputedRef
<CSSNumberish
 | null>
  timeline
: WritableComputedRef
<AnimationTimeline | null>
  playbackRate
: WritableComputedRef
<number>
}
/**
 * 响应式 Web Animations API
 *
 * @see https://vueuse.org/useAnimate
 * @param target
 * @param keyframes
 * @param options
 */
export declare function useAnimate
(
  target
: MaybeComputedElementRef
,
  keyframes
: UseAnimateKeyframes
,
  options
?: number | UseAnimateOptions,
): UseAnimateReturn