---
title: "动效令牌"
description: "按角色划分的时长、时长刻度、按角色划分的缓动曲线、界面从何处出现，以及弹簧。"
url: "https://tanrei.chnotchy.com/zh-cn/tokens/motion/"
last_updated: 2026-10-23T17:33:05.000Z
---

# 动效令牌

> 按角色划分的时长、时长刻度、按角色划分的缓动曲线、界面从何处出现，以及弹簧。

`tanrei.sys.motion` 下的动效令牌。使用指引请阅读[动效](https://tanrei.chnotchy.com/zh-cn/foundations/motion/)。

## 按角色划分的时长

一次变化需要多长时间，取决于动的是什么：状态的变化、选择、改变大小的盒子、原地展开的内容，以及每一种出现又离开的界面，各有自己的角色。组件的时长令牌是其角色的别名，因此一个图层只需一行，就能调整同一角色下所有组件的时长。界面离开时比出现时更快。各角色的时长跟随动效刻度盘。

| 令牌 | 值 | 预览 |
| --- | --- | --- |
| `--tanrei-sys-motion-role-appear-anchored-enter` | 300ms |  |
| `--tanrei-sys-motion-role-appear-anchored-exit` | 250ms |  |
| `--tanrei-sys-motion-role-appear-hint-enter` | 250ms |  |
| `--tanrei-sys-motion-role-appear-hint-exit` | 200ms |  |
| `--tanrei-sys-motion-role-appear-modal-enter` | 350ms |  |
| `--tanrei-sys-motion-role-appear-modal-exit` | 300ms |  |
| `--tanrei-sys-motion-role-appear-sheet-enter` | 400ms |  |
| `--tanrei-sys-motion-role-appear-sheet-exit` | 350ms |  |
| `--tanrei-sys-motion-role-appear-toast-enter` | 350ms |  |
| `--tanrei-sys-motion-role-appear-toast-exit` | 300ms |  |
| `--tanrei-sys-motion-role-disclosure` | 400ms |  |
| `--tanrei-sys-motion-role-feedback` | 450ms |  |
| `--tanrei-sys-motion-role-reduced` | 100ms |  |
| `--tanrei-sys-motion-role-resize-default` | 300ms |  |
| `--tanrei-sys-motion-role-resize-large` | 400ms |  |
| `--tanrei-sys-motion-role-selection-mark` | 250ms |  |
| `--tanrei-sys-motion-role-selection-travel` | 250ms |  |
| `--tanrei-sys-motion-role-show-delay` | 300ms |  |
| `--tanrei-sys-motion-role-state-compact` | 200ms |  |
| `--tanrei-sys-motion-role-state-default` | 250ms |  |
| `--tanrei-sys-motion-role-state-large` | 250ms |  |

生成自 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## 时长

各角色所依据的刻度。

| 令牌 | 值 | 预览 |
| --- | --- | --- |
| `--tanrei-sys-motion-duration-short1` | 50ms |  |
| `--tanrei-sys-motion-duration-press-hold` | 100ms |  |
| `--tanrei-sys-motion-duration-short2` | 100ms |  |
| `--tanrei-sys-motion-duration-stagger` | 100ms |  |
| `--tanrei-sys-motion-duration-short3` | 150ms |  |
| `--tanrei-sys-motion-duration-short4` | 200ms |  |
| `--tanrei-sys-motion-duration-medium1` | 250ms |  |
| `--tanrei-sys-motion-duration-medium2` | 300ms |  |
| `--tanrei-sys-motion-duration-medium3` | 350ms |  |
| `--tanrei-sys-motion-duration-medium4` | 400ms |  |
| `--tanrei-sys-motion-duration-long1` | 450ms |  |
| `--tanrei-sys-motion-duration-long2` | 500ms |  |
| `--tanrei-sys-motion-duration-long3` | 550ms |  |
| `--tanrei-sys-motion-duration-long4` | 600ms |  |
| `--tanrei-sys-motion-duration-extra-long1` | 700ms |  |
| `--tanrei-sys-motion-duration-extra-long2` | 800ms |  |
| `--tanrei-sys-motion-duration-extra-long3` | 900ms |  |
| `--tanrei-sys-motion-duration-extra-long4` | 1000ms |  |

生成自 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## 缓动

缓动曲线，以及组件为变化选择缓动时所依据的四个角色：`enter` 用于出现的界面，`exit` 用于离开的界面，`state` 用于原地的状态变化，`spatial` 用于原地移动或改变大小的东西。每个角色都指向刻度中的一条曲线。

| 令牌 | 值 | 曲线 |
| --- | --- | --- |
| `--tanrei-sys-motion-easing-emphasized-accelerate` | cubic-bezier(0.3, 0, 0.8, 0.15) |  |
| `--tanrei-sys-motion-easing-emphasized-decelerate` | cubic-bezier(0.05, 0.7, 0.1, 1) |  |
| `--tanrei-sys-motion-easing-enter` | cubic-bezier(0.2, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-exit` | cubic-bezier(0.3, 0, 1, 1) |  |
| `--tanrei-sys-motion-easing-linear` | cubic-bezier(0, 0, 1, 1) |  |
| `--tanrei-sys-motion-easing-spatial` | cubic-bezier(0.2, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-standard` | cubic-bezier(0.2, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-standard-accelerate` | cubic-bezier(0.3, 0, 1, 1) |  |
| `--tanrei-sys-motion-easing-standard-decelerate` | cubic-bezier(0, 0, 0, 1) |  |
| `--tanrei-sys-motion-easing-state` | cubic-bezier(0.2, 0, 0, 1) |  |

生成自 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## 界面从何处出现

所有出现的界面——菜单、列表、弹出框、工具提示、对话框、消息条——都从同样的不透明度、缩放、距离和模糊开始，离开时沿同一条路径返回。这些值由一个“类型选择”一并决定；图层可以选择另一种，也可以固定其中某一个值。

`tanrei.sys.behavior.appearance`

How a surface appears and leaves: a menu, a select's or a combobox's list, a popover, a tooltip, a dialog, a snackbar. fade-scale: it fades in and grows from 0.96 of its size toward its origin. fade: it only fades in. fade-slide: it fades in and travels a short way into place (sys.space.space100). blur-slide: it fades in, travels the same way and comes into focus from a 4 px blur. unfold: it fades in and unfolds from its anchored edge, scaled from 0 along the axis that leaves the anchor. The choice sets sys.motion.appear.\*; a layer that pins one of those keeps it whatever the choice. A surface that leaves runs its appearance back. A sheet slides in from its edge under every choice.

fade-scale fade fade-slide blur-slide unfold

fade-scale — 默认值，也是无法绘制该选择的平台所采用的回退

生成自 `tokens/sys/behavior.tokens.json`

| 令牌 | 值 |
| --- | --- |
| `--tanrei-sys-motion-appear-blur` | 0px |
| `--tanrei-sys-motion-appear-distance` | 0px |
| `--tanrei-sys-motion-appear-opacity` | 0 |
| `--tanrei-sys-motion-appear-origin` | anchor |
| `--tanrei-sys-motion-appear-scale` | 0.96 |

生成自 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`

## 弹簧

每个弹簧有四个子令牌。`stiffness` 和 `damping` 用于具备弹簧动画的平台；`duration` 和 `easing` 则是在无法使用弹簧的地方（例如 CSS）采用的近似值。

| 令牌 | stiffness | damping | duration | easing | 曲线 |
| --- | --- | --- | --- | --- | --- |
| `tanrei.sys.motion.spring.expressive.default-effects` | 1600 | 1 | 200ms | cubic-bezier(0.34, 0.8, 0.34, 1) |  |
| `tanrei.sys.motion.spring.expressive.default-spatial` | 380 | 0.8 | 500ms | cubic-bezier(0.38, 1.21, 0.22, 1) |  |
| `tanrei.sys.motion.spring.expressive.fast-effects` | 3800 | 1 | 150ms | cubic-bezier(0.31, 0.94, 0.34, 1) |  |
| `tanrei.sys.motion.spring.expressive.fast-spatial` | 800 | 0.6 | 350ms | cubic-bezier(0.42, 1.67, 0.21, 0.9) |  |
| `tanrei.sys.motion.spring.expressive.slow-effects` | 800 | 1 | 300ms | cubic-bezier(0.34, 0.88, 0.34, 1) |  |
| `tanrei.sys.motion.spring.expressive.slow-spatial` | 200 | 0.8 | 650ms | cubic-bezier(0.39, 1.29, 0.35, 0.98) |  |
| `tanrei.sys.motion.spring.standard.default-effects` | 1600 | 1 | 200ms | cubic-bezier(0.34, 0.8, 0.34, 1) |  |
| `tanrei.sys.motion.spring.standard.default-spatial` | 700 | 0.9 | 500ms | cubic-bezier(0.27, 1.06, 0.18, 1) |  |
| `tanrei.sys.motion.spring.standard.fast-effects` | 3800 | 1 | 150ms | cubic-bezier(0.31, 0.94, 0.34, 1) |  |
| `tanrei.sys.motion.spring.standard.fast-spatial` | 1400 | 0.9 | 350ms | cubic-bezier(0.27, 1.06, 0.18, 1) |  |
| `tanrei.sys.motion.spring.standard.slow-effects` | 800 | 1 | 300ms | cubic-bezier(0.34, 0.88, 0.34, 1) |  |
| `tanrei.sys.motion.spring.standard.slow-spatial` | 300 | 0.9 | 750ms | cubic-bezier(0.27, 1.06, 0.18, 1) |  |

生成自 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`