AE

【AE】モーション周期表のアニメーションを再現:ラインウエイト(Line Weight)

こちらは、After Effectのモーションをまとめていた「モーション周期表」を自己再現するために、Chat GPTの力を借りつつ再現できた情報を公開しています。

ラインウエイト(Line wight)モーションを再現する

Hiromu
Hiromu
Chat GPT様、Line Weightのモーションを再現したいです
出典:Adobe After Effects(© Adobe Inc.)

 

After Effectのモーション周期表の「Line Weight(ラインウエイト)」は、「線の太さを周期的に変化するアニメーション」です。

作成手順として、「【基本】『キーフレーム』を用いた方法」「【応用】『エクスプレッション』を用いた方法」の2つの提案がありました。

この記事では、初心者でも再現しやすいように、以下の2種類の方法を紹介します。

キーフレームを使って太さを変化させる方法
エクスプレッションで自動ループさせる方法

1.「ラインウエイト」モーションをキーフレームで再現する

「新規コンポジションの作成(名前は判別しやすいように「Line Weight」にします)」からスタートです。(短縮:Ctrlキーもしくはコマンドキー+N)

Chat GPTの回答その1【出典:ChatGPT(GPT-5,OpenAI, 回答日:2025年11月11日)】

①ベースラインを作成する

出典:Adobe After Effects(© Adobe Inc.)

◆画面上部のペンツールを用いて線を作成。

◆「塗り→なし」・「線→単色(5~10pxほどの太さ)」に設定。

◆判別を目的として、シェイプ名を「Line_Weight」に変更。

線の描き方について

クリックで2か所選択すると、線が描けます。

使い慣れていない方ほど、「ドラッグの動作」をしてしまいがちです。

この動作は、図形を変形させる目的でパスの変形を行う場合に使用します。

②線の太さをキーフレームで変える

線幅を開く(タイムライン⇒シェイプ1《Line_Weight》⇒線1⇒線幅《stroke width》)

◆線幅にキーフレームをつける

【参考】

以下の時間でキーフレームをつけることで、1秒間で線幅10~40を繰り返す動きが作れます。

・00:00地点の線幅:10
・00:15地点の線幅:40
・00:29地点の線幅:10

「ラインウエイトのもととなる動作」が完成です。

2.線幅を周期的に変化するように調整する

Chat GPTの回答その2【出典:ChatGPT(GPT-5,OpenAI, 回答日:2025年11月11日)】

①loopOutを使って周期性のある動きを作る

例えば、以下の設定方法でも繰り返しの再現はできます。

・時間ごとに線幅を1つずつキーフレームをつける

・キーフレームを全て指定して、コピー&ペースト(短縮:《コピー》Ctrlキー+C、《ペースト》Ctrlキー+V)で張り付ける。

とはいえ、このアニメーションを10分、20分と繰り返す必要がある場合、さすがに辛いのではないでしょうか。

そこで、Chat GPTが紹介してくれたこちらのエクスプレッションを使って動きを自動化させます。

 

1.線幅(Line Width)のストップウォッチマークAltキーを押しながらクリックします

2.「loopOut(“cycle”)」と入力

◇loopOut(“cycle”)を使う際の注意事項

・あらかじめ設定しているキーフレームの「最初と最後までの時間で指定された動き」を繰り返す
⇒今回の例であれば、線幅のキーフレームを1秒間でそれぞれ10,40,10と指定しているため、この動作が1秒ごとに繰り返さる

・全体のタイムラインの時間指定によっては、中途半端な動きで終わる可能性があるため、逆算して調整することを推奨

・キーフレームが2か所だと線幅の動きが極端になってしまうため、なめらかな動きを再現したいのであれば、3か所以上の設定を推奨

②【応用】より細かい動きでラインウエイトのモーションを行いたい場合

「グラフエディター」を使うことで、より細かな動きを再現できます。

【方法】

タイムラインからグラフエディターのボタンを押すと、グラフに変わります。

・右下にある「イージーイーズ」もしくは「イージーイーズイン」「イージーイーズアウト」を押すことで、グラフの角が丸くなります。

・黄色のレバーを動かすことで、細かな動きの調整ができます。

グラフが現れない場合について
グラフエディターを押しても「直線」しか出ない場合がある
線幅以外の「キーフレームを適用していない場所」を選択している可能性があるので、線幅をクリックする

イージーイーズのボタンが押せない場合について
グラフが選択されているか確認し、押せてなかったらクリックする

◇操作が慣れないうちはイージーイーズに変更するだけでも問題ない
F9が短縮キーになっているので、キーフレームをつけて短縮キーを押すだけでも滑らかな動作が可能

◆エクスプレッションでも再現可能です。

【「線幅」のエクスプレッション欄に以下を入力】

amp = 15;
freq = 1.0;
base = 25;
base + amp * Math.sin(time * freq * Math.PI * 2);

【参考】数値を変更したい場合

amp:変化の幅を指定する場所(太さの増減幅)
例)線幅(baseで指定)を20に指定した場合、「5から35の間」の変化を繰り返します。
base:線の平均の太さ
freq:変化の速さ(1秒間に何回動作を繰り返すか)

※単純動作を繰り返すのではなく、線幅の複雑な変化を繰り返したい場合は、イーズイン・イーズアウトの活用を推奨

以上、ラインウエイト(Line Weight)のモーション説明でした。

こちらのnoteでは、モーション再現時の裏話を載せています。

https://note.com/hy_llama2093/n/nc871ae5266b4

よろしければ一緒にご覧ください。

■P.S.

(2025/11/17)モーション周期表の再現を1日1記事を目標に投稿を続けてまいります。

マイペースの更新にはなりますが、気長にお待ちいただけると幸いです。

Hiromu Yamagata