动态原则总览，用一组共同原则控制动效的意图、节奏、空间和连续性。

README 约束 Skill

Enter

内容从下方轻微上移并放大进入，用于页面、模块和重点信息首次出现。进入完成后保持稳定，不循环漂浮。

In motion

Move

元素沿明确路径重新排列，用于筛选、排序和状态切换。路径只解释状态变化，不制造多余轨迹。

Responsive motion

Motion Tokens

微交互、常规切换和场景进入使用统一时长与缓动参数，设计稿和前端实现直接复用同一组数值。

Micro160ms

Default240ms

Scene360ms

Easingcubic-bezier(0.2, 0.8, 0.2, 1)

这条规范如何写成代码

{
  "brand.motion.duration.micro": {
    "$value": {
      "value": 160,
      "unit": "ms"
    }
  },
  "brand.motion.duration.default": {
    "$value": {
      "value": 240,
      "unit": "ms"
    }
  },
  "brand.motion.duration.scene": {
    "$value": {
      "value": 360,
      "unit": "ms"
    }
  },
  "brand.motion.easing.standard": {
    "$value": [
      0.2,
      0.8,
      0.2,
      1
    ]
  }
}

brand.motion.duration.micro按钮反馈和极小范围变化。

brand.motion.duration.default模块切换和常规进入。

brand.motion.duration.scene较大场景或内容编排进入。

brand.motion.easing.standard默认缓动：快速响应，平稳收尾。

核心原则

每段动效都应有明确目的：引导注意、解释变化、反馈状态或连接叙事。运动方式需要符合对象的视觉重量和品牌性格。

统一关键参数

通过持续时间、缓动、距离、方向和层级建立可复用规则，并在加载、切换、滚动和大型叙事动效之间保持连续感。