【AE】モーション周期表のSin｜規則的にくり返す揺れを理解する
✅モーション周期表のSinの動きと基本的な作り方がわかる
✅サイン式の主要パラメータ（速さや大きさ）の読み方がわかる
✅Sinと相性のいい使いどころがわかる
※「Sin」をすぐに実践したい方はこちらをご参考ください。
モーション周期表のSinは「規則的にくり返す揺れ」の動き
- 一定のリズムで、行ったり来たりをなめらかにくり返す
- 揺らしたいプロパティに Math.sin式 を入れて再現する
- 浮遊・振り子風・脈動風など、規則的な往復運動を作れる
モーション周期表では、この動きは 9族「Sin（三角関数）」 として分類され、「Sinはサイン波を利用したなめらかで連続的な動き」として整理されています。
After Effectsでは、「Math.sin()」を使ったエクスプレッションで規則的な揺れを作れ、位置だけでなく、回転や拡大縮小などにも応用できます。
「Math.sin()」は、入力値に応じて−1から＋1までの値を返します。引数に「time」を使うと、その値が時間とともになめらかに変化します。
この値に振れ幅を掛けてプロパティ値に加えることで、上下や左右などに一定のリズムで揺れる動きを作れます。
※同じ9族には、「Random」があり、After Effectsで不規則な揺れを作る代表的な式として「wiggle()」があります。Math.sin()＝規則的なくり返し、wiggle()＝ランダムで不規則な変化、と覚えると使い分けやすくなります。
SinはMath.sin式（エクスプレッション）を使う
数学が苦手なので、ちょっと身構えてしまいます……。
Math.sin式を1行入れるだけで、規則正しい揺れが作れます。
Sinは「プロパティを選ぶ → Alt＋クリックで式を開く → Math.sin式を入力」の3ステップで、規則的な揺れを作れます。
大まかな作り方は、次の流れです。
- 揺らしたいプロパティを決める（位置・回転・スケール・不透明度など）
- そのプロパティのストップウォッチを、WindowsではAltキー、MacではOptionキーを押しながらクリックし、エクスプレッションの入力欄を開く
- 回転や分離したY位置などの1次元プロパティでは、「value + Math.sin(time * 3) * 50」のように、揺れの速さと大きさを入力する
Math.sin()を使うと、往復するキーフレームを何度も設定しなくても、「プロパティの値＋Math.sin()」を組み合わせて、一定の周期で繰り返す往復運動を作れます。
※通常の位置やスケールのように、X・Yなど複数の値を持つプロパティでは、それぞれの値を指定する必要があります。
2秒で1周期にしたい場合は、「Math.sin(time * Math.PI)」とします。
Math.PIは円周率πを表し、値は約3.14です。
Math.sin()では角度をラジアンで扱い、2πラジアン進むと1周期します。
timeは秒単位なので、time * Math.PIでは2秒間で2πラジアン進み、2秒で1周期になります。
Math.PIは、約3.14と考えるとイメージしやすいですが、式にはMath.PIのまま入力するのがおすすめです。
周期を厳密に指定しない場合は、「time*3」のように数字を直接入れ、プレビューを見ながら速さを調整できます。
モーション周期表「Ｓｉｎ」が向いている場面
- ロゴやキャラクターを、ふわふわ上下させたいとき（浮遊・待機モーション）
- 振り子や首振りのような、規則的な往復を作りたいとき（回転に適用）
- 鼓動・脈動のような、伸び縮みのくり返しを作りたいとき（スケールに適用）
- 一定リズムで点滅・明滅させたいとき（不透明度に適用。必要に応じて0〜100％に収める調整を行う）
サイン式の主要パラメータの読み方
どこを操作すれば動きをうまく調整できるでしょうか。
「value + Math.sin(time×速さ)×大きさ」と覚えると、どこを操作すればよいか掴みやすくなりますよ
速さ（timeに掛ける数）と大きさ（Math.sinに掛ける数）の2つを押さえると、サインの揺れは整います。中心は「value」で取得するその時点のプロパティ値が基準になります。
- 速さ（timeに掛ける数）：くり返しの速さを決める。数値の絶対値を大きくするほど、往復する速さが上がります。
- 大きさ（Math.sin()に掛ける数）：どれくらいの幅で揺れるかを決めます。位置ならpx、回転なら度、不透明度やスケールならパーセントポイントとして考えます。
(スケールや位置のような配列プロパティでは、X/Yそれぞれの書き方に注意します） - 中心（先頭の「value」または数値）：揺れの中心になる値。「value」を使うと、その時点のプロパティ値を中心に揺れます。
使用例：分離したY位置に「value + Math.sin(time*3)*50」を入力すると、その時点のY位置を中心に、約2.1秒周期で上下に最大50px揺れます。
※周期表どおり「正確に2秒で1周期にしたい場合」は「time*3」ではなく、「time*Math.PI」を使いましょう。
①「Math.sin」と90度ずれた波を返す「Math.cos」もあります。
valueに対して、横に「Math.cos」、縦に「Math.sin」を同じ大きさ・同じ速さで足すと円を描く動きになります。
横と縦の大きさを変えると、楕円のような動きになります（周期表のOrbitとの組み合わせ応用も可能です）。
②不透明度に使う場合
不透明度に使う場合は、中心値と振れ幅を調整し、値がおおむね0～100の範囲に収まるようにします。
たとえば、中心を50、振れ幅を50にすると、0～100の範囲で明滅する動きが出来上がります。
サイン式を使えるようになると、上記のような使い方もできようになるので、余裕ができたらチャレンジしてみてください。
※実際の操作手順（プロパティへの式の入れ方・具体値・回転やスケールへの応用・円運動）は、実践編で順を追って解説します。
まとめ｜押さえる3つのポイント
① モーション周期表のSinは「規則的にくり返す揺れ」として捉える。ランダムなwiggleとは別軸で、同じ動きをなめらかに往復し続ける
② 作り方は「プロパティ＋Math.sin式」。ストップウォッチをAlt＋クリックし、value + Math.sin(time*3)*50 のように入力する
③ 慣れるまでは2か所（速さ＝timeに掛ける数・大きさ＝Math.sinに掛ける数）だけ触る。この2つでサインの基本的な揺れは整う
次は実践編｜Math.sinで規則的な揺れを作ってみよう
