NiazMorshed2007/reanimate 动效逆向神技速查
在前端交互开发中，最让人头疼的莫过于在 Dribbble、Linear、Stripe 或 Apple 官网上看到一段惊艳绝伦的微动效：“看着心动，手写崩溃”。多元素交错延迟（Stagger）、弹性物理阻尼（Spring stiffness）、贝塞尔曲线缓动（Cubic-bezier）微小的参数偏差，就会让动效从“丝滑优雅”变成“僵硬迟钝”。
现在，借助 NiazMorshed2007/reanimate 这个专为 Claude Code 打造的神级技能，你只需将那段动效录下来，AI 就能自动完成帧级逆向、参数重构、按你项目的技术栈重写，并自动跑测试录制副本进行逐帧叠图比对，直到 100% 完美对齐！
📌 一、 动效逆向流水线四大步骤
你可以直接提供目标网页的 URL，或者直接扔给它一个 MP4 录屏、GIF 动图或 Lottie JSON。技能底层会调用 Playwright 以高帧率逐帧抽样，锁定动画的起点、高潮点与落定帧。
模型通过分析前后帧的位移（Translate）、缩放（Scale）、透明度（Opacity）和旋转（Rotate）随时间流逝的变化率，拟合出高精度的贝塞尔缓动曲线与弹簧物理力学参数（Mass / Stiffness / Damping）。
不需要引入多余的臃肿依赖！它会识别你项目中已经安装的动效库，自动生成纯 CSS @keyframes、React 的 framer-motion 动画组件，或经典的 gsap.timeline()。
这是最惊艳的闭环环节：Agent 自动把重写后的动效渲染出来并录制副本，与原版逐帧做差值图像对比。如果第 12 帧差了 3 像素，Agent 会自动微调缓动参数，通常跑 2~5 轮即可达到 99% 肉眼不可区分的物理级还原！
💻 二、 一键安装与使用体验
# Claude Code 一键安装 claude skill install NiazMorshed2007/reanimate
调用示例：
"帮我把 demo.mp4 里卡片弹出的动效用 Framer Motion 还原出来，并跑测试对齐帧率""逆向 https://example.com 上的按钮涟漪效果，转成我们项目里的纯 CSS 关键帧"
💡 三、 结语
从“看到好动效只能眼馋”到“直接扒下来、转成代码、逐帧对齐”，reanimate 将前端交互动画的开发周期从数天手工微调缩减到了几分钟自动化跑批，绝对是前端工程师必须收藏的重型武器！