---
url: "/ja/bannerify/animation/animation-speed-timing.md"
description: "アニメーションの速度、長さ、遅延を細かく調整します。"
---

# アニメーションの速度とタイミングを調整する

> アニメーションの速度、長さ、遅延を細かく調整します。

[Video](/assets/videos/bannerify/animation/adjust-speed.mp4)

レイヤーのタイムラインバーの左右の**端**を**クリック**し、マウスで**押したままドラッグ**すると、アニメーションの長さと開始・終了位置を変えて、速度と遅延を調整できます。

バーが細すぎてつかみにくい場合は、バーにマウスを重ねるか、キーボードでフォーカスします。バーの幅が28px以下のときは、左右の丸いハンドルと、バーの下に小さな移動用のグリップが表示されます。ドットをドラッグするとその端を調整でき、下のグリップをドラッグするとアニメーションを移動できます。これらの操作部はつかめる範囲が広く、タイムラインの列の中に収まります。ホバーの長さを示すバーには、右側のハンドルだけが表示されます。これらの操作部では、通常のバーと同じスナップ、キーボードショートカット、元に戻す履歴が使えます。

レイヤーのタイムラインバーの**中央**を**クリック**し、マウスで**押したまま**左右に**ドラッグ**すると、タイムライン上でアニメーションの位置を移動できます。

> **Tip:** **キーボードで正確なタイミングの数値を入力する**。タイミングバーを使いたくない場合は、タイムラインのレイヤーにある2つ目の値をクリックし、キーボードで新しい数値（例：*1.5*）を入力して秒数を設定することで、速度と遅延の値を指定することもできます。

## 複数のレイヤーのタイミングを調整する {#adjust-timings-on-multiple-layers}

2つ以上のレイヤーを選択し、選択したレイヤーのいずれかで登場・退場・ホバーのタイミングバーをドラッグします。Bannerifyは、選択したほかのレイヤーの対応する有効なタイミングトラックにも同じ移動を適用し、相対的なずれを保ちます。

選択したタイミングのうち最も早いものか最も遅いものがタイムラインの端に達すると、Bannerifyはグループをその境界で止めます。ロックしたレイヤー、無効なタイミングトラック、ミラーリングしたFigma Motionアニメーションで制御される登場のタイミングは、変更されません。

ドラッグを1回終えるごとに、[元に戻せる履歴の1ステップ](/ja/bannerify/animation/undo-redo)として保存されます。

## タイムラインのズームとスクロール {#zoom-and-scroll-the-timeline}

レイヤーの一覧の上にある **+** ボタンと **−** ボタン、またはズームスライダーを使うと、表示を細かくしたり広くしたりできます。スライダーの横のパーセンテージは、現在のズームレベルを示します。**Fit**をクリックすると100%に戻り、タイムライン全体がもう一度表示されます。ズームは表示を変えるだけで、アニメーションのタイミングやエクスポートの長さは変わりません。

ポインターをルーラーやタイミングトラックの上に置いたまま、トラックパッドで2本指でピンチイン・ピンチアウトします。ズーム中もポインターの下の時間は固定されたままで、ズームの範囲は100〜1000%です。ピンチで変わるのは表示だけで、タイミングバーをドラッグしている間は無視されます。マウスホイールでスクロールしながら**Ctrl**を押してもズームできます。

ズームしているときは、ルーラーのすぐ下にある青い角丸の**スクロールバーのハンドル**を押したまま左右にドラッグすると、タイムラインに沿って移動できます。ハンドルはマウスを重ねたときと押している間にハイライトされます。トラックパッドで横にスクロールするか、タイミングトラックの上で**Shift**を押しながらスクロールしても移動できます。ルーラーとタイミングバーは、すべてのバナーで位置がそろったままです。

登場と退場のバーは、それぞれのアニメーションの再生にかかる時間を示します。登場のバーの終わりは登場アニメーションが終わる時点を示し、その後もレイヤーは表示されたままにできます。ホバーのバーはホバーの長さを設定するもので、開始位置は固定です。

## キーボードでバーを調整する {#adjust-bars-with-the-keyboard}

バーかその端のハンドルにフォーカスし、矢印キーを使うと**0.1秒**単位で移動できます。**Shift**を押しながらなら**1秒**単位です。バーを移動すると長さは保たれ、端を移動すると開始または終了の時間が変わります。

ドラッグ中に**Escape**を押すと、一緒に動いている選択中のレイヤーも含め、ドラッグ前のタイミングに戻ります。シーンのバーを動かすと、シーン内の編集可能なアニメーションが、それぞれの長さを保ったまま一緒に動きます。

## タイムラインのスナップと整理 {#snap-and-organise-your-timeline}

**Timeline Settings → Timeline Tools**を開いて**Snap**をオンにすると、ドラッグした登場・退場のバー、シーンのバー、それらの編集可能な端が、再生ヘッド、マーカー、作業範囲の境界、近くにあるアニメーションの端にそろいます。ドラッグ中に**Alt**（macOSでは**Option**）を押し続けると、スナップを無視できます。ガイドで位置合わせの状態が表示されます。スナップは現在のズームレベルに合わせて動作するので、細かく調整したいときはズームインしてください。

同じタブのレイヤーフィルターで、**All Layers**、**Selected Layers**、**Animated Layers**のどれを表示するかを選べます。フィルターで変わるのはタイムラインの一覧だけで、非表示の行も通常どおり再生・エクスポートされます。同じ設定パネルの**Collapse Groups**でシーンのレイヤー一覧を折りたたみ、**Expand Groups**でもう一度開けます。レイヤーを選択して**Zoom To Selection**をクリックすると、ズームの上限の1000%までの範囲で、そのレイヤーの有効なタイミング範囲が収まるように表示されます。

再生ヘッドの位置に名前付きのマーカーを追加するには、**Timeline Settings → Timeline Tools**を開きます。**Marker Name**を入力し、**Add At Playhead**をクリックします。ルーラー上のマーカーのひし形か、パネルに表示されたその時間をクリックすると、その位置に移動します。パネルでマーカーの名前を変更したり、削除したりできます。マーカーは現在の編集セッションの間だけ保持され、エクスポートしたアニメーションには影響しません。

## モーションシーケンスを保存して再利用する {#save-and-reuse-a-motion-sequence}

モーションシーケンスには、複数のレイヤーの連動した登場・退場・ホバーのアニメーションが保存されます。明示的な対応付けを使えば、名前の異なるレイヤーにも適用できます。

1. **Timeline Settings → Motion Sequences**を開き、**Source Banner**を選びます。
2. 必要に応じて**Selected Source Layers Only**をオンにすると、そのバナー内で選択したレイヤーだけを使えます。
3. シーケンスの名前を入力し、**Save Sequence**をクリックします。保存したシーケンスはBannerifyの設定に保持され、ライブラリには最大50個のシーケンスを保存できます。保存すると新しいシーケンスが選択され、提案される適用先の対応付けが更新されるので、適用する前にもう一度確認してください。
4. 保存したシーケンスを選び、適用先のバナーを1つ以上選択します。保存したシーケンスを使う場合は、ソースのバナーではなくシーケンスからアニメーションが適用されます。**Selected Source Layers Only**は、ソースから取り込むときや、ソースから直接適用するときに有効です。保存せずに、ソースのバナーから直接適用することもできます。
5. 提案されたレイヤーの対応付けを確認します。一意に一致する名前は自動で入力されます。重複している名前や一致しない名前は、適用先のレイヤーを選ぶ必要があります。対応付けのチェックを外すか、**Skip / Choose A Layer**を選ぶと、その適用先は変更されません。
6. 必要に応じて**Offset (Seconds)** の値を入力すると、登場と退場のタイミングをずらせます。オフセットはホバーの長さには影響しません。
7. 確認パネルには、ソース、適用先、レイヤーの対応付けで足りないものが表示されます。対応付けたトラックがすでに一致している場合は、適用するものはありません。変更前後のタイミングを確認し、**Apply Motion Sequence**をクリックします。適用全体が、元に戻せる1回の編集になります。**Undo**、**Redo**、または[Historyパネル](/ja/bannerify/animation/undo-redo)を使って、別のステップに戻れます。

ロックしたレイヤーと描画できないレイヤーは対象外です。Figma Motionのトラックは元のノードに結び付いたままで、コピーや上書きはされません。テキスト専用のアニメーションにはテキストレイヤーが必要です。タイムラインの外にはみ出すトラックはスキップされ、プレビューで報告されます。Bannerifyが黙って短くすることはありません。既存の無効なトラックは、シーケンスがそのトラックのアニメーションを明示的に指定していない限り、変更されません。

保存したシーケンスを削除するには、**Saved Sequence**でそのシーケンスを選び、ゴミ箱アイコンをクリックします。ライブラリから削除しても、すでにバナーに適用したアニメーションは削除されません。

シーケンスは、既存のカスタムアニメーションのライブラリを含め、Bannerifyですでに使えるアニメーションの定義を再利用します。見つからないカスタムアニメーションや互換性のないトラックは報告され、スキップされます。アニメーションピッカーと同じく、DrawアニメーションにはSVGレイヤーが、Split Textには対象となるテキストレイヤーが必要です。タイミングだけを同期する場合は、適用先のアニメーションがそのまま残るため、こうしたソースのアニメーションの制限は適用されません。シーケンスには、別のユーザーの環境に渡すためのアートワークやカスタムアニメーションの定義は含まれません。

## バナーサイズ間でタイミングを同期する {#synchronise-timings-across-banner-sizes}

**Timeline Settings → Sync Timings**を使うと、ソースのバナーのタイミング範囲を、読み込んだほかのバナーの対応するレイヤーにコピーできます。

1. ソースのバナーを選び、必要に応じて、選択したソースのレイヤーだけに絞り込みます。
2. 適用先のバナーを選び、各レイヤーの対応付けを確認します。
3. 現在のタイミングを残したい対応付けは、チェックを外します。名前があいまいなレイヤーや一致しないレイヤーは、適用先を明示的に選びます。
4. 変更前後のタイミング範囲を確認し、**Apply Timing Sync**をクリックします。

タイミングの同期では、各適用先のアニメーションの選択、ループ設定、その他のレイヤー設定が保たれます。無効な適用先のトラック、ロックしたレイヤー、Figma Motionのトラックはスキップされます。1回の適用が、[Historyパネル](/ja/bannerify/animation/undo-redo)から元に戻せる1回の編集になります。これは1回限りのコピーで、後からソースを編集しても、適用先は自動では変わりません。別の更新を同期したいときは、もう一度適用してください。