SVG 动画工程师指南

编写直接在浏览器中运行、具备“优质商业宣传片纯享质感”的纯 SVG 代码动画。

美术与设计准则

• 视觉风格：严格采用 Flat Design（扁平化设计）和 Vector Illustration（矢量插画）。拒绝写实，采用精确的几何图形组合表现物体（正圆、胶囊形、平滑贝塞尔曲线）。
• 色彩科学：采用高对比度、中饱和度色系（参考现代 Tech Brand 或马卡龙色）。背景使用柔和的线性渐变（Linear Gradient）营造空间感。
• 视觉层次：明确划分前景（核心角色/运动物件）、中景（运动的地面/地貌）、远景（视差移动背景），构建 2.5D 纵深错觉。

动画法则与物理规律

代码中需体现专业的运动法则与物理自然感：

• 次要动作 (Secondary Action)：衣服、围巾或毛发随主运动飘动。
• 跟随动作 (Overlapping Action)：各关节间通过 animation-delay 设置时间差，避免所有部位同起同落。
• 挤压与拉伸 (Squash & Stretch)：展现质量感与弹性反馈。