タイムライン上の一定区間を指定して、それ以降の動きの繰り返しと繰り返し方を指定するのが、loopOut、それ以前をループさせるのがloopInです。実際はloopOutを多用すると思います。

4種類あるループ

loopOut、loopInにはタイプが4種類用意されています。

  • cycle
  • pingpong
  • continue
  • offset

どれも非常に便利です。

上が実際にレンダリングしたアニメーションです。いずれもキーフレームすべて同じで、3つのみ。最後のキーフレーム後の動きが、loopOutで設定された動きになります。

cycle

loopOut(type = "cycle");

一番基本的なloopOutスタイルです。最後のキーフレームから最初のキーフレームへ戻ります。位置情報も回転情報も最初のキーフレームになります。

pingpong

loopOut(type = "pingpong");

最後のキーフレームに到達すると最初のキーフレームまで逆戻りしていきます。

continue

loopOut(type = "continue");

最後キーフレーム時の速さを維持します。

offset

loopOut(type = "offset");

動きは最初のキーフレームに戻りますが、位置は最後のキーフレームの時のものを維持します。相対的に動きだけループしていくイメージです。