【AE】モーション周期表のRhythm実践編｜一定のリズムを刻む動きを作る

※Rhythmの基本的な考え方から確認したい方は、理解編をご参考ください。

今回のゴールは「リズミカルに動くモーション」を作ること

モーション周期表「Rhythm」：実践準備

下準備1：コンポジションを作成する

新規コンポジションを作成します。

ここでは、フレームレートが「30fps」であることを確認しておきましょう。

Rhythmでは「何フレームごとに動かすか」を基準にするため、fpsを確認しておくと時間の間隔を決めやすくなります。

下準備2：動かす対象を用意する

リズミカルに動かす対象を用意します。

最初は複雑な素材よりも、動きの変化を確認しやすい対象がおすすめです。

今回は練習用として、円や四角などのシンプルな図形を1つ作ってみましょう。

下準備3：時間の間隔を決める

キーフレームを配置する時間の間隔を決めます。

最初は細かく考えすぎず、10フレームや15フレームなど、確認しやすい間隔から試してみましょう。

実践編1：一定の間隔でキーフレームを置いてみよう

サナ

実践準備できました。

ここから何をすればいいですか？

シン

まずは、決めた間隔に合わせてキーフレームを置いていきましょう。

最初は細かい調整をせず、「一定の間隔で同じ動きを繰り返せているか」を確認してみてください。

手順1：動かしたいプロパティにキーフレームを打つ

まずは、スケールや位置、不透明度など、動かしたいプロパティにキーフレームを打ちます。

今回は、スケールを操作して「小さい→大きい→小さい」となるように変化させてみましょう。

手順2：同じ間隔でキーフレームを繰り返す

1往復ぶんの動きができたら、それを一定の間隔で繰り返します。

最初は1回ぶんのキーフレームをコピー＆ペースト（Ctrl《⌘》+C → Ctrl《⌘》+V）して、同じ間隔で並べてみましょう。

手作業で1つずつ作るよりも、間隔や動きの大きさをそろえやすくなります。

手順3：プレビューでリズムを確認する

キーフレームを並べたら、プレビューで「一定の間隔で規則的に動いているか」を確認しましょう。

Q&A：リズムがバラバラになってしまう

サナ

キーフレームを置いたら、リズムがバラバラに見えてしまいます……

シン

まずはキーフレームの間隔を確認してみましょう。

1回ぶんの動きをコピーして、同じフレーム間隔で並べるとリズムをそろえやすいですよ。

実践編2：間隔・強弱・イージングでリズムを整える

サナ

もう少し動きに変化をつけるにはどうすればいいんだろう……。

もう少し速くしてみたいのだけど……

シン

まずはキーフレームの間隔を変えてみましょう。

そこから変化量やイージングも調整すると、同じ動きでもリズムの印象を変えられますよ。

今回は、実践編1で作った次の動きを基準に調整していきます。

この数値を基準にして、「間隔」「強弱」「イージング」を1つずつ変更してみましょう。

間隔：キーフレームを近づけてリズムを速くする

まずは、キーフレームの数値は変えず、時間だけを変更してみます。

現在は、

0フレーム：80%
5フレーム：110%
10フレーム：80%

となっています。

これを次のように変更してください。

キーフレーム同士の間隔を「5フレーム→3フレーム」に短くすることで、1往復するまでの時間が短くなります。

プレビューして、先ほどより速いリズムになっていることを確認してみましょう。

反対に、ゆっくり動かしたい場合は、次のように間隔を広げます。

強弱：スケールの変化量を変えて動きにアクセントをつける

次は、キーフレームの間隔を元の5フレーム間隔に戻します。

ここでは時間を変えず、スケールの数値だけを変えてみましょう。

まず、すべて同じ強さで動かした場合は次のようになります。

すべて110％まで大きくなるため、規則的ですが同じ強さの動きが続きます。

そこで、4回に1回だけ動きを大きくしてみましょう。

プレビューすると、最初の動きがほかより強調されているはずです。

今回は「120% → 105% → 105% → 105%」として、4回に1回だけ大きな動きを入れています。

キーフレームの間隔が同じでも、変化量に差をつけることでリズムにアクセントを作れます。

BGMに合わせた動きを作る場合は、キックやバスドラムなどリズムの基準にしたい音に大きな変化を合わせる方法もあります。

音楽に合わせる方法は、実践編3で確認していきましょう。

イージング：同じリズムに弾みをつける

最後にイージングを加えてみましょう。

イージングを使わない状態では、キーフレーム間の変化が一定になり、機械的な印象を感じる場合があります。

イージングを加えることで速度に変化が生まれ、同じキーフレーム配置でも弾みや滑らかさを感じやすくなります。

まずは先ほど作ったスケールのキーフレームをすべて選択した状態で、F9キーを押してイージーイーズを適用してください。

Q&A：規則的だけど機械的に見える

サナ

規則的には動いているんですけど、少し機械的に見えます……。

シン

まずは、すべての動きが同じ大きさになっていないか確認してみましょう。

一部の変化量を大きくして強弱をつけたり、イージングを加えたりすると、同じ間隔でも動きの印象を変えられますよ。

実践編3：音楽の拍に合わせてリズムを作る

サナ

音楽に合った動きにするには、どうすればいいですか？

シン

音楽の拍と動きのタイミングを合わせてみましょう。

波形を確認しながら、音が強く鳴る位置と動きのピークをそろえると合わせやすくなりますよ。

特にリズム感に自信がない場合は、波形の山を目安に動きのピークを調整してみましょう。

手順1：音楽レイヤーの波形を表示する

コンポジションに音楽を配置し、音楽レイヤーの波形を表示します。

波形を確認すると、音が大きく鳴っている位置を視覚的に探しやすくなります。

まずは波形を見ながら、リズムの基準にしたい音の位置を探してみましょう。

手順2：拍と動きのピークを合わせる

音のタイミングと動きのピークを合わせます。

スケールを調整する場合は、もっとも大きくなるキーフレームを拍の位置に合わせてみましょう。

音と動きの変化が同じタイミングになることで、一体感を感じやすくなります。

手順3：複数の対象を時間差で動かす

複数の図形を使う場合は、同時に動かすだけでなく、少しずつタイミングをずらしてみる方法もあります。

動き始めるタイミングをずらすことで、波打つような連続したリズムも作れます。

Q&A：音と動きが少しズレて見える

サナ

拍に合わせたつもりなんですけど、音と動きが少しズレて見えます……。

シン

まずは動きのピークが拍の位置に来ているかを確認してみましょう。

それでもズレて感じる場合は、数フレームずつ前後に動かしながら、自然に見える位置を探してみてください。

補足：エクスプレッションを使ってRhythmを繰り返す

ここまでの実践では、キーフレームを並べてリズムを作ってきました。

同じ動きを長時間繰り返したい場合は、エクスプレッションを使って自動的に繰り返す方法もあります。

まずは、今回作った次の3つのキーフレームを使って試してみましょう。

loopOutで作ったリズムを繰り返す

スケールのストップウォッチを、WindowsではAltキー、MacではOptionキーを押しながらクリックします。

表示されたエクスプレッション入力欄に、次の式を入力します。

loopOut("cycle", 0);

これで、10フレームまでに作った「80% → 110% → 80%」の動きが、その後も繰り返されます。

同じリズムを何度もコピー＆ペーストする場合は、loopOutを使うことでキーフレームを増やさずに繰り返せます。

発展：BPMを指定して自動でリズムを作る

さらに、キーフレームを使わずBPMから一定周期の動きを作ることもできます。

例えば、スケールに次のエクスプレッションを入力してみましょう。

bpm = 120;
base = 100;
amp = 15;
freq = bpm / 60;

s = base + Math.cos(time * freq * 2 * Math.PI) * amp;
[s, s];

この式では、スケールが85%〜115%の範囲で周期的に変化します。

BPM120の場合は1秒間に2回の周期になるため、一定のテンポで脈打つような動きを自動で作れます。

モーション周期表「Rhythm」実践編まとめ