linear・ease｜なめらかな移動とフェードを作るAEエクスプレッション

開始と終了の時間を指定して、図形や文字を動かしたい。そんなときに使えるのがlinearとeaseです。一定速度の変化と、なめらかな加減速を、同じ書き方で切り替えられます。

AEエクスプレッション集の第5弾は、linearとeaseの違いから、すっと入るカード、ゆっくり現れるタイトルまで。キーフレームを打たず、時間と値を指定して作ります。

この記事で使用したAEプロジェクトを無料ダウンロードできます。ダウンロードは記事の最後から。

まずは完成形：同じ距離・同じ時間で比べる

移動するX位置は280から1000。到着までの時間はどちらも2秒です。linearは途中の速さが一定、easeはゆっくり動き出し、途中で速くなり、最後にゆっくり止まります。easeに変えても、到着時刻は変わりません。

コピーして使える基本コード

上の丸の2D位置には、次の式を入れています。

linear(time, 1, 3, [280, 330], [1000, 330]);

下の丸は、関数名をeaseへ変更。見比べやすいようにY位置も530へ下げています。

ease(time, 1, 3, [280, 530], [1000, 530]);

引数の順番	意味	基本例
1つ目	変化の基準になる値	time：コンポジションの時刻（秒）
2つ目	変化を始める基準値	1秒
3つ目	変化を終える基準値	3秒
4つ目	開始時の出力	［280, 330］または［280, 530］
5つ目	終了時の出力	［1000, 330］または［1000, 530］

位置は [X, Y] の配列、不透明度や回転は数値1つを返します。今回は時間を基準にしていますが、linear・easeはほかの数値範囲の変換にも使える関数です。

開始より前は開始値、終了より後は終了値を返します。今回なら1秒以前はX280、3秒以降はX1000。timeを掛けて進み続ける式と違い、到着後は自動でその値を保ちます。

使う場所と基本の再現手順

項目	今回の条件
制作環境	After Effects 26.5（26.5×89）／macOS／JavaScriptエクスプレッションエンジン
コンポジション	1280×720／30fps／6秒／8bpc
基本例	直径72pxの丸を上下2段に配置
適用先	次元を分割していない2D位置。位置のキーなし
素材・フォント	AEの図形と文字。Hiragino Sans W6／Arial Bold。追加プラグイン・外部素材なし

1. 1280×720・30fps・6秒のコンポジションを作ります。
2. 直径72pxの丸を2つ置き、上の丸を［280, 330］、下を［280, 530］へ配置します。
3. 上の丸の位置を、MacはOption、WindowsはAltを押しながらストップウォッチをクリックして式の入力欄を開きます。
4. 上にはlinear、下にはeaseの基本コードを貼り付けます。
5. 1〜3秒を再生し、動き出し・途中・止まり際を比べます。
6. 開始・終了の時間を変えるときは、2つ目と3つ目の引数を変更します。

エフェクトメニューから追加する機能ではありません。位置などのプロパティへ直接入力します。上のコードは開始値と終了値を式内で決めるため、位置の元の数値を変えるだけでは経路は変わりません。

linearとeaseは、進み方がどう違う？

経過	linear	ease
0秒	0	0
0.5秒（25%）	25	15.625
1秒（50%）	50	50
1.5秒（75%）	75	84.375
2秒	100	100

easeは出だしと止まり際の速度が0になります。中間の50%時点ではlinearと同じ値になるので、違いを見るときは25%・75%あたりや、動画の動き始めと止まり際に注目してください。

一定のペースで増えるメーターや均等な移動にはlinear、カードや文字を柔らかく登場させたいときはeaseが使いやすい出発点です。easeは上下に跳ね返るバウンスや、終点を越えるオーバーシュートを加える関数ではありません。

所要時間を変える：終了時刻だけを調整する

開始時刻を0秒、出力を0→100に固定し、終了時刻だけを0.5・1・2秒へ変えた比較です。どれもeaseで、経過0.25秒の不透明度を見ています。

基本例の1〜3秒は、動く時間が2秒という意味です。3つ目の引数は所要時間ではなく終了時刻なので、1秒開始で0.8秒かけたいなら終了は1.8秒。次の作例では、レイヤー開始からの経過時間に置き換えて書きやすくします。

実践1：カードをなめらかに登場させる

var t = time - inPoint;
ease(t, 0, 0.8, value + [-160, 0], value);

設定	値
対象	02_SLIDE_CARDのEASE_CARD／2D位置
元の位置（到着点）	［640, 392］
開始位置	［480, 392］（到着点から160px左）
レイヤーの表示開始	1秒
所要時間	0.8秒。コンポジションの1.8秒で到着
キー	なし

カードの背景と文字を560×210のプリコンポジションへまとめます。親コンポジションで位置を［640, 392］へ置き、レイヤーの表示開始を1秒にして、上の式を位置へ貼り付けます。

time - inPoint はレイヤーが表示されてからの経過秒です。value を到着点にするので、元の位置を動かせば、入ってくる場所も一緒に変わります。[-160, 0] を [0, 80] にすれば、下から上へ入る形にできます。

この式では到着点がvalueそのものです。完成した式の前へさらにvalueを足すと配置がずれるため、そのまま貼り付けてください。位置の元の値にキーを打つと、到着点も時間で変わります。今回の作例ではキーを使っていません。

実践2：タイトルをゆっくりフェードインさせる

var t = time - inPoint;
ease(t, 0, 1.2, 0, 100);

設定	値
対象	03_FADE_TITLEのEASE_OPACITY／不透明度
レイヤーの表示開始	1秒
開始・終了値	0%→100%
所要時間	1.2秒。コンポジションの2.2秒で100%
位置・キー	位置は固定、不透明度のキーなし

文字レイヤーの不透明度へ式を貼り付けます。位置の作例と違い、出力は配列ではなく0と100という数値です。短く現れるなら1.2を0.5程度へ、ゆっくり見せるなら2程度へ変更してみましょう。

一定ペースのフェードにするなら、ease を linear へ変更します。100から0へ消したい場合は、最後の2つの引数を 100, 0 に入れ替えます。この式は不透明度を直接決めるため、元の不透明度スライダーの値は使いません。

動かない・値がずれるときの確認

症状	確認すること
最初から終点にいる	開始・終了時刻と現在時刻を確認。終了時刻以降は終了値を保ちます
途中から登場すると動きが終わっている	timeはコンポジション時刻。レイヤー開始を基準にするならtime – inPointへ
所要時間のつもりの数値で速さが合わない	2つ目と3つ目は開始と終了の基準値。所要時間はその差です。終了は開始より後にします
linearとeaseが同じに見える	両端と中間50%は同じ値。動画で加減速を比べるか、25%・75%時点を確認
元の位置を変えても動かない	基本コードは座標を式内で指定。配置に追従させたいならカードのvalueを使う形へ
2D位置でエラーになる	開始・終了とも［X, Y］を返す形にします。3Dや次元分割した位置へは、その次元に合わせた変更が必要
終点で跳ねない	easeはなめらかな加減速。バウンスを作りたい場合は別の式が必要

linearとeaseの引数、範囲外での値の保持、easeの開始・終了の速度についてはAdobeのエクスプレッション言語リファレンスでも確認できます。まずは開始・終了の時間と値を揃え、関数名だけを変えると違いがつかみやすくなります。

作例プロジェクトをダウンロード

基本のlinear・ease比較、カード登場、タイトルのフェードインを収録。比較グラフと不透明度比較は採取した値による静止図です。SAMPLE_SOURCEの式を変更しても図は自動更新されません。

項目	内容
版・容量	v1.0／77,048バイト（約75KiB）
内容	編集可能なAEP、expressions.txt、はじめに.txt
制作環境	After Effects 26.5×89／JavaScriptエクスプレッションエンジン
フォント	Hiragino Sans W6／Arial Bold。フォント本体は同梱していません
利用条件	学習・個人制作で利用と改変可。商用利用は個別相談

商用利用はお問い合わせページからご相談ください。ほかの動きはAEエクスプレッション集から探せます。