---
title: "动效"
description: "基于弹簧的动效令牌、短促的状态过渡，以及必须尊重“减弱动态效果”设置的硬性要求。"
url: "https://tanrei.chnotchy.com/zh-cn/foundations/motion/"
last_updated: 2026-10-23T17:33:05.000Z
---

# 动效

> 基于弹簧的动效令牌、短促的状态过渡，以及必须尊重“减弱动态效果”设置的硬性要求。

在 Tanrei 中，动效解释完一次变化，就立刻退场。其中大部分只是一层用 200 到 250 毫秒淡入的状态层。

## 两类运动

动效令牌按两个维度组织成弹簧：

- **空间**（spatial）弹簧负责移动物体或改变其大小。它们可以略微过冲，就像实物停稳前的那一下。
- **效果**（effects）弹簧负责改变颜色和不透明度。它们从不过冲，因为会回弹的颜色看起来像是出了故障。

每一类都分为 **fast**、**default** 和 **slow**。具备真实弹簧动画的平台使用刚度和阻尼值；CSS 则使用与它们一同保存的时长和 cubic-bezier 近似曲线。

共有两套方案。**standard** 是默认方案，接近临界阻尼。**expressive** 是一个附加的层，为想要更多弹性的产品提供。

## 时长与缓动

对于不使用弹簧的过渡，另外提供固定的时长和缓动曲线。

| 变化的种类 | 参考值 |
| --- | --- |
| 状态变化（悬停、按下、选中） | 200–250ms |
| 元素进入 | 300–400ms，界面越大越长 |
| 大范围的展开 | 最长 800ms，各项之间错开 100ms |
| 任何元素离开 | 比进入时更快 |

| 令牌 | 值 | 曲线 |
| --- | --- | --- |
| `--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`

## 不动的东西

- **焦点环立即出现。** 键盘用户需要马上看到自己所在的位置，而不是等一段动画播完。
- **默认没有涟漪。** 按下反馈就是状态层；涟漪是主题层面的可选项，而不是基线。

## 减弱动态效果

每个实现都必须遵循平台的“减弱动态效果”设置。在该设置下，空间上的运动会被移除，或替换为短暂的交叉淡化，并且没有任何循环播放的动画。这是每个组件“完成定义”的一部分，而不是锦上添花。

所有的值都列在[动效令牌参考](https://tanrei.chnotchy.com/zh-cn/tokens/motion/)中。