Skip to content

useAnimate

反应式 网页动画 API

¥Reactive Web Animations API.

示例

VueUse useAnimate

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

用法

¥Usage

基本用法

¥Basic Usage

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

¥The useAnimate function will return the animate and its control function.

vue
<script setup lang="ts">
import { 
useAnimate
} from '@vueuse/core'
import {
useTemplateRef
} from 'vue'
const
el
=
useTemplateRef
('el')
const {
isSupported
,
animate
,
// actions
play
,
pause
,
reverse
,
finish
,
cancel
,
// states
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>

自定义关键帧

¥Custom Keyframes

关键帧对象数组、关键帧对象或 ref。详细信息请参见 关键帧格式

¥Either an array of keyframe objects, or a keyframe object, or a ref. See Keyframe Formats for more details.

ts
const 
keyframes
= {
transform
: 'rotate(360deg)' }
// Or const
keyframes
= [
{
transform
: 'rotate(0deg)' },
{
transform
: 'rotate(360deg)' },
] // Or 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)