约 5 分钟 · React 16.8+ · React DOM
开始
从安装到手势和进出场动效，共六步。每一步都是一个能运行的小组件。
安装
Animated 没有运行时依赖。React 16.8+ 是 peer 依赖。
包的入口标记了 'use client'。在 Next.js App Router 中，服务端 layout 可以渲染
AnimatedProvider；Hook 和Animated.<tag>请在 Client Component 中使用。npm install @kkwaenggwari/animated编辑器中能解析
@kkwaenggwari/animated的导入。让第一个值动起来
useAnimatedValue(1)在组件的生命周期内持有一个动态数字。把它直接放进style：它会变成 CSS 变量，所以值变化时 React 不会渲染。timing(value, { toValue, duration }).start()让它动起来。中途再按一次，会从当前的透明度开始。正在准备示例…
方块淡出再淡入，中途再按一次会从当前位置反向。
从一个值推导出多个输出
interpolate把值映射为长度、角度或数字。没有缓动时，它会变成同一个变量的精确calc()，所以五条轨道的开销和一条相同。同一个值使用不同的输入范围，就能做出级联效果，而不需要五个独立的动画。
正在准备示例…
按一次，五条轨道级联移动；修改 spread 只会改变范围。
描述目的地
Animated.button渲染的是普通的 button。seed是第一帧，pose是它现在应在的位置，tempo是它怎么过去。如果
pose在途中改变，元素会从屏幕上的当前位置转向，使用弹簧时还会保留速度。正在准备示例…
快速点击卡片，也不会有卡片跳动。
接入输入
input(ref, moveInput(...))把指针坐标写入值。follow(target, source)让一个值以弹簧方式追随另一个值。在
useAnimated工厂函数中声明的一切都归组件所有：组件卸载或依赖变化时，监听器和弹簧都会停止。正在准备示例…
卡片朝指针方向倾斜，指针离开后恢复原位。
为离开添加动画
移除 React 子元素通常会让它立刻消失。
Animated.Keep会保留带 key 的子元素，直到它们的depart姿态播放完毕。wait会等所有离开动画结束后，才渲染新的子元素。正在准备示例…
被关闭的消息会以选定的动效离开，然后才消失。
你已经掌握了整个模型
值、目的地、输入和离开共享相同的控制器、打断规则和清理机制。指南会逐一深入讲解。