アニメーション・キーフレーム
3 つのレベルで動きを制御。キーフレーム (時間の離散点) / タイムリマップ (レイヤーの再生速度) / エクスプレッション (JavaScript 風の式)。
キーフレーム
プロパティパネルで任意の値を入力し、隣にある ◆ ボタン (Toggle Keyframe) をクリックすると、現在時刻でその値のキーフレームが打たれます。タイムライン上に ◆ マーカーが現れ、ドラッグで移動できます。
補間モード
2 つのキーフレームの間は自動で補間されます。キーフレーム横の ↗ (Edit Easing) でイージングエディタが開き、以下のカーブを選べます:
- Linear — 線形
- Ease In / Out / In-Out — 二次 / 三次イージング
- Hold — 次のキーフレームまで値を維持 (階段状)
- Step — 離散 (アニメ調)
プリセット
Presets タブから 11 種類のプリセット (Easing: Apple Default / Material Easing / Snappy Out / Subtle In、Effect: Vibrant Bloom / Cinematic Bloom / Heavy Blur / Soft Focus、Animation: Pop In / Slide Up / Bounce In) を 1 クリックで適用可能。
タイムリマップ
レイヤー単位の再生速度を変更します。Presets タブ → Time Remap ボタンでモーダルが開き、グラフエディタでキーフレームを打って時間 → 速度のマッピングを定義。
- 1.0 = 等速
- 0.5 = スローモーション半分
- 2.0 = 倍速
- 負値で逆再生 (時間軸を遡る)
レイヤーの time_remap 配列は { time, value } ペアのリスト。補間は線形。
エクスプレッション
プロパティに JavaScript 風の式を直接記述して動的に値を計算します。Expressions タブから対象プロパティを選び、テキストエリアに式を入力します。
使用可能な変数
| 変数 | 意味 |
|---|---|
time | コンポジションの現在時刻 (秒) |
layer | 対象レイヤーのデータ |
comp | 所属コンポジション |
propertyName | 対象プロパティ名 ("position_x" など) |
staticValue | キーフレーム未設定時のデフォルト値 |
index | Cloner 内インスタンスのインデックス |
サンプル
// サイン波で上下に揺らす
Math.sin(time * 4) * 30
// 時間で位置を回転させる (周回)
[Math.cos(time) * 200, Math.sin(time) * 200]
// Cloner のインデックスで色相をずらす
(index / count) * 360ピックウィップ
式入力欄の ◑ をクリックすると、他レイヤーのプロパティをドラッグ&ドロップで参照できます。式の実行時にそのプロパティの現在値が使われます。Esc でキャンセル。
window.app.exprErrors を確認できます。
スクリプトコンソール
Ctrl+` で開く JavaScript コンソール。プロジェクト全体にアクセス可能で、リアルタイムに値を変更できます。
// すべてのレイヤーの不透明度を 50% に
app.project.compositions[0].layers.forEach(l => l.opacity = 50);
// 選択中のレイヤーを取得
const sel = app.comps[0].layers.find(l => l.id === app.selectedLayerId);
// 任意プロパティをリニア補間でアニメーション
for (let t = 0; t <= 3; t += 0.5) {
// (内部 API — 実用的には UI からキーフレームを打つ方が楽)
}コンソールは window.app で App インスタンス、app.project でプロジェクトデータにアクセスできます。データ仕様 を参照。