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

Bannerifyのアニメーションプリセットにない動きが必要な場合は、X、Y、Scale、Rotation、Opacityのプロパティを持つキーフレームを追加して、独自のタイムラインアニメーションを作成できます。

動画チュートリアル：Figmaのバナーデザインにカスタムアニメーションを追加する

Bannerifyプラグインを使って、バナーにカスタムキーフレームアニメーションを追加する方法を解説した動画です。

カスタムアニメーションパネルを開く ​

カスタムアニメーションパネルを開くには、BannerifyのメインヘッダーにあるCustom Animationsボタンをクリックします。カスタムアニメーションパネルが開き、独自のキーフレームアニメーションを追加できるようになります。

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

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

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

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

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

デフォルトの開始点と終了点の間にキーフレームを追加するには、Add atフィールドにパーセンテージ（例：50）を入力し、Addを選びます。

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

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

アニメーションのどのキーフレームでも、5種類のプロパティを編集できます。キーフレーム間でプロパティに違いがあると、その差分が自動でアニメーションになります。たとえば、0%のキーフレームでスケールを2xに、100%のキーフレームでスケールを1xに設定すると、「縮小」するアニメーションが自動で作られます。

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

パーセンテージによる相対的なX/Y変形を使う ​

アニメーションさせる要素に対するパーセンテージでX/Yの位置を設定したい場合は、キーフレームのプロパティでPositionの単位をpxから % に切り替えます。これで、X/Yの値をピクセルではなくパーセンテージで設定できます。

X/Yの変形値をパーセンテージで指定すると、アニメーションを適用した要素の位置を基準に、そのサイズに対するパーセンテージで変形が自動的にアニメーションされます。たとえば、キーフレームでXの変形値を10%に設定すると、幅100pxのレイヤーは10px動きます。同じ10%のXの変形値を持つアニメーションを幅200pxのレイヤーに適用すると、レイヤーは20px動きます。

スケールをX/Yに分けて設定する ​

X軸とY軸のスケールをそれぞれ個別に設定したい場合は、キーフレームのプロパティでScaleのモードをUniformからX / Yに切り替えます。これで、両方を同じ比率で拡大・縮小するのではなく、キーフレームの横方向と縦方向の「Scale」の値を別々に設定できます。

この設定は、もう一方の軸に影響を与えずに、レイヤーの幅や高さだけをアニメーションさせたい場合に便利です。

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

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

ライブプレビューの再生速度は調整できます。カスタムアニメーションが速度によってどう見えるかを確かめたい場合は、プレビューの下にあるDurationスライダーをドラッグして、プレビューの1ループにかかる秒数を変えることで、ライブプレビューの再生速度を変更できます。

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

あるキーフレームのプロパティを別のキーフレームにコピー・ペーストするには、まずコピー元のキーフレームを選んでCopyボタンをクリックします。次に貼り付け先のキーフレームを選び、Pasteボタンをクリックすると、コピーしたプロパティが選択中のキーフレームに貼り付けられます。キーフレームを右クリックして、Copy PropertiesまたはPaste Propertiesを選ぶこともできます。

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

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

キーフレームを削除するには、Keyframesトラックで削除したいキーフレームをクリックして選択し、Deleteボタンをクリックします（またはキーフレームを右クリックしてDelete Keyframeを選びます）。これでタイムラインからキーフレームが削除されます。なお、0% と100% のキーフレームはアニメーションのタイムラインに必要なデフォルトのキーフレームのため、削除できません。

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

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

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

Easingメニューから項目を選ぶと、アニメーションに付けるイージングの種類を選べます。イージングはタイムライン全体に自動で適用され、Live previewエリアも更新されるので、選んだイージングでキーフレームアニメーションの動きがどう変わるかを確認できます。

選べるイージングは次のとおりです。

  • Ease (Default)
  • Ease out
  • Ease in
  • In and out
  • Linear
  • Gentle
  • Overshoot
  • Anticipate

カスタムのCubic Bezierイージングを設定する ​

動画チュートリアル：Figmaでバナーアニメーションにcubic-bezierイージングを追加する

Bannerifyプラグインを使って、Figmaのバナーアニメーションにカスタムのcubic-bezierイージングを追加する方法を解説した動画です。

独自のカーブを使うには、Easingメニューでカーブのハンドルをドラッグするか、プリセットの下にあるフィールドに有効なCSSのcubic-bezierの値（例：cubic-bezier(0.65,0.05,0.36,1);）を貼り付けます。カスタムのcubic-bezierカーブは、https://easings.co/のようなサイトや、CSSのcubic-bezierカーブを生成できるお好みのWebサービスを使って作成できます。

アニメーションの基準点を設定する ​

デフォルトでは、すべてのカスタムアニメーションの基準点はX軸・Y軸ともにCenterとCenterに設定されています。これは、Origin pointグリッドの9つの点のいずれかをクリックして変更できます。グリッドは、縦軸のTop、Center、Bottomと、横軸のLeft、Center、Rightを組み合わせたものです。

アニメーションの基準点を変えると、レイヤーのどこにアニメーションが「固定」されるかが変わります。たとえば基準点をTopとLeftに設定すると、その点が回転アニメーションの軸になり、拡大・縮小アニメーションの起点にもなります。

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

新しいアニメーションを保存するには、Animation nameのテキストフィールドにアニメーションの名前を入力し、Add New Animationボタンをクリックします。

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

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

カスタムアニメーションを1つ以上保存すると、レイヤーのタイムラインにある登場アニメーションと退場アニメーションのセレクトボックスをクリックして、バナーで使えるようになります。セレクトボックスの選択肢にCustom Animationsという新しいグループが表示され、保存したすべてのカスタムアニメーションを確認できます。

カスタムアニメーションを一括適用する ほかのプリセットのアニメーションと同じように、一括適用機能を使って、カスタムアニメーションをまとめて適用することもできます。

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

以前に保存したカスタムアニメーションを更新するには、Saved animationsメニューから更新したいアニメーションを選びます。保存したアニメーションとそのキーフレームが、カスタムアニメーションパネルに読み込まれます。

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

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

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

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

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

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