一、缓动与动效时长的应用
1. 推荐的缓动与动效时长组合
2. 缓动
3. 动效时长
二. 令牌与规范标注
1. 令牌
2. 缓动
3. 动效时长

规范指南

Material3设计规范：缓动与动效时长（Easing and duration）

2026年3月25日

Material Design

谷歌的开源设计系统，用于构建美观、易用的产品。

已累计原创 15 篇文章查看全部

缓动方式与动效时长共同塑造既有响应感又富有表现力的界面动效。

注意：在 Expressive 更新中，组件和界面动效都改为使用运动物理系统（motion physics system），该系统基于“弹簧”（spring）模型。各产品应逐步迁移到这一套新的动效系统上。原有的缓动与时长（easing and duration）体系目前仍用于部分过渡动效（transitions），尚未升级到 GM3 Expressive 的团队也可以继续使用，但这一体系已不再维护和更新。

一、缓动与动效时长的应用

1. 推荐的缓动与动效时长组合

为动效选择合适的缓动方式和时长组合并不容易，作为一个简单的起点，下面这些推荐值可以作为大多数过渡动效的默认配置。

缓动（Easing）	时长（Duration）	过渡类型（Transition type）
强化缓动（Emphasized）	500ms	在屏幕内开始并结束（Begin and end on screen）
强化减速缓动（Emphasized decelerate）	400ms	入场：从屏幕外进入屏幕（Enter the screen）
强化加速缓动（Emphasized accelerate）	200ms	退场：从屏幕内移出到屏幕外（Exit the screen）
标准缓动（Standard）	300ms	在屏幕内开始并结束（Begin and end on screen）
标准减速缓动（Standard decelerate）	250ms	入场：从屏幕外进入屏幕（Enter the screen）
标准加速缓动（Standard accelerate）	200ms	退场：从屏幕内移出到屏幕外（Exit the screen）

2. 缓动

在现实物理世界中，物体不会瞬间开始运动或瞬间停止，相反，它们需要一个过程来逐渐加速和减速。没有缓动的过渡动画会显得生硬、机械、缺乏生命力，而加入缓动的过渡动效则更贴近真实世界，看起来更加自然流畅。

① 带缓动的过渡动效，② 无缓动的过渡动效

相比偏“工具化、功能至上”风格的 M2，M3 的缓动更注重表现力与情绪表达。过渡动效的起步非常干脆利落，但收尾则非常柔和舒缓。与 M2 相比，M3 的动效时长会略微更长一些，这样可以让动画有足够时间自然停下，收尾不会显得突兀或“戛然而止”。

①M2 的缓动与动效时长 ②M3 的缓动与动效时长

2.1 选择合适的缓动组合

为了体现 M3 的整体动效风格，推荐在大多数过渡动效中使用 Emphasized 强化缓动组合。Standard 标准缓动组合 适合用于一些体量较小、偏工具功能型、需要快速完成的过渡动效。对于暂不支持 Emphasized 强化缓动的运行平台（例如 iOS 和 Web），Standard 标准缓动组合也可以作为一套兜底/回退方案使用。

此处的全屏过渡动效使用了强化缓动（Emphasized easing）

在 Web 端，这个文本输入框的过渡动效使用了标准缓动（Standard easing），其简洁的表现形式很符合该组件偏工具属性的定位

2.2 选择合适的缓动类型

缓动类型的选择，取决于过渡动画在“相对于屏幕”如何进出、如何运动。

2.2.1 在屏幕内开始并在屏幕内结束

这类过渡动效通常使用 Emphasized 强化缓动。它会在一开始快速加速，然后缓慢、柔和地收尾，从而强调过渡结束时的状态与停留效果。

这个过渡动效在屏幕内开始、也在屏幕内结束，因此采用了 Emphasized 强化缓动

2.2.2 进入屏幕

这类过渡动效使用 Emphasized decelerate 强化减速缓动。动画一开始就以较高速度运动，随后逐渐减速，最终以柔和的方式停下。

2.2.3 永久性退出屏幕

这类过渡动效使用 Emphasized accelerate 强化加速缓动。动画从静止状态开始，逐渐加速，并在结束时达到最高速度。由于在最高速度时结束，给人的感觉是：这个离场的组件已经“彻底离开”，不再容易被找回。

这个底部抽屉在入场时使用 Emphasized decelerate 强化减速缓动，在永久性退场时使用 Emphasized accelerate 强化加速缓动

2.2.4 临时性退出屏幕

这类过渡动效使用 Emphasized 强化缓动。动画在屏幕外不远处自然停下，让人感觉这个离场的组件随时还能被重新唤回。

这个抽屉在入场和临时退场时，都使用了 Emphasized 强化缓动

3. 动效时长

过渡动效不应该快到让人“闪一下就看不清”，也不能慢到让用户感觉自己在干等动画。合适的动效时长配合恰当的缓动方式，才能让过渡既顺滑流畅，又保持良好的响应感。

✅ 动效时长如果调得刚刚好，动画既干脆利落，又足够清晰易于跟随

❌ 避免把过渡动效的时长压得过短，以至于让人感觉突兀、生硬。

3.1 选择合适的动效时长

动效时长的选择主要基于以下几个考量维度：

3.1.1 过渡区域的尺寸

只影响屏幕小范围区域的过渡，动效时长应该较短。需要跨越屏幕大范围区域的过渡，则可以使用更长的动效时长。根据过渡区域的大小去调整动效时长，可以让整体动效的“速度感”保持前后一致。

这个过渡只作用在较小的界面区域上，因此动效时长被控制在较短的 200ms

这个过渡作用在较大的界面区域上，因此动效时长被设置为相对较长的 500ms

3.1.2 入场动效 vs. 退场动效

用于退出、关闭或收起元素的过渡动效，通常会采用更短的动效时长。退场动效之所以更快，是因为它们本身不需要用户投入太多注意力——用户真正要关注的，是接下来要做的下一步操作。相对地，入场动效或会在屏幕上持续存在的元素，往往会使用更长一些的动效时长。这样可以帮助用户将注意力集中到屏幕上“新出现的内容”上。