#@lynx-js/motion

@lynx-js/motion 是一个轻量适配层，直接复用 Motion 的源码，将其命令式 JavaScript API 带到 Lynx。所有 API 都运行在主线程脚本环境中，动画可以立即更新视觉属性，无需经过后台线程中转。如果你在 Web 上用过 Motion 的 animate()、motionValue() 和 spring，在 Lynx 中的用法完全一样。如果你还不熟悉 Motion，可以先阅读 Motion 快速上手指南。

#安装

npm install @lynx-js/motion

yarn add @lynx-js/motion

pnpm add @lynx-js/motion

bun add @lynx-js/motion

deno add npm:@lynx-js/motion

从主包入口导入：

import { animate, motionValue, styleEffect } from '@lynx-js/motion';

#为元素添加动画

animate() 函数接受与 Web 端 Motion 相同的选项，包括 duration、ease、delay、repeat 和 type: 'spring'。完整选项列表见 Motion animate() 参考。

常见用法如下：

1. 使用 useMainThreadRef() 创建主线程元素引用。
2. 通过 main-thread:ref 绑定到元素。
3. 在主线程函数中调用 animate() 启动动画。
4. 将动画控制对象保存在另一个主线程引用中，方便清理时调用 stop()。

#使用弹簧动画

当值需要以弹簧物理效果收敛，而不是按固定时长的缓动曲线变化时，设置 type: 'spring'。Motion 的所有 spring 选项均受支持，包括 stiffness、damping、mass 和 bounce。

#使用 MotionValue

motionValue() 用于保存值，可以直接传给 animate() 做动画，并且可以订阅变化。当多个效果或事件处理函数需要共享同一个动画值时，可以使用它。

#构建手势效果

对于高频触摸输入，应使用 main-thread:bindtouchstart、main-thread:bindtouchmove 和 main-thread:bindtouchend 将事件处理保留在主线程。再结合 MotionValue 和 styleEffect()，从手势状态派生视觉状态。