ループ アニメーション

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

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

  1. タイムラインで、ループさせたいアニメーション レイヤにある「アニメーションの繰り返しを設定」ボタン をクリックします。
  2. ポップアップで、次のいずれかを選択します。
    • [無制限] - アニメーションが無限にループします。
    • [___ 回] - アニメーションが指定された回数分ループします。
    • [なし] - アニメーションはループしません。

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

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

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

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

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

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

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。