Motion 组件动效
构建富有活力的流光拟态动效体系
动效语言
流光拟态 (Luminous Tactility)
流光拟态 是一种将“光能”与“物理触感”深度结合的视觉语言。
定义： 界面不再是静态的层叠，而是一个对能量（光）高度敏感的物理实体。
核心原则： 实时感应（光随人动）、物理反馈（有压感有回弹）、光影转场（光线指引路径）。
动效原则
动效原则
高 效
Efficient
保持克制，极速响应
保持克制，避免夸张、过度修饰的动画干扰用户，动效不应增加等待成本，而应以最快速度响应操作
聚 焦
Focused
突出重点，指引视线
聚焦于核心内容，通过动效吸引注意力并突出重点。只有当前交互的对象才配拥有最高亮度的光效。
流 畅
Fluid
曲线自然，拒绝生硬
拒绝生硬的线性运动，精细的缓动曲线，60帧的动画，确保状态切换过程连贯，无断层感
真 实
Real
模拟引力，物理质感
打造真实可信的视效，模拟太空中引力的运动规律（惯性、质量、阻尼），赋予组件真实的重力感与环境光感
动效类型
空间感知类
强调 X/Y/Z 轴的变化
物理响应类
强调瞬间的变化
动效属性
速率曲线
加速
ease-in
0.42, 0, 1, 1
标准
ease-in-out
0.42, 0, 0.58, 1
减速
ease-out
0, 0, 0.58, 1
动画时长
短
150 ms
中
300 ms
长
450 ms
空间属性
缩 放
强调Z轴的变化
旋 转
强调方向的变化
透 明
强调物理变化
模 糊
强调深浅变化
移 动
强调X轴变化
跟 踪
强调光的运动
主题适配
Light
Dark
玻璃折射
霓虹灯
反光
自发光
组件实例
Button
速率
ease-in-out
动画时长
150 m/s
空间属性
缩放、跟踪
Input
速率
ease-in-out
动画时长
150 m/s
空间属性
透明、模糊、跟踪
Icon
速率
ease-in-out
动画时长
150 m/s
空间属性
缩放
Select
速率
ease-in-out
动画时长
150 m/s
空间属性
透明、模糊、跟踪
Card
速率
ease-out
动画时长
3D形变触发：150 m/s
点击缩放触发：150 m/s
空间属性
缩放、透明、模糊、旋转、跟踪
Tabs
速率
无具体速率
stiffness（刚度）控制速度damping（阻尼）控制缓动
动画时长
不同移动距离，时长表现不一
空间属性
缩放、移动、跟踪
Tag
速率
ease-in-out
动画时长
2.5s
空间属性
透明、移动
Chips
速率
无具体速率
stiffness（刚度）控制速度damping（阻尼）控制缓动
动画时长
不同移动距离，时长表现不一
空间属性
移动、跟踪
Segmented
速率
无具体速率
stiffness（刚度）控制速度damping（阻尼）控制缓动
动画时长
不同移动距离，时长表现不一
空间属性
缩放、移动