Squash & Stretch Easy Animation

0 阅读11分钟

这支和前几支不一样,不是纯 AE 手调 Scale + Anchor Point + Graph Editor
作者这次用的是扩展面板:

Window > Extensions > Squash and Stretch Pro
而且画面里明确提到它有:

  • Free 版本
  • Pro 版本

这套做法的本质是:

选一个预设行为 → 调 Squash & Stretch / Oomph / Timing → 点 Apply → 插件自动给图层生成一套可编辑的变形关键帧。

它更像“自动生成 squash & stretch 形变动画”,不是传统手搓缩放。


一、先说结论:这支视频到底在教什么

它主要教了 4 件事:

  1. 怎么用 Squash and Stretch Pro 直接给形状、文字、图片做弹跳挤压动画
  2. 文字要不要拆成单字
  3. 怎么把多个字按顺序错开
  4. 怎么给图片叠加多个 squash/stretch 行为,并配合 Null 做移动路径

所以这支视频最适合做:

  • 可爱角色弹跳
  • 卡通表情包 / 小 blob
  • 文字弹出
  • kinetic typography
  • 游戏 UI / 按钮反馈
  • 小图标跳动、落地、前冲

二、插件入口和界面结构

作者最开始明确演示了路径:

Window > Extensions > Squash and Stretch Free / Squash and Stretch Pro

他实际用的是:

Squash and Stretch Pro

面板里你能看到这些核心区域:

  • 行为库 / gallery
  • Squash & Stretch
  • Oomph
  • Timing
  • Sounds
  • Apply

还有顶部几个很关键的按钮:

  • behavior gallery
  • separate text
  • stagger layers
  • 行为方向翻转按钮

三、面板里最关键的 4 个参数

这 4 个是整支视频最核心的。

1)Squash & Stretch

默认值画面里清楚出现过:

  • 100%(default)

作者还专门对比过:

  • 100%
  • 180%

作用

它决定形变幅度本身有多大。

规律

  • 数值越低,挤压越克制
  • 数值越高,拉伸和压扁越夸张

视频里的结论

作者明确拿一个方块做对比:

  • 100% 比较正常
  • 180% 夸张很多

2)Oomph

默认值也清楚出现过:

  • 100%(default)

对比里也出现过:

  • 180%

后面图片案例里还能看到:

  • 48%
  • 46%

作用

它更像“冲击感 / 弹性力度 / 夸张程度”。

规律

  • 高:更弹、更冲、更有卡通感
  • 低:更稳、更轻、更自然

经验

  • 可爱卡通:80% ~ 140%
  • 写实一点:30% ~ 70%

3)Timing

视频里出现过两种:

  • Start of Behavior
  • End of Behavior

作用

决定形变重点落在动画的前段还是后段。

你可以这样理解

Start of Behavior

一开始就有明显 squash/stretch,适合:

  • 起跳
  • 突然弹出
  • 前冲
End of Behavior

收尾时压一下,更适合:

  • 落地
  • 砸下
  • drop / flop

4)Sounds

视频里一直是:

  • None

作用

插件应该支持顺带加音效,但教程里没用。


四、最基础演示:先给一个方块做 Jump

作者先不是拿复杂图片,而是拿一个橙色方块做示范。

行为名画面里清楚能看到:

  • Behavior: Jump

参数是:

  • Squash & Stretch = 100%
  • Oomph = 100%
  • Timing = Start of Behavior
  • Sounds = None

然后点:

  • Apply

这个基础案例的意义

就是先让你看清:

  • 100/100 时是什么感觉
  • 180/180 时又是什么感觉

作者后面专门做了并排对比:

左边

  • Squash&Stretch:100%
  • Oomph:100%

右边

  • Squash&Stretch:180%
  • Oomph:180%

所以这支教程不是在讲复杂参数体系,
而是在讲:

“先选行为,再通过这两个滑块控制夸张度。”


五、Apply 之后,插件到底做了什么

这部分视频里拍得很清楚。

当作者把行为应用到图片上后,时间线里展开的不是普通 Scale,而是一个效果:

Squash & Stretch Deform Warp

下面会自动生成一大串点位关键帧,比如:

  • Top Left Vertex
  • Top Right Vertex
  • Bottom Right Vertex
  • Left Bottom Tangent
  • Right Top Tangent
  • 等等

也就是说,这个插件本质上不是帮你改缩放,
而是自动生成一套变形网格关键帧


这意味着什么

你后面修改时,重点不是去碰普通 Scale,而是:

  • 重新用插件生成
  • 或者去改它生成出来的 warp 关键帧
  • 或者叠加新的行为

六、文字案例:文字要不要拆开

这支视频中段专门讲了这个问题。

插件弹窗里明确问:

Should I split the text into individual characters?

屏幕上还明确标了两种选择:

  • separate letters
  • Does not separate text

作者字幕解释也很明确:

  • OK:拆成单字
  • No, don’t split:不拆

什么时候选 OK

选 OK 更适合:

  • 每个字单独弹
  • 做逐字错开
  • 做更有节奏感的字形跳动

这也是作者更推荐的情况,因为弹窗里原话大意就是:

拆开后大概率会更好看。


什么时候选 No

不拆更适合:

  • 整行文字一起弹
  • 想保留整体版式
  • 不想生成一堆字层

七、文字拆开后,作者又用了 Stagger Layers

这是文字部分最重要的一步。

面板顶部有一个按钮,鼠标提示清楚显示:

  • stagger layers

字幕说明也很清楚:

If you push the last layer and apply Stagger Layers, they will be placed sequentially based on the last layer


这句话翻成实操就是:

  1. 先把文字拆成多个单字层
  2. 最后一个字层往后拖到你希望的时间
  3. 点击 Stagger Layers
  4. 插件会以“最后这个字层”为基准,把中间的字层自动均匀排开

这一步的作用

原本所有字是一起动。
加了 Stagger Layers 以后,就会变成:

  • 第 1 个字先动
  • 第 2 个字后一点
  • 第 3 个字再后一点

所以整行字会更有节奏。


八、文字案例最稳的复刻流程

按视频逻辑,你可以直接这样做。

做整行同时弹

  1. 新建文字层

  2. 打开 Squash and Stretch Pro

  3. 选一个行为,比如 Jump

  4. 用:

    • Squash & Stretch = 100
    • Oomph = 100
    • Timing = Start of Behavior
  5. Apply

  6. 在弹窗里点 No, don’t split


做逐字错开弹

  1. 新建文字层
  2. 选行为
  3. Apply
  4. 弹窗里点 OK
  5. 得到多个字层
  6. 把最后一个字层往后拖
  7. Stagger Layers
  8. 插件自动顺排

九、图片案例:同样的方法可以直接用在 PNG / 角色图上

视频后半段作者明确说:

The same method can be applied to images

然后就用一个蓝色小 blob 角色做演示。

这说明插件并不只支持 shape / text,
透明底 PNG 也能直接用。


十、图片案例里出现过的行为

我能从画面里清楚辨认出来的有这些:

  • Jump
  • Drop And Plop 1
  • Jump Forward Multiple

还有一两个名字有点糊,但能确定作者一直在:

  • 从 gallery 里换行为
  • 再点 Apply

十一、图片案例 1:Drop And Plop 1

这个行为的画面最清楚的一帧里,参数是:

  • Behavior = Drop And Plop 1
  • Squash & Stretch = 100%
  • Oomph = 46.0%
  • Timing = End of Behavior
  • Sounds = None

这个组合很有代表性

因为它说明:

  • 不是所有行为都适合 100/100
  • 对“落地类行为”,作者反而把 Oomph 压低到 46%
  • Timing 也切到了 End of Behavior

所以更像:

  • 先掉下去
  • 最后落地压一下
  • 更自然

十二、图片案例 2:Jump Forward Multiple

这个案例更像“连续往前跳”。

画面里清楚能看到:

  • Behavior = Jump Forward Multiple
  • Squash & Stretch = 100%
  • Oomph = 48.0%
  • Timing = Start of Behavior

同时画面里还有一条锯齿形运动路径。


这说明什么

这个行为不只是原地弹,
它会生成一个前进式多次跳跃的动画节奏。

而作者这里把 Oomph 设成 48% ,也是为了别太夸张,
让角色一边跳一边往前走,看起来更稳。


十三、作者还演示了“继续加一段动画”

字幕里明确写了:

You can add animations

时间线里也专门框出后面一段空白区域写着:

  • Add animation

这一步的意思

你不是只能加一次行为。
你可以:

  1. 先给图层套一段行为
  2. 再把播放头放到后面
  3. 再选另一个行为
  4. 再点 Apply

插件就会在后面继续生成第二段 squash/stretch 动画


这对角色图特别有用

比如一个 blob 角色:

  • 前 1 秒:Drop
  • 后 1 秒:Jump Forward
  • 再后面:Jump Out

这样动作会串起来。


十四、作者还用了 Null 来控制整体移动

在图片案例的时间线里,有一帧很清楚:

  • Image 图层的 Parent & Link 指向了 Null 1

这说明作者的做法是:

  • 插件负责形变
  • Null 负责整体位移 / 路径移动

这也是最稳的工作流

因为如果你同时又想:

  • 角色跳起来
  • 又想让它沿路径移动

最省事的做法就是:

图层本体

只负责 Squash and Stretch Pro 的行为

Null

负责 Position 路径

这样不会把形变和整体位移搅在一起。


十五、面板里的方向按钮

插件参数区右上角有两个方向按钮,
其中一个鼠标提示画面里清楚显示:

  • flip behavior horizontally

所以这组按钮就是拿来:

  • 左右翻转行为
  • 上下翻转行为

这很实用

比如一个“向右跳”的行为,
你不想重新找反方向版本,直接点翻转就行。


十六、gallery / bundle 结构

右侧库里能清楚看到这些 bundle:

  • Broadcast Bundle
  • Cartoon Bundle
  • Core Bundle
  • Glitch Bundle

而前面文字和方块的基础演示,主要还是在:

  • Core Bundle

下面能看到的分类有:

  • Highlights
  • In
  • Moves
  • Out
  • Rotations
  • Transitions
  • Wiggles

你可以这样理解

Core Bundle

最基础、最通用

Cartoon Bundle

更卡通、更夸张

Broadcast Bundle

更适合包装 / 栏目感

Glitch Bundle

偏故障 / 扰动

这支视频真正重点演示的还是:

  • Jump
  • Drop And Plop
  • Jump Forward Multiple

所以入门直接从 Core 里的 move / in / out 开始最稳。


十七、这支视频最稳的复刻流程

下面这版最适合你直接照着做。


A. 打开插件

  1. 进入:
    Window > Extensions > Squash and Stretch Pro

B. 做一个基础方块测试

  1. 新建一个小方块

  2. 在 gallery 里选:

    • Jump
  3. 参数先用:

    • Squash & Stretch = 100%
    • Oomph = 100%
    • Timing = Start of Behavior
    • Sounds = None
  4. Apply

  5. 再做第二个方块测试:

    • Squash & Stretch = 180%
    • Oomph = 180%
  6. 对比效果


C. 做文字

  1. 输入一行字
  2. 继续选一个行为,比如 Jump
  3. Apply

整行一起动

  1. 在弹窗里点:
  • No, don’t split

逐字动

  1. 在弹窗里点:
  • OK
  1. 得到多个单字层
  2. 把最后一个字层拖后
  3. 点:
  • Stagger Layers

D. 做图片角色

  1. 导入一张透明底 PNG
  2. 先用:
  • Drop And Plop 1
  1. 参数参考作者:
  • Squash & Stretch = 100%
  • Oomph = 46%
  • Timing = End of Behavior
  1. 再往后加第二段:
  • Jump Forward Multiple
  1. 参数参考作者:
  • Squash & Stretch = 100%
  • Oomph = 48%
  • Timing = Start of Behavior
  1. 如需移动角色:
  • 新建 Null
  • 让 PNG 图层 parent 给 Null
  • Null 负责路径 / 位置
  • 图片层继续保留插件生成的形变关键帧

十八、替换素材时,哪些值要跟着改

这部分最重要。


1)换成文字时

要先决定:

  • 是整行一起弹
  • 还是逐字弹

规律

标题字 / slogan

更适合:

  • 不拆字,整体动
可爱短字 / 拟声词 / kinetic typography

更适合:

  • 拆字
  • Stagger Layers

2)换成图片时

最该改的是:

  • Oomph
  • Timing

规律

圆润、可爱、软的角色
  • Oomph 可以高一点
    例如 60 ~ 120
写实图标 / 产品图
  • Oomph 应该低一点
    例如 20 ~ 60
落地类
  • Timing 更适合 End of Behavior
起跳 / 冲出类
  • Timing 更适合 Start of Behavior

3)素材越大,夸张度通常要越低

原因

大图一旦 squash/stretch 太猛,会显得廉价。

建议

小图标 / 小角色
  • Squash & Stretch = 80 ~ 140
大标题 / 大产品图
  • Squash & Stretch = 40 ~ 100

4)如果画面方向反了

直接用面板右上角的方向按钮:

  • 水平翻转行为
  • 垂直翻转行为

不要第一反应重做。


5)如果你还想让它移动

最稳做法

  • 形变交给插件
  • 位移交给 Null

别把所有位移也压进同一个图层里,后面不好改。


十九、这支视频里最值得直接记住的参数组合

给你一版速抄。


基础 Jump

  • Behavior:Jump
  • Squash & Stretch:100%
  • Oomph:100%
  • Timing:Start of Behavior

夸张 Jump

  • Behavior:Jump
  • Squash & Stretch:180%
  • Oomph:180%

落地型

  • Behavior:Drop And Plop 1
  • Squash & Stretch:100%
  • Oomph:46%
  • Timing:End of Behavior

连续前跳

  • Behavior:Jump Forward Multiple
  • Squash & Stretch:100%
  • Oomph:48%
  • Timing:Start of Behavior

文字处理

  • 拆字:点 OK
  • 不拆:点 No, don’t split
  • 逐字错开:Stagger Layers

二十、这支视频适合配什么 BGM

这支整体气质明显偏:

  • playful
  • bouncy
  • cartoon
  • cute motion design
  • kinetic typography

所以它不适合黑暗奇幻、史诗预告那类 BGM。
更适合下面这些。


方向 1:可爱卡通弹跳感

最贴这支。

英文搜索词:

  • playful cartoon instrumental
  • bouncy animation music
  • cute motion graphics music
  • quirky cartoon beat
  • funny bounce soundtrack

适合

  • 小 blob
  • 弹跳图标
  • 可爱文字
  • 游戏 UI

方向 2:kinetic typography / 轻快包装

如果你拿它做文字包装,这组更合适。

英文搜索词:

  • kinetic typography music
  • upbeat motion design music
  • modern playful promo
  • graphic design intro music
  • fast quirky commercial

适合

  • 片头字
  • 拟声词
  • 宣传语
  • 动感字幕

方向 3:更软萌、更治愈

如果你做的是小角色。

英文搜索词:

  • cute game soundtrack
  • soft playful background music
  • happy chiptune instrumental
  • adorable animation music
  • lighthearted cartoon theme

适合

  • 表情包角色
  • 小动物
  • 游戏角色待机 / 跳动

最稳直接搜的 3 组

1

bouncy animation music

2

playful cartoon instrumental

3

kinetic typography music

这三组和这支视频的气质最贴。