キーフレームエディタ

キーフレームを使用して、複雑で正確なアニメーションを作成します.

の特長 の特長 を示すタイムライン パネル

キーフレームとは?

Keyframe は特定のプロパティ値を特定のポイントで定義します。 PinePaperは、キーフレーム間で自動的にアニメーション化し、スムーズな移行を実現します.

タイムラインを開く

タイムラインパネルは画面の下部にあります。 隠されていれば:

1. メニューの[View]をクリックします
2. 選択 タイムラインを表示

キーフレームの作成

方法1:プロパティパネル

1. アイテムを選択
2. プレイヘッドを目的の時間に設定する
3. プロパティを変更(位置、スケール、不透明度、色)
4. キーフレームは自動的に作成されます

方法2:タイムラインパネル

1. アイテムを選択
2. 希望時刻のタイムラインをクリックします
3. キーフレームを追加をクリックするか、Kを押します

重要なプロパティ

キーフレームの編集

キーフレームの移動

タイムラインの左右にキーフレームをドラッグして時間を変更します.

値の編集

1. キーフレームをクリックして選択します
2. プロパティパネルで値を変更する
3. 変更は、そのキーフレームに適用されます

キーフレームの削除

1. キーフレームを選択
2. プレスDeleteまたは右クリック→キーフレームの削除

イーシング機能

キーフレーム間のアニメーションの加速を制御する:

プレイバックコントロール

トリムとスプリット

各キーフレームアニメーション項目はドラッグ可能なクリップブロック(キーフレームのダイヤモンドの後ろにあるインディゴバー)としてタイムラインに表示されます。 クリップブロックでは、次のようになります

• 体をドラッグ — キャンバス時間(timeOffset)でアニメーション全体をシフトします.
• 左端をドラッグ — 再生されたサブレンジの開始をトリムします。 棒の右端は、Premiere/Canvaの条約に一致して固定されています.
• 右端をドラッグ — 再生されたサブレンジの端をトリムし、最後のキーフレームの時刻に固定します.
• **クリップ内のプレイヘッドでS**を押します。再生ヘッドに分割します。 新しい作品は、独自のレジストリエントリになります。 チェーン分割は、N+1独立した作品を生み出します.

データフィールド

クリップブロック UI は、項目のフィールドにマップします

クリップのキャンバスウィンドウの外では、アイテムはvisible=falseを介して隠されています。オパシティは単独で残っているので、オパシティアニメーションキーフレームはまだウィンドウ内で動作します.

// Programmatic equivalent of right-edge trim.
const item = app.create('text', {
  content: 'Reveal', x: 400, y: 300,
  animationType: 'keyframe',
  timeOffset: 2,        // clip starts at canvas time 2s
  clipInPoint: 1,       // skip the first 1s of keyframe data
  clipOutPoint: 4,      // stop at 4s of keyframe data → 3s clip window
  keyframes: [
    { time: 0, properties: { opacity: 0 } },
    { time: 1, properties: { opacity: 1 } },
    { time: 4, properties: { opacity: 0.3 } },
  ],
});

スプリットがあなたに与えるもの

スプリットは深いコピーです。 Paper.js項目はItem.clone() (保存は+様式を変形させます);キーフレームの配列(keyframes、contentKeyframes、propertyEasings)はJSONの往復です従って各部分はデータを所有します。 チェーンの分割は線形にスケールをスケールします: N は ⇒ N+1 の独立した部分を、それぞれ自身のレジストリの記入項目分けます。 実用的な結果:

• ワンピース easing — 1 つのキーフレームの easing を 1 つの部分に変えて下さい; 他は無接触です.
• ワンピースカラーまたは値インターポレーション — キーフレームのfillColor、strokeColor、またはそのウィンドウ上の異なる変換を適用するために、任意のアニメーションプロパティを編集します。 既存の色および勾配のインターポレータは変更されるHSL/RGBのlerpを扱います.
• 1ピースの空間パス — spatialHandles は個々のキーフレームの中に住んでいます。そのため、1 ピースのアニメーションのパスを曲線にすることは、他の人に影響を与えません.

キャンバスウィンドウがオーバーラップされていない限り、ピースは視覚的にオーバーラップしません。 任意の部分を新しいキャンバス時間の位置にドラッグし、再びそれをトリムするか、さらに分割します.

例:アニメーションのフェード

1. テキスト項目を選択
2. 時 0s: 0 に Opacity を置く
3. 1秒でオパシティを1に設定
4. Ease Out にリースを設定する
5. プレスプレイをプレビュー

例:カラートランジション

1. アイテムを選択
2. 時間 0s: #FF0000 に色を塗ります(赤)
3. 2秒で: #0000FF (青) に色を塗ります
4. スペクトルを通して色を滑らかに推移

例:カメラパン効果

キャンバスをビューポートとして使用して、大きな画像を渡るシネマティックなパンアニメーションを作成します.

仕組み

キャンバスよりも大きい画像がある場合:

• canvas bounds カメラビューポートとして動作
• 写真左に移動 = カメラパン右
• 画像アップ = カメラパンを移動

パンアニメーションの作成

1. キャンバスサイズを設定 ご希望の出力(HDビデオの場合は1920×1080)
2. 大きなイメージをインポート(キャンバスよりも大きい)
3. 画像のPosition なので、開始画面が表示されます
4. キーフレームを作成 画像位置を移動する

Row-by-Rowスキャンパターン

Serpentine パターンで画像をスキャンするには:

代替:カメラはフォローします

オブジェクトに従う動的カメラの動きの場合:

1. 小さなマーカーまたはパスを作成する
2. マーカーにcamera_follows関係を追加
3. マーカーの位置を合わせる
4. ビューポートが自動的に次のようになります

ニュース