useMotionValueEvent
useMotionValueEvent 在 React 组件的整个生命周期中管理 motion 值的事件处理程序。
function Component() { const x = useMotionValue(0) useMotionValueEvent(x, "animationStart", () => { console.log("animation started on x") }) useMotionValueEvent(x, "change", (latest) => { console.log("x changed to", latest) }) return <motion.div style={{ x }} /> }
当组件卸载时，事件处理程序将被安全地清理。
用法
从 Motion 导入
import { useMotionValueEvent } from "motion/react"
要向 motion 值添加事件监听器，请提供值、事件名称和回调
const color = useMotionValue("#00f") useMotionValueEvent(color, "change", (latest) => { console.log(latest) })
可用的事件有
changeanimationStartanimationCompleteanimationCancel
"change" 事件会提供 motion 值的最新值。
高级
useMotionValueEvent 是 motion 值的 on 的辅助函数方法使用 on，你可以随时开始监听事件，例如在事件处理程序中。但请记住在组件卸载时取消订阅。
useEffect(() => { const doSomething = () => {} const unsubX = x.on("change", doSomething) const unsubY = y.on("change", doSomething) return () => { unsubX() unsubY() } }, [x, y])
useMotionValueEvent 在 React 组件的整个生命周期中管理 motion 值的事件处理程序。
function Component() { const x = useMotionValue(0) useMotionValueEvent(x, "animationStart", () => { console.log("animation started on x") }) useMotionValueEvent(x, "change", (latest) => { console.log("x changed to", latest) }) return <motion.div style={{ x }} /> }
当组件卸载时，事件处理程序将被安全地清理。
用法
从 Motion 导入
import { useMotionValueEvent } from "motion/react"
要向 motion 值添加事件监听器，请提供值、事件名称和回调
const color = useMotionValue("#00f") useMotionValueEvent(color, "change", (latest) => { console.log(latest) })
可用的事件有
changeanimationStartanimationCompleteanimationCancel
"change" 事件会提供 motion 值的最新值。
高级
useMotionValueEvent 是 motion 值的 on 的辅助函数方法使用 on，你可以随时开始监听事件，例如在事件处理程序中。但请记住在组件卸载时取消订阅。
useEffect(() => { const doSomething = () => {} const unsubX = x.on("change", doSomething) const unsubY = y.on("change", doSomething) return () => { unsubX() unsubY() } }, [x, y])
useMotionValueEvent 在 React 组件的整个生命周期中管理 motion 值的事件处理程序。
function Component() { const x = useMotionValue(0) useMotionValueEvent(x, "animationStart", () => { console.log("animation started on x") }) useMotionValueEvent(x, "change", (latest) => { console.log("x changed to", latest) }) return <motion.div style={{ x }} /> }
当组件卸载时，事件处理程序将被安全地清理。
用法
从 Motion 导入
import { useMotionValueEvent } from "motion/react"
要向 motion 值添加事件监听器，请提供值、事件名称和回调
const color = useMotionValue("#00f") useMotionValueEvent(color, "change", (latest) => { console.log(latest) })
可用的事件有
changeanimationStartanimationCompleteanimationCancel
"change" 事件会提供 motion 值的最新值。
高级
useMotionValueEvent 是 motion 值的 on 的辅助函数方法使用 on，你可以随时开始监听事件，例如在事件处理程序中。但请记住在组件卸载时取消订阅。
useEffect(() => { const doSomething = () => {} const unsubX = x.on("change", doSomething) const unsubY = y.on("change", doSomething) return () => { unsubX() unsubY() } }, [x, y])
