动效系统让界面(UI)表现更具表达力,同时更易于使用。
一、如何工作
1. 概述
Material 在 M3 Expressive 中引入了动效系统,这套全新的“基于物理逻辑”的系统,让交互与过渡动画显得更加鲜活、顺滑、自然。它为 Google 产品带来了一套全新的动态语言,并且比以往任何时候都更容易实现与自定义。这套物理系统将取代此前“基于缓动(easing)与时长(duration)”的旧系统,可了解更多 M3 Expressive 的内容
2. 基础概念:动效方案
基于物理的动效系统(Motion physics system)内置两种预设的动效方案:表达型(expressive)和标准型(standard)。你所选择的动效方案,会直接决定产品的整体体验气质。虽然产品中的大部分动效都应该保持同一种方案,但在关键时刻,你也可以通过切换动效方案来强化重点场景。
表达型(expressive)是 Material 主张性较强的一套动效方案,适用于绝大多数场景,尤其是“核心展示(hero moments)”与关键交互。
表达型动效方案常使用“超调(overshoot)”的方式,让元素在到达终点后产生轻微回弹,以营造更富生命力的动势。
标准型(standard)动效方案更加功能化、克制,几乎不包含回弹,适合偏工具属性或强调效率的产品。
标准型方案通过纯粹的缓入(ease-in)与缓出(ease-out)方式,让动效顺滑地抵达终点,而不会产生额外的动能表现。
需要超出预设范围的动效方案?那就自定义一套吧!基于物理的动效系统让你能够轻松创建自定义动效方案(custom motion schemes),并仍然可与主题(theming)系统联动。你可以在表达型(expressive)、标准型(standard)或自定义方案(custom)之间自由切换,以适应不同场景。
3. 弹性动效
动效方案(Motion schemes)由弹性动效(springs)来驱动。一个弹性动效由三项关键属性共同构成,它们决定所有动效的行为特征:
- 刚度(stiffness):决定弹性动效的“硬度”。刚度越高,动效收敛(结束)的速度就越快。
- 阻尼(damping):决定回弹衰减的速度。阻尼越大,回弹越快停止。当阻尼值为 1 时,弹性动效的回弹将被完全消除。
- 初始速度(initial velocity):决定弹性动效在开始运动时的起始速度,这个速度会与刚度(stiffness)和阻尼(damping)共同影响整个弹性动效动效的持续时长。
弹性动效模型具有高度通用性,同一套弹性动效参数可以同时用于多种场景,例如页面过渡、按钮动效、手势反馈等。这让整个产品的动效语言保持一致的节奏与气质。
弹性动效模型的动效更自然。弹性动效的行为具有可预测性,与现实世界物体的运动和回弹方式相似。它能无缝处理手势交互、中断恢复、目标重新定位(retargeting)等复杂动效场景。
所有组件动效都由两类动效令牌(motion tokens)驱动:表达型·快速空间(expressive fast spatial),表达型·快速效果(expressive fast effects)
4. 弹性动效令牌
在 Jetpack Compose(Jetpack Compose)和 MDC-Android(MDC-Android)中,这些弹性动效参数以弹性动效令牌(spring tokens)的形式提供。通过这些令牌,你可以轻松为任意界面元素应用动效,让跨平台的动效表现保持可预测、且一致。关于如何将弹性动效(spring)转换到 Web(Web)等其他平台,请参阅规范文档(specs)
弹性动效令牌分为两类:空间移动(spatial)与特效(effects);每类都有三种速度档位:默认(default)、快速(fast)与慢速(slow)。
例如,要应用“快速(fast)·空间(spatial)·表达型(expressive)”动效,你应先调用表达型动效方案(expressive motion scheme),再使用以下令牌:md.sys.motion.spring.fast.spatial。
注意:表达型(expressive)动效方案本身并不会写进令牌名称中。它是在产品层级被统一设定,并作用于所有令牌的。这样,你就可以不修改令牌本身的前提下,自由切换不同的动效方案。

每个动效方案(表达型 expressive、标准型 standard)均包含三种速度(快速 fast、默认 default、慢速 slow)以及两类动效类型(空间 spatial、特效 effects)。
4.1 类型(Style)
空间类弹性动效令牌(spatial spring tokens)用于处理屏幕中“位置与形态变化”相关的动画,例如 X 轴与 Y 轴的移动、旋转、尺寸变化、圆角变化等。空间类弹性动效通常会出现“超调(overshoot)”和“回弹(bounce)”,最终落在目标位置。
空间类弹性动效可用于位置移动(movement)
空间类弹性动效可用于旋转(rotation)
特效类弹性动效令牌(effects spring tokens)用于处理诸如颜色(color)变化、透明度(opacity)变化等属性动画,并且这些动画不应出现超调(overshoot)。








