ループ アニメーション

アニメーションをループさせると、アニメーションが繰り返し再生されます。アニメーションをループさせるには、詳細モードを使用します。各要素のアニメーションを別々にループさせることや、複数の要素を含む複雑なアニメーションをループさせることができます。

1 つの要素のアニメーションをループさせる

ループされたキーフレームは、タイムライン上では半透明のコピーとして表示されます。下の例では、red-div 要素に 0.5 秒の長さのアニメーションがあり、合計 4 回ループ再生されるよう設定されています。

ステージ上でループ アニメーションをプレビューするには、タイムラインで再生アイコン をクリックします。

複数の要素のアニメーションをループさせる

指定した時間にアニメーションが開始、終了するよう、ページ上のすべてのアニメーションをループさせるイベントを追加することができます。

1. アニメーションのループを開始するタイムライン ラベルを設定します。
   1. アニメーションのループを開始するイベント トラックを右クリックして、ポップアップ メニューから [ラベルを追加] を選択します。
   2. ポップアップ ダイアログで、「loopStart」などのラベル名を入力します。
   3. Enter キーを押します。
2. アニメーションのループを終了するイベント トラックを右クリックして、ポップアップ メニューから [イベントを追加] を選択します。
   
3. イベント マーカー アイコン をダブルクリックして、イベントを設定します。
   1. アクションとして、以下を選択してください。
      • 無限ループさせるには、[タイムライン] > gotoAndPlay を選択します。
      • 特定の回数ループさせるには、[タイムライン] > gotoAndPlayNTimes を選択します。
   2. レシーバーとして、ページを選択します。
   3. [設定] として、事前に作成したラベル（たとえば loopStart）を選択し、繰り返す回数を設定します。

プレビュー ボタン を使用して、ループしたアニメーションがブラウザでどのように動作するかを確認してください。