time｜キーフレームなしで回転・移動するAEエクスプレッション

図形を一定の速さで回したい。時計の長針と短針を連動させたい。そんなときは、現在の時間を表す time を使うと、キーフレームなしで動きを作れます。

AEエクスプレッション集の第4弾は、回転の基本から、レーダー風のライン、長針と短針が連動する時計まで。速さを決める数値と、動き始める時間の基準を順に見ていきます。

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

まずは完成形：一定の速さで回転させる

右のラインは、0秒で0度、1秒で60度、2秒で120度。時間に比例して角度が増えます。回転のキーフレームは0個です。

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

value + time * 60;

回転のストップウォッチを、MacはOption、WindowsはAltを押しながらクリック。式の入力欄に貼り付けます。コードはテキストなので、選択してコピーできます。

要素	意味
value	式を適用する前の値。今回の回転は0度
time	コンポジションの現在時刻。単位は秒
60	1秒に増やす角度。今回の速さは60度／秒

time 自体は回転専用の機能ではありません。秒数に数値を掛け、その結果を回転へ渡しているだけです。time * 60; でも回せますが、元の角度を保ちたいときは value + を付けます。たとえば元が30度なら、1秒後は30＋60＝90度になります。

使う場所と再現手順

項目	今回の条件
制作環境	After Effects 26.5（26.5×89）／macOS／JavaScriptエクスプレッションエンジン
コンポジション	1280×720／30fps／6秒／8bpc
基本例	長さ110pxのライン。根元を回転の中心に配置
適用先	2Dレイヤーの「回転」。元の値0度、キーなし
素材・フォント	AE内の図形と文字。Hiragino Sans W6／Arial Bold。追加プラグイン・外部素材なし

1. 1280×720・30fps・6秒のコンポジションを作ります。
2. シェイプレイヤーで上向きのラインを描き、アンカーポイントをラインの根元へ合わせます。
3. 回転を0度にします。通常クリックでキーを打つ必要はありません。
4. 回転のストップウォッチをOption／Alt＋クリックします。
5. value + time * 60; を貼り付けます。
6. 再生して、根元を中心に一定の速さで回ることを確かめます。

エフェクトメニューではなく、動かしたいプロパティに直接入力します。回転する中心がずれている場合は、速さの数値より先にアンカーポイントを確認してください。

速さと方向を変える

基本コードの60を変えるだけで、回転の速さが変わります。下の画像は元の角度を0度に揃えた、同じ1秒時点の比較です。

数値	回り方	1周にかかる時間
30	時計回りにゆっくり	12秒
60	時計回り	6秒
120	時計回りに速く	3秒
-60	反時計回り	6秒
0	元の角度で静止	回転しない

1周の時間は 360 ÷ 速さの絶対値 で求められます。timeは角度を増やし続けますが、360度を超えても見た目はそのまま回転を続けます。途中で停止する指定は、この基本コードには含まれていません。

途中から登場するレイヤーは、時間の基準に注意

timeは「レイヤーが出てから何秒か」ではなく、コンポジションの時刻です。表示開始を1秒へずらしただけでは、回転も0度から始まるとは限りません。

inPoint はレイヤーの表示開始時刻です。time - inPoint とすると、表示開始を0秒として扱えます。レイヤーを途中から登場させる作例では、次の形が使いやすくなります。

実践1：レーダー風の回転ライン

value + (time - inPoint) * 90;

設定	値
対象	02_RADAR_SCAN内のRADAR_ARM／回転
元の回転	0度
レイヤーの表示開始	コンポジションの1秒
速さ	90度／秒（1周4秒）
コンポジション2秒時点	表示開始から1秒なので90度
キー	なし

基本例から変えるのは、速さの60を90へ上げ、timeからinPointを引く点です。配布例では、半径61・122・183pxの円と十字線、点を背景に置き、長さ180pxのラインだけを回しています。

ラインのレイヤー開始を1秒へ移動し、根元を円の中心に合わせて式を入力します。円や点には同じ回転を入れず、ラインだけを動かすとレーダーのような見え方になります。円や点は図形で、検出や追尾をする機能はありません。

実践2：長針と短針が連動する時計

長針が1周すると、短針は30度だけ進む。この比率を式でつなぐと、長針の速さを変えるだけで、短針も正しい割合で動きます。2本を別々にアニメーションさせる手間を減らせる作例です。

文字盤の上向きを0度とし、10時10分から始めます。長針のレイヤー名を MINUTE_HAND、短針を HOUR_HAND にしてください。

長針の「回転」へ貼り付けるコード

60 + (time - inPoint) * 60;

最初の60は10分の角度（10分×6度）。最後の60は1秒あたりの回転角です。長針は6秒で1周するので、時計の1時間分が6秒に短縮されます。実際の時間と同期する時計ではありません。

短針の「回転」へ貼り付けるコード

300 + thisComp.layer("MINUTE_HAND").transform.rotation / 12;

300は10時の基準角（10時間×30度）。そこへ長針の角度を12で割って足します。開始時は300＋60÷12＝305度となり、短針も10と11の間へ少し進んだ位置になります。長針だけの速度変更に、短針が自動で追従します。

コンポジション時刻	長針の回転	短針の回転	時計の時刻
0秒	60度	305度	10:10
3秒	240度	320度	10:40
6秒	420度（見た目は60度）	335度	11:10

設定	値
コンポジション	03_CLOCK_LINKED_HANDS
長針／短針	長さ145px／105px。どちらも上向きの線
位置・回転の軸	どちらも［640, 400］。アンカーポイントは針の根元
レイヤー開始	両方0秒。3Dはオフ、親子付けなし
開始時刻	10:10
速度	長針60度／秒、短針5度／秒
キーフレーム	両方なし

1. 丸い文字盤を作り、中心から上へ伸びる長針と短針を別々のシェイプレイヤーで用意します。
2. 両方のアンカーポイントを根元へ合わせ、同じ文字盤の中心へ置きます。
3. 長針の名前を半角でMINUTE_HAND、短針をHOUR_HANDにします。親子付けはしません。
4. 長針の回転へ1つ目の式、短針の回転へ2つ目の式を入力します。
5. 再生して、長針が1周する間に短針が1目盛り分の30度だけ進むことを確かめます。

時計の進む速さを変えるときは、長針の式の最後の60だけを変更します。たとえば30なら1秒で5分、0.1なら実際の時計と同じ進み方です。短針の式はそのままで連動します。開始時刻の定数は、今回は10時10分用です。

長針の角度を360で折り返さないことが大切です。420度は見た目では60度と同じでも、1周進んだ履歴を持っています。短針へ渡す前に % 360 などで60度へ戻すと、短針も前の時間へ戻ってしまいます。レイヤー名が違うと参照エラーになるため、MINUTE_HANDの表記も揃えてください。

動かない・思った位置から始まらないとき

症状	確認すること
動かない	式が有効か、再生で時刻が進んでいるか、掛ける値が0になっていないかを確認
登場時点ですでに回っている	timeはコンポジション時刻。表示開始から始めるならtime – inPointを使う
元の角度が消える	time * 60だけでは元の角度を含まない。value + time * 60へ変更
中心が大きくずれる	回転の軸となるアンカーポイントを確認
速度が途中で変わる	基本・レーダー例のコードは元の値に時間の変化を足す。元の値にキーがある場合、その動きも加算される
時計の短針で参照エラーになる	長針のレイヤー名をMINUTE_HANDに揃え、同じコンポジション内に置きます
動きがループしない	timeは時間を増やす値。位置の折り返しや往復を自動で作るものではない

時間を使った回転の基本はAdobeのエクスプレッションの基本でも紹介されています。まずは回転なら度／秒、位置ならpx／秒として数値を決めると、狙った速さへ近づけやすくなります。

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

基本の回転、レーダー風ライン、長針と短針が連動する時計、速さと開始時刻の比較を収録しています。各レイヤーの式や数値を編集して試せます。

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

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