Motion

教程

Framer

官方文档

JavaScript | 高手之路

全能课

Best

MasterJS

Made By

onUpdate(latest): void

事件每帧最多执行一次，回调参数返回的是最新的 motion value 的值

latest: ResolvedValues

function onUpdate(latest) {
  console.log(latest.x, latest.opacity)
}

<motion.div animate={{ x: 100, opacity: 0 }} onUpdate={onUpdate} />

#

Animation事件

动画相关的事件也是非常常用的，这里主要是两种事件，一种是由 animate 属性相关设置产生的动画效果事件，一种是 layout 动画相关的事件。

onAnimationStart(): void

动画开始时会触发的回调，注意只有通过 animate 属性产生的动画才会触发

function onStart() {
  console.log("Animation started")
}

<motion.div animate={{ x: 100 }} onAnimationStart={onStart} />

onAnimationComplete(definition): void

动画结束时会触发的回调，注意只有通过 animate 属性产生的动画才会触发

definition：就是相关的动画定义数据

function onComplete() {
  console.log("Animation completed")
}

<motion.div
  animate={{ x: 100 }}
  onAnimationComplete={definition => {
    console.log('Completed animating', definition)
  }}
/>

#

Layou Animation事件

onLayoutAnimationStart(): void

组件上的布局动画启动时会触发这个回调

onLayoutAnimationComplete(): void

组件上的布局动画结束时会触发这个回调

上一篇

其他行为与事件

下一篇

基本布局变化

这里开始

介绍

基本动效实现

animate与initial

variants

动画实现逻辑

动画属性设定

三种变化模式

父子元素动画联动

关键帧动画

SVG动画

交互行为与事件

new

实现元素拖拽

拖拽交互控制

其他行为与事件

动画相关事件

布局动效

基本布局变化

高级布局变化

排序变化

元素退出效果

MotionValue

其他

GSAP 中文文档教程

React-Three-Fiber 中文文档