工具

做交互与动效时值得认识的工具、库和参考

RRive交互动效适合：按钮、图标、引导动效MMotion动画库适合：可打断的弹簧、布局动画

原型与动效设计

5 个
FFramer网站与原型从设计直接发布成网站，交互与滚动效果不写代码也能做。PProtoPie高保真原型用触发器与响应搭逻辑，能调用传感器，适合做真机演示。JJitter动效设计像做设计稿一样做动效，导出视频、GIF 或 Lottie。OOrigami Studio原型Meta 出品的节点式原型工具，适合推敲复杂手势。SSpline3D 设计浏览器里做可交互的 3D 场景，能直接嵌进网页。

代码库

6 个
GGSAP动画库时间线编排能力最强的动画库，ScrollTrigger 是滚动叙事的常用方案。LLottie动画格式把 AE 动画导出为 JSON，在各端原生播放。TTheatre.js动画编辑给代码里的动画配一个可视化时间线编辑器。AAutoAnimate零配置动画一行代码给列表的增删、排序加上过渡。VVaul抽屉组件手感很好的移动端抽屉，带速度判定与边界阻尼。SSonner通知组件堆叠式 Toast 的标杆实现，本站的堆叠通知 Demo 向它致敬。

学习与参考

4 个
aanimations.dev课程系统讲网页动效的课程：缓动、弹簧、手势与性能。eeasing.dev缓动曲线比浏览器默认更有力的缓动曲线合集，复制即用。ccubic-bezier.com曲线调试拖动控制点调贝塞尔曲线，并与标准缓动对比。LLaws of UX设计原则费茨定律、希克定律等交互心理学原则的图解合集。