MotionLang

动效原理 · 做动效的门道

挤压与拉伸Squash & stretch

运动过程中把元素压扁或拉长,模拟有弹性的物体落地和起跳时的变形。

在工具里打开这条

什么时候用它

插画、吉祥物、游戏化元素用它;图标和文字挤压后辨识度会下降,要谨慎。

参数

on landing scale(1.1, 0.9) · on takeoff scale(0.95, 1.05) · each 120ms ease-out

配方

  1. 每一项 120ms ease-out
  2. 挤压与拉伸 → on landing scale(1.1, 0.9) · on takeoff scale(0.95, 1.05)

给 AI 的一句话

给这个吉祥物加挤压拉伸:落地瞬间 scale(1.1, 0.9),起跳时 scale(0.95, 1.05),各 120ms ease-out,之后回到 1。

同类的其他动效