跳转到内容

设计与体验 · DEFINED TERM

Easing 缓动曲线

决定动画在开始、中间和结束阶段的速度变化。

你可能会这样说“进入时快速响应再平稳停下,退出更短更直接。”

VISUAL EXAMPLE

先看懂它怎么工作

Easing 缓动曲线
层 1选择曲线
层 2把时间映射为进度
层 3更新每帧位置或属性

MECHANISM

运行机制

  1. 选择曲线
  2. 把时间映射为进度
  3. 更新每帧位置或属性

USE WHEN

适合这样用

让移动、缩放和透明度变化更自然

NOT FOR

不要这样理解

所有动画使用夸张弹跳会破坏专业感

TELL YOUR AGENT

可直接发给 Agent

请按“Easing 缓动曲线”的概念处理这个需求:进入时快速响应再平稳停下,退出更短更直接。。先说明实现边界,再给出可检查的结果。

ACCEPTANCE

怎么确认它真的做好了

同类动作曲线一致,无突兀顿挫,快速交互不会等待动画

OFFICIAL SOURCES

官方来源