【AE】モーション周期表のSin実践編｜Math.sinで規則的な揺れを作る

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

Sin実践編のゴールは、「規則的に繰り返す揺れを付ける」こと

作業前に準備するもの

サナ

いきなり式を入れる前に、何を用意すればいいですか？

シン

Math.sinも揺らしたいレイヤーのプロパティに入れる式なので、先に「揺らす対象」を1つ作っておきましょう。シェイプでもテキストでも大丈夫ですよ。

Math.sinを入れる前に、コンポジション、揺らす対象、位置プロパティ、Alt＋クリックの場所を確認しておきます。

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

新規コンポジションを作成します。練習用なので、次のような設定で問題ありません。

下準備2：揺らす対象のレイヤーを作る

Math.sinで揺らす対象を1つ用意します。今回は分かりやすいように、シェイプの正円かテキストのどちらかを作ります。

下準備3：式を入れる場所を確認する

「Math.sin」は、レイヤーのプロパティに入力するエクスプレッションの中で使用します。

実践編1：位置にMath.sinを入れて上下に揺らす

サナ

対象は作れました。まずはどんな揺れから作るのがいいですか？

シン

位置を上下に規則的に揺らす「浮遊」から作ってみましょう。Sinらしい動きが一番わかりやすいですよ。

位置プロパティをPキーで開き、ストップウォッチをAlt＋クリックして上下に揺らすMath.sin式を入力し、再生で浮遊を確認します。

手順1：位置プロパティを開く

タイムラインで対象レイヤーを選択し、Pキーを押して位置プロパティを表示します。

手順2：ストップウォッチをAlt＋クリックする

位置の左にあるストップウォッチマークを、Altキー（Mac：Optionキー）を押しながらクリックします。式の入力欄が開き、ストップウォッチが青く点灯します。

手順3：上下に揺らす式を入力する

入力欄に、次の2行の式を入力します。

y = value[1] + Math.sin(time*3)*50;

[value[0], y];

これは「横（X）は元の位置のまま、縦（Y）だけMath.sinで上下に揺らす」という意味です。

手順4：プレビューで揺れを確認する

プレビューを再生して、対象が規則正しく上下に揺れているか確認します。

Q&A：式を入れても揺れない場合

サナ

式を入れたのに、止まったまま動きません……。

シン

まずはストップウォッチが青く点灯しているかとプレビューを再生しているかを確認しましょう。

Q&A：式の入力でエラーが出る場合

サナ

2行の式を入れたら赤い警告が出ました。

シン

1行目のセミコロンと2行目のカギカッコを確認しましょう。配列の書き方でつまずきやすいところです。

実践編2：速さ・大きさで揺れ方を整える

サナ

揺れは出たんですけど、もう少しゆっくり、控えめにしたいです。

シン

time に掛ける数で「速さ」、Math.sin に掛ける数で「大きさ」が変わります。2か所を別々に触ると整えやすいですよ。

サインの揺れは、速さ（timeに掛ける数）と大きさ（Math.sinに掛ける数）を分けて調整すると整えやすくなります。

速さ：「timeに掛ける数」で決める

Math.sin(time*3) の3の部分が速さです。数字を大きくすると、速く往復します。

目安：time*3（約2.1秒で1周期の浮遊に見せやすい設定。2秒で1周期にしたいときは time*Math.PI。10を超えると震えのように速く見えやすくなります）

大きさ：「Math.sinに掛ける数」で決める

Math.sin(time*3)*50 の50の部分が大きさ（振幅）です。位置に入れた場合の単位はピクセル（px）です。

目安：30〜60（1920×1080では自然な浮遊に見せやすい範囲。200を超えると大きく動きすぎる場合があり、5を下回ると素材によっては気づきにくくなります）

Q&A：揺れがカクカクする・なめらかにならない場合

サナ

速くしたら、揺れがカクカクして見えます……。

シン

Math.sin自体は連続的な波なので、カクカク見える場合は、速さの上げすぎ・フレームレート・プレビュー表示の影響を確認してみましょう。

実践編3：振り子・鼓動・円運動に広げる

サナ

上下の浮遊はできました。他の動きにも応用できますか？

シン

はい、3つ紹介しますね。「回転で振り子」「スケールで鼓動」「sinとcosで円運動」です。入れるプロパティと式を少し変えるだけですよ。

回転の振り子、スケールの鼓動、sinとcosの円運動は、入れるプロパティと式を変えるだけで作れます。

応用1：回転で振り子・首振りを作る

R キーで回転を開き、ストップウォッチをAlt＋クリックして次の式を入れます。

value + Math.sin(time*2)*30

これで、元の角度を中心に±30度で左右に振れる振り子になります。回転は数字1つなので、位置のようなカギカッコは要りません。

応用2：スケールで鼓動・脈動を作る

2Dレイヤーのスケールなら、S キーでスケールを開き、ストップウォッチをAlt＋クリックして次の式を入れます。

s = Math.sin(time*4)*10; [value[0]+s, value[1]+s]

※このスケール式は2Dレイヤーを前提にしています。3Dレイヤーのスケールに入れる場合は、Zも含めて [value[0]+s, value[1]+s, value[2]+s] のように返します。

横と縦に同じ量を足すので、規則的に伸び縮みする鼓動のような動きになります。

応用3：sinとcosで円運動を作る

位置に、縦は Math.sin、横は Math.cos を組み合わせると円を描く動きになります。位置のストップウォッチをAlt＋クリックして次の式を入れます。

r = 100;
x = value[0] + Math.cos(time*2)*r;
y = value[1] + Math.sin(time*2)*r;
[x, y]

r が円の半径です（位置に入れる場合はpx単位の目安）。Math.cos は Math.sin と90度ずれた波なので、縦横を組み合わせると円になります。

Q&A：応用の式でエラーや想定外の動きになる場合

サナ

スケールや円運動の式で、うまく動かなかったりエラーが出たりします……。

シン

プロパティの種類とカギカッコの数を確認しましょう。回転は数字1つ、位置・スケールは2つ（配列）です。

仕上げ：複数レイヤーの位相ずらしとモーションブラー

同じMath.sin式のままレイヤーを複製（Ctrl/Cmd＋D）すると、同じタイミングで揺れやすく、不自然に見えることがあります。レイヤーごとにタイミングをずらしたいときは、time に index を足します。

y = value[1] + Math.sin((time + index*0.3)*3)*50;
[value[0], y]

index はレイヤー番号なので、複製したレイヤーごとに計算上の時間が少しずつずれます。この例では index*0.3 によって、レイヤー番号に応じて約0.3秒ずつタイミングをずらしています。

※time + index*0.3 は、レイヤー番号に応じて計算上の時間をずらす書き方です。0.3の数字を大きくすると、レイヤーごとのタイミング差も大きくなります。

速い往復をなめらかに見せたい場合は、レイヤーのモーションブラースイッチをオンにし、コンポジション側のモーションブラーも有効にします。動きの速さや素材によって、ブレ方を確認しながら調整します。

まとめ：Sinは「対象 → プロパティに式 → 速さ/大きさ → 応用」の順番で考える

うまくいかない時の3チェック

ここまでの手順通りに進めても、思った通りに動かない場合は、以下の3点を順番に確認してください。

次に読むおすすめ記事

Sinは、対象を用意し、プロパティに式を入れて、速さ・大きさで整えてから、応用を広げると扱いやすくなります。

基本的な作り方がわかったら、次は関連する表現も確認しておくと、表現の幅が広がりますよ。