原型与动效在产品体验里最容易“看起来简单、做起来费时”。下面这份清单把常用的 Lottie/SVG 动画制作、缓动曲线调试、动效参考与导出工具放在一起，适合在做交互稿、演示视频、落地动效交付时快速选型。
需看协议：Lottie 动画素材库与预览平台，支持搜索、在线预览、颜色/速度调整与导出，适合找现成动效或做交付演示。
工具地址：https://rive.app/
需看协议：偏“交互式动效”的设计与运行时工具，支持状态机与交互逻辑，适合做可点击/可响应的微交互组件。
需看协议：面向 SVG 动画的时间轴编辑器，适合做图标动效、加载动画与简单路径动画，并可导出多种格式用于前端集成。
工具地址：https://www.keyshapeapp.com/
需看协议：专注矢量与 SVG 动画的桌面工具，支持关键帧与路径动画，适合做更精细的矢量动效并导出可用代码/资源。
工具地址：https://www.lottielab.com/
需看协议：在线 Lottie 编辑与组合工具，适合把多个元素拼成可复用的动效组件，并在交付前做尺寸、颜色与节奏的快速微调。
需看协议：偏“动效海报/短视频”的在线动画编辑器，适合快速做产品演示动效、发布动图/视频素材与社媒动效。
工具地址：https://principleformac.com/
需看协议：经典的交互原型与动效设计工具，适合做页面转场、弹层、手势反馈等交互演示，便于跟产品/研发对齐节奏与细节。
需看协议：原型阶段常用的动效能力，适合用“组件变体 + 自动动画”快速模拟交互过渡，减少为了演示而切换工具的成本。
需看协议：在线 CSS 动画生成器，可快速配置进入/退出、强调、加载等动画并生成代码，适合前端落地时做节奏与曲线试验。
工具地址：https://cubic-bezier.com/
免费商用：可视化调试 cubic-bezier 缓动曲线，一边拖拽一边看曲线与效果预览，适合把“手感”变成可复用的参数。
工具地址：https://easings.net/
免费商用：常用缓动曲线速查表，包含多种 ease-in/out 变体与代码示例，适合在设计与开发之间建立同一套“节奏词典”。
工具地址：https://motion.dev/
需看协议：面向 Web 的动画库与文档站点，适合把设计阶段确定的转场与微交互用代码实现，并支持更复杂的手势与时间线控制。
