useAnimationControls 提供了一种命令式的方式来控制动画,允许您通过代码精确控制动画何时开始、停止和重置。
useAnimationControls 返回一个具有 start、stop、set 方法的动画控制器。
<script setup lang="ts">
import { useAnimationControls } from 'motion-v'
const controls = useAnimationControls()
</script>
返回的动画控制器可以传递给运动组件的animate属性以控制其动画:
<Motion :animate="controls" />
动画开始,带有过渡效果。接受一个目标状态和可选的过渡配置:
controls.start({ x: 100 })
停止动画。
设置动画直接跳转到目标状态,无过渡效果。