用途:该技能提供 Helios 与 Framer Motion 的集成模式,用于在需要 Framer Motion 的物理与过渡效果时,保持与 Helios 逐帧精确同步。
主要能力:Framer Motion 的动画通常基于时间;Helios 基于帧且可拖拽定位。该技能说明如何把 Helios 的帧状态映射为 MotionValues,再用 useTransform 将帧值转换为动画值。示例包括在 60 帧内旋转 360 度,以及在前 30 帧内完成透明度渐入。
使用方式:先确保已具备 useVideoFrame hook(见 examples/react/SKILL.md)。在组件中通过该 hook 获取当前帧,创建 frameMv 这个 MotionValue,并在帧变化时更新它;然后用 useTransform 把帧区间映射为 rotate、opacity 等动画值,并绑定到 motion.div 的 style。高级做法是在 helios.subscribe 回调中直接设置共享 MotionValue,绕过 React 状态,适合层级较深的组件树以提升性能。
适用场景:适用于需要将基于时间的 Framer Motion 动画改造为可逐帧、可拖拽定位的动画,并保持与 Helios 帧同步的前端动画场景。
限制:资料未提供具体的安装命令、依赖版本、兼容性范围或收费信息,相关内容暂未提供。