Skip to main content

动画时间

速度的快或慢取决于时间与缓动,相同的距离,时间越短速度则越快,而缓动则是能将同一段时间划分快与慢的区域。

在企业级应用的设计中,动效需要在尽可能短的时间内有效的完成过渡。


时间参数

最快时间: 50ms, 基本时间: 200ms, 较大时间:300ms... 50 的倍增方式。

TokenValueUsage
--motion-duration-short150ms短暂出现和消失的动画效果,如气泡提示、选项卡切换、图标放大缩小等
--motion-duration-short2100ms中等速度的动画效果,如列表滑动、页面转场、按钮点击等
--motion-duration-short3150ms比较明显的动画效果,如进度条填充、图表动画等
--motion-duration-short4200ms中等速度的动画效果,如列表滑动、页面转场、按钮点击等
--motion-duration-medium1250ms长一些的动画效果,如进度条填充、图表动画等
--motion-duration-medium2300ms中等缓慢的动画效果,如图标展开收起、列表滑动等
--motion-duration-medium3350ms缓慢的动画效果,如菜单展开收起、卡片切换等
--motion-duration-medium4400ms中等缓慢的动画效果,如模态框弹出、菜单展开收起等
--motion-duration-long1450ms较长时间的动画效果,如页面切换、图片加载等
--motion-duration-long2500ms中等缓慢的动画效果,如滚动条滑动、进度条填充等
--motion-duration-long3550ms长时间的动画效果,如页面切换、图片加载等
--motion-duration-long4600ms缓慢的动画效果,如菜单展开收起、卡片切换等

短时间

通常用于以实用为主的指示型的过渡场景。

TokenValueUsage
--motion-duration-short150ms短暂出现和消失的动画效果,如气泡提示、选项卡切换、图标放大缩小等
--motion-duration-short2100ms中等速度的动画效果,如列表滑动、页面转场、按钮点击等
--motion-duration-short3150ms比较明显的动画效果,如进度条填充、图表动画等
--motion-duration-short4200ms中等速度的动画效果,如列表滑动、页面转场、按钮点击等

中时间

通常用于差不多超过屏幕中心的过渡场景。

TokenValueUsage
--motion-duration-medium1250ms长一些的动画效果,如进度条填充、图表动画等
--motion-duration-medium2300ms中等缓慢的动画效果,如图标展开收起、列表滑动等
--motion-duration-medium3350ms缓慢的动画效果,如菜单展开收起、卡片切换等
--motion-duration-medium4400ms中等缓慢的动画效果,如模态框弹出、菜单展开收起等

长时间

通常用于强调放松氛围的场景,它们用于相对大型的过渡效果。

TokenValueUsage
--motion-duration-long1450ms较长时间的动画效果,如页面切换、图片加载等
--motion-duration-long2500ms中等缓慢的动画效果,如滚动条滑动、进度条填充等
--motion-duration-long3550ms长时间的动画效果,如页面切换、图片加载等
--motion-duration-long4600ms缓慢的动画效果,如菜单展开收起、卡片切换等