• Y AnimationPlayground
研究工作台
  • 实验总览
    • Motion Design System
    • 交互技术选型
    • 视觉运行时选型
示例库
  • 示例总览
  • Three.js 示例
  • Shader 示例
  • 代码视频示例
项目
  • 版本记录
GitHubX (Twitter)

Motion Design System

v0.6 稳定契约

把时间、缓动、弹簧、交错、编排与减少动效策略组织为跨运行时语言。

实时策略控制
一套动作语言,分别适配浏览器交互与确定性视频渲染。
切换策略会立即重算下方原语;“减少动效”保留透明度与最终状态,移除大幅位移和布局运动。
动效偏好
时间档位
7
0–900ms
缓动曲线
5
进入 / 退出分离
弹簧角色
4
反馈 / 空间 / 表达
真实运行时
2
Web + Remotion
组合原语预览
同一套 token 驱动进入、操作反馈与集合编排;点击卡片可感受反馈。
完整运动当前策略:跟随系统
可中断交互
layout 弹簧继承当前状态,新的用户输入不必等待旧动画结束。

可中断目标

12 个新模式

快速连续点击三个状态,观察动画从当前位置重新定向,而不是排队播放。

时间尺度
毫秒是跨 CSS、Motion 与视频帧的源单位,运行时只做确定性换算。
instant
0ms
feedback
120ms
fast
180ms
standard
280ms
deliberate
420ms
expressive
640ms
narrative
900ms
弹簧角色
物理值按用途命名;业务代码无需自行猜测 stiffness 与 damping。
feedback
刚度
500
阻尼
35
质量
0.7
spatial
刚度
340
阻尼
28
质量
0.9
gentle
刚度
220
阻尼
26
质量
1
expressive
刚度
300
阻尼
22
质量
0.8
系统规则
原语只稳定已经出现第二消费者的能力,复杂时间轴与运行时特有逻辑仍留在实验内部。
1

先表达意图,再选择数值

业务组件引用 enter、feedback、layout 等语义,不复制 280ms 或 stiffness 340。

2

中断是默认能力

交互动画必须允许用户在上一段尚未结束时改变目标,弹簧会继承当前速度。

3

减少位移,不删除信息

减少动效时把 transform 替换为短透明度变化,状态、层级与操作结果仍完整保留。

4

跨运行时只共享事实

token 共享毫秒、曲线与物理参数;Motion 和 Remotion 分别负责自己的 API 适配。

减少动效策略
策略控制运动表现,不改变内容可见性、焦点顺序或最终状态。

位移与缩放

改为短透明度过渡,避免大幅视觉旅行。

布局变化

直接到达新位置,不播放共享布局弹簧。

自动播放

默认暂停,等待用户明确请求播放。

装饰循环

移除不承载信息的持续运动。

关键状态

保留完整结果与层级,只去除非必要位移。

当前编排基线:进入 420ms、交错70ms、位移16px;Motion 适配后为0.42 秒。