yAnimationPlayground

推荐默认策略

从 CSS / SVG + Motion 开始，按缺失能力加层。

数据几何加 D3，精密序列加 GSAP，线性设计资产加 Lottie，交互资产加 Rive，高密度二维绘制才加 Canvas；只有空间含义真实存在时才加 Three.js。Remotion 与 HyperFrames 属于视频生产工程，不与网页交互运行时争夺同一个位置。

元素是否需要语义、焦点或文本选择？

需要时优先 DOM / SVG；不要先选 Canvas。

运动由应用状态还是设计资产定义？

应用状态选 Motion；线性资产选 Lottie；资产内多状态选 Rive。

真正困难的是数据几何还是播放过程？

几何交给 D3，过渡再交给 Motion、GSAP 或 Canvas。

是否有数百个以上逐帧变化的图元？

有明确吞吐需求时再进入 Canvas，并先定义帧预算。

信息是否真正依赖相机、透视、光照或深度？

只有空间关系本身有意义时才进入 Three.js；普通二维动效继续留在 DOM、SVG 或 Canvas。

技术在体系中的位置

“产品适配”比抽象的性能排名更重要；渲染成本需要用真实作品测量。

技术	系统位置	最佳任务	所有权	工程负担
CSS + SVG	原生视觉基线	少量状态、装饰、图标与路径	代码 / DOM	低
Motion	React 交互运行时	组件状态、手势、布局与进入退出	代码 / DOM	低至中
GSAP	时间轴编排器	复杂序列、滚动叙事、命令式舞台	代码 / DOM	中
D3	数据与几何工具箱	比例尺、聚合、路径、布局输入	代码 / SVG 或 Canvas	按渲染层决定
Lottie	线性矢量资产运行时	品牌短片、图标、空状态、反馈	设计资产 / JSON	中
Rive	交互矢量状态机	角色、控件、多状态品牌交互	设计资产 / .riv	中至高
Canvas	即时绘制表面	粒子、轨迹、高密度实时图元	代码 / 位图表面	中至高
Three.js	空间 / WebGL 渲染层	3D 场景、相机叙事、模型、材质与空间命中	代码 / GPU 场景图	高
Remotion / HyperFrames	视频输出工程	批量视频、模板化内容与离线渲染	独立视频工程	与网页运行时分离

可访问性

所有操作有原生按钮、标签和键盘路径。
图形之外提供文字洞察或结构化数据后备。
prefers-reduced-motion 下保留信息而非只关闭页面。

性能与生命周期

记录资产体积、帧时间、DPR 与测试设备。
重型运行时按路由或功能动态加载。
销毁实例、取消 rAF、断开 Observer 与事件监听。

资产与团队流程

明确源文件、导出文件和运行时版本的负责人。
把 Rive input、Lottie marker 当作版本化接口。
关键资产自托管并为网络或解析失败准备海报。

最终规则

先定所有权

React 拥有业务状态；运行时只拥有视觉执行。

先分图层

同一作品可以组合技术，但每层只有一个明确负责人。

测量后升级

没有真实瓶颈时，不因“更专业”而换成更重的运行时。

技术

系统位置

最佳任务

所有权

工程负担

CSS + SVG

原生视觉基线

少量状态、装饰、图标与路径

代码 / DOM

低

Motion

React 交互运行时

组件状态、手势、布局与进入退出

代码 / DOM

低至中

GSAP

时间轴编排器

复杂序列、滚动叙事、命令式舞台

代码 / DOM

中

数据与几何工具箱

比例尺、聚合、路径、布局输入

代码 / SVG 或 Canvas

按渲染层决定

Lottie

线性矢量资产运行时

品牌短片、图标、空状态、反馈

设计资产 / JSON

中

Rive

交互矢量状态机

角色、控件、多状态品牌交互

设计资产 / .riv

中至高

Canvas

即时绘制表面

粒子、轨迹、高密度实时图元

代码 / 位图表面

中至高

Three.js

空间 / WebGL 渲染层

3D 场景、相机叙事、模型、材质与空间命中

代码 / GPU 场景图

高

Remotion / HyperFrames

视频输出工程

批量视频、模板化内容与离线渲染

独立视频工程

与网页运行时分离

视觉运行时选型指南

视觉运行时选型指南