SuperAPI AI 工具集

material-design-3-motion

设计与创作

查看项目

更新于 10-16 03:41

技能介绍

用途:该技能用于在界面中实现 Material Design 3(M3)Expressive 动效,使动画更自然、直观,并增强可用性与情感反馈。适合按钮反馈、页面过渡、容器变形、微交互等场景。

主要能力:提供三种动量模式(Expressive 默认、Standard 实用、Legacy 兼容);用弹簧物理参数 stiffness(刚度)、damping(阻尼)、initial velocity(初速度)替代传统时间/缓动曲线;覆盖进入/退出、共享元素、悬停/聚焦/按压/加载、错峰与编排、形状变形等动画类型;给出时长分级(50ms 到 500ms+)与移动端、桌面端、减少动画等上下文的调整建议;提供 CSS 与 Web Animations API 的缓动近似实现。

使用方式:在 CSS 或 JavaScript 中采用提供的缓动曲线与时长,例如 expressive 使用 cubic-bezier(0.05, 0.7, 0.1, 1.0),standard 使用 cubic-bezier(0.2, 0.0, 0, 1.0);可引用 m3 动效 token,如 --md-sys-motion-easing-expressive 与 --md-sys-motion-duration-short1 等;触控反馈可配合 navigator.vibrate 振动 API,容器变形可用 View Transitions API。

限制与注意事项:需遵循 prefers-reduced-motion,减少到 10%-20% 时长或关闭;优先动画 transform 与 opacity,避免频繁改变 width、height、top、left;避免纯装饰性动画与线性缓动;同一场景不要随机混用多种缓动曲线。资料未提供具体平台与版本兼容范围,建议在目标设备上测试。