跳到正文
UIGrammer
EN 中文

反模式 · 动效 ·

从 scale(0) 开始动画

从 scale(0) 起手指浮层从自身中心凭空放大,而不是从触发它的元素长出来。

症状

菜单、提示气泡、弹层从自身中心的某一点放大展开。

为什么会这样

scale(0) → scale(1) 是各动画库演示里的标准「弹出」效果。而且它在不知道触发器位置时也最容易写出来。

规则

从 0.95–0.98 起手,transform-origin 设在触发器那条边,不要从零开始。

  1. 把 transform-origin 设到最靠近触发器的角或边。
  2. 从 scale(0.96) 配 4-8px 朝触发器方向的位移开始。
  3. 整个进场控制在 200ms 内,让关联感立刻成立。

从 scale(0) 开始动画是什么?

从 scale(0) 长大的下拉菜单,看起来是在半空中凭空生成,与你刚按下的按钮毫无关联。动效应该描述因果之间的关系:面板来自触发器。把 transform-origin 设到触发器的那条边,从一个很小的偏移起手——0.95 配 8px 位移读作「相连」,0 读作「瞬移」。

修复 Prompt

贴在你现有 Prompt 之后,把这类毛病从结果里剥掉。