カスタムキーフレームアニメーションの作成

Pitchdeckに標準で含まれるアニメーションプリセットにない動きが必要な場合は、x、y、scale、rotation、opacityのプロパティを持つカスタムキーフレームを追加して、独自のタイムラインアニメーションを作成できます。

新しいカスタムアニメーションを作成する ​

カスタムアニメーションパネルを開くには、PitchdeckのメインヘッダーにあるCustom Animationsボタンをクリックします（ウィンドウサイズがSmallの場合はAnimationsと表示されます）。カスタムアニメーションパネルが開き、独自のキーフレームアニメーションを追加できるようになります。

アニメーションパネルを開くと、最初のキーフレーム（0%）と最後のキーフレーム（100%）の2つが表示されます。キーフレームアニメーションには、アニメーションの開始点となるフレームと終了点を示すキーフレームが必要なため、この2つは標準で追加され、削除できません。

編集するキーフレームを選択する ​

カスタムアニメーションパネルの上部にあるキーフレームのパーセンテージの列でキーフレームをクリックすると、すぐにそのキーフレームに切り替えられます。キーフレームをクリックすると、そのキーフレームのプロパティを編集できます。

新しいキーフレームを挿入する ​

標準の開始点と終了点の間にキーフレームを追加するには、そのパーセンテージ（例：50）を入力し、Insert New Keyframeを選択します。

新しく追加したキーフレームは、現在選択しているキーフレームと同じプロパティで自動的に作成されます。そのため、すでに追加したキーフレームをもとにプロパティを調整できます。また、Insert New Keyframeボタンをクリックすると、新しく追加したキーフレームが自動的に選択されます。

キーフレームのプロパティを編集する ​

各キーフレームでは、5種類のプロパティを編集できます。キーフレーム間でプロパティに違いがあると、その変化が自動的にアニメーションになります。たとえば、0%のキーフレームでscaleを2xに、100%のキーフレームでscaleを1xに設定すると、「縮む」アニメーションが自動的に作成されます。

  • Xプロパティは、要素の左右のピクセル位置をアニメーションさせます。
  • Yプロパティは、要素の上下のピクセル位置をアニメーションさせます。
  • Opacityプロパティは、要素の透明度（パーセンテージ）をアニメーションさせます。
  • Rotateプロパティは、要素の回転角度をアニメーションさせます。
  • Scaleプロパティは、要素のサイズをアニメーションさせます。

キーフレームのプロパティをコピー・ペーストする ​

あるキーフレームのプロパティを別のキーフレームにコピー・ペーストできます。まずコピー元のキーフレームを選択してCopy Propertiesボタンをクリックし、次にペースト先のキーフレームを選択してPaste Propertiesボタンをクリックすると、コピーしたプロパティが選択中のキーフレームにペーストされます。

コピーしたプロパティは、パネルを閉じるまでしか使えません カスタムアニメーションパネルを開いている間は、アニメーション内のどのキーフレームにもプロパティをコピー・ペーストできます。カスタムアニメーションパネルを閉じると、コピーしたプロパティはペーストできなくなります。

キーフレームを削除する ​

キーフレームを削除するには、キーフレームのパーセンテージの列でキーフレームをクリックして選択し、Delete Keyframeボタンをクリックしてタイムラインから削除します。なお、0% と100% のキーフレームはアニメーションのタイムラインに必要な標準のキーフレームのため、削除できません。

キーフレームを削除すると、編集対象のキーフレームとして0% のキーフレームが自動的に選択し直されます。

キーフレームを削除すると、完全に削除されます。 キーフレームを削除すると、タイムラインから完全に削除され、削除を元に戻すことはできません。ただし、アニメーションのタイムラインを編集している間であれば、キーフレームのCopy Propertiesを実行してから削除し、削除したキーフレームのプロパティを別のキーフレームにペーストできます。

ライブプレビューでアニメーションを確認する ​

更新したキーフレームとそのプロパティでアニメーションがどう見えるかは、Live Previewエリアで確認できます。このエリアはキーフレームのプロパティのすぐ隣、アニメーションのタイムラインの真下にあります。キーフレーム、プロパティ、イージングに加えた変更は、ライブプレビューに自動的に反映されます。

ライブプレビューの再生速度は調整できます。 カスタムアニメーションがさまざまな速度でどう見えるかを確認したい場合は、Live Previewの下にある速度スライダーを左右にドラッグして、ライブプレビューの再生速度を上げ下げできます。

アニメーションのイージングを設定する ​

アニメーションに適用するイージングの種類は、Easingのセレクトボックスから選べます。イージングはタイムライン全体に自動的に適用され、Live Previewエリアも更新されるので、選んだイージングによってキーフレームアニメーションの動きがどう変わるかを確認できます。

次のイージングから選べます。

  • Ease (Default)
  • Linear
  • Ease In
  • Ease Out
  • Ease In Out

新しいカスタムアニメーションを保存する ​

新しいアニメーションを保存するには、New Custom Animation Nameのテキスト入力欄にアニメーションの名前を入力し、Add New Animationをクリックします。

カスタムアニメーションは、現在のFigmaファイルでのみ保存・利用できます アニメーションを保存すると、現在のFigmaファイル内のどのページでも使えるようになります。ただし、アニメーションはFigmaファイルに直接保存され、別のファイルには移せないため、まったく別の新しいFigmaファイルでPitchdeckを実行すると、保存したアニメーションは表示されません。新しいFigmaファイルでは、アニメーションを作り直す必要があります。または、現在のFigmaファイルに新しいページを作成すれば、このFigmaファイルで保存したカスタムアニメーションを引き続き使えます。

保存したカスタムアニメーションを使う ​

カスタムアニメーションを1つ以上保存したら、Animationsタブでレイヤーを選択し、アニメーションピッカー（All effects… またはAnimationメニュー）を開くと、スライドで使えるようになります。ピッカーにCustomタブが表示され、保存したすべてのカスタムアニメーションを確認できます。

ほかのプリセットアニメーションと同様に、Animationsタブで複数のレイヤーをまとめて選択すれば、カスタムアニメーションを一度に複数のレイヤーへ適用することもできます。

保存したアニメーションを更新する ​

以前に保存したカスタムアニメーションを更新するには、Your Saved Animationsのセレクトボックスで更新したいアニメーションを選びます。保存したアニメーションとそのキーフレームが、カスタムアニメーションパネルに読み込まれます。

保存したアニメーションを選んだら、必要に応じてキーフレームとプロパティを編集します。更新内容に問題がなければ、Update Saved Animationボタンをクリックして変更を保存し、以前のアニメーションのキーフレームを上書きします。

なお、保存したアニメーションを更新すると、そのカスタムアニメーションをすでに使っているスライド内のすべてのレイヤーに、更新後のキーフレームが自動的に適用されます。

保存したアニメーションをもとに新しいアニメーションを作成する。 保存したアニメーションを読み込んで変更したいものの、保存済みのバージョンを「上書き」したくない場合は、New Custom Animation Nameを入力してAdd New Animationボタンをクリックすれば、そのアニメーションから新しいアニメーションを作成できます。

保存したアニメーションを削除する ​

アニメーションを削除するには、Your Saved Animationsでいずれかの項目を選んでアニメーションを読み込み、Delete Saved Animationボタンをクリックして保存したアニメーションを削除します。

保存したアニメーションを削除すると、完全に削除され、レイヤーからも外れます。 保存したアニメーションを削除すると、Your Saved Animationsの一覧から完全に削除されます。削除したカスタムアニメーションを使っていたスライド内のレイヤーは、アニメーションが適用されていない状態に戻ります。