动效原理 · 做动效的门道
挤压与拉伸Squash & stretch
- 卡通
- 有弹性
- 夸张
运动过程中把元素压扁或拉长,模拟有弹性的物体落地和起跳时的变形。
什么时候用它
插画、吉祥物、游戏化元素用它;图标和文字挤压后辨识度会下降,要谨慎。
参数
on landing scale(1.1, 0.9) · on takeoff scale(0.95, 1.05) · each 120ms ease-out
配方
每一项 120ms ease-out挤压与拉伸 → 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。