SuperAPI AI 工具集

reverse-engineer-animation

设计与创作

查看项目

更新于 10-16 06:46

技能介绍

用途:测量已存在于录屏中的运动,而非从零设计新动画,也不用于审查或调试动画代码(后者应交给 ui-animation)。流程为抽帧、视觉分析、追踪、拟合、编排标注、生成代码、验证。

依赖:ffmpeg 用于抽帧(brew install ffmpeg);Python 包 pip install opencv-python numpy scipy 用于追踪与曲线拟合。仅有 ffmpeg 时可抽帧并做视觉判断,追踪与拟合需 Python 包。

主要步骤:1) 运行 python3 scripts/extract_frames.py <video> <outdir>,可用 --start 与 --duration 裁剪到过渡片段;用 ffprobe -v 0 -select_streams v -show_entries stream=avg_frame_rate <video> 探测源帧率并匹配 --fps,不要高于源帧率;先看 contact_sheet.png。开合两个方向通常不对称,需分别裁剪并各跑一遍。2) 视觉分析:列出运动元素、效果(位移、缩放、透明度、模糊、圆角、阴影、颜色)与阶段。3) 判断精度:简单淡入或线性滑动可直接读时序;弹性或多属性运动需进入第 4 步。4) 运行 python3 scripts/track_motion.py <outdir> 生成 metrics.json,多元素时用 --bbox X,Y,W,H 限定;再运行 python3 scripts/fit_curves.py <outdir>/metrics.json 得到弹簧参数、cubic-bezier 与拟合误差。若抽帧用了非默认 --fps,需向 fit_curves.py 传相同 --fps(其默认 30,不匹配会使时长与刚度失真)。5) 依据 references/choreography.md 建立时序偏移表。6) 按 references/code-output.md 模板生成目标平台代码(CSS、Motion/Framer Motion、SwiftUI、React Native、UIKit),运动只放在 transform/opacity,开合不同则输出两段过渡,并产出交接规格。7) 验证:重录生成动画并与原片对比接触表,用 DevTools 0.1x 确认阶段顺序与过冲,确认只动画 transform、opacity、filter。

限制与注意:fit_curves.py 默认 --fps 30,抽帧 60 而拟合用默认会使时长翻倍、刚度降至四分之一;高于源帧率采样会产生重复帧并抬高拟合误差;录屏可能丢帧或为可变帧率,连续相同行是重复帧而非停顿;多阶段运动用单一全局曲线拟合误差高,应分段拟合;仅追踪位置会漏掉通常领先约 100 ms 的模糊与透明度变化;开合从不互为镜像,不可反向复用;拟合误差大于 0.08 应视为可疑;不要动画布局属性(width、height、top、left)。