useAnimationControls

useAnimationControls 提供了一种命令式的方式来控制动画,允许您通过代码精确控制动画何时开始、停止和重置。

useAnimationControls 返回一个具有 startstopset 方法的动画控制器。

<script setup lang="ts">
import { useAnimationControls } from 'motion-v'

const controls = useAnimationControls()
</script>

返回的动画控制器可以传递给运动组件的animate属性以控制其动画:

<Motion :animate="controls" />

基本用法

方法

开始

动画开始,带有过渡效果。接受一个目标状态和可选的过渡配置:

controls.start({ x: 100 })

停止

停止动画。

controls.stop()

设置

设置动画直接跳转到目标状态,无过渡效果。

controls.set({ x: 100 })