シーケンスのためのuseTrailとuseChain

useTrail(count, config)は、count個のスプリングを作成し、それぞれの間に設定可能な遅延を設けて順番にアニメーションさせます。トレイルが開始すると、最初の項目がすぐにアニメーションし、2番目は少し遅れて、3番目はその後に開始します。このようにして、扇状または連鎖的な効果を作り出します。

useTrailは、トレイル内の各項目に1つずつ対応するスプリングオブジェクトの配列を返します。各スプリングは同じ形（同じキー）を持ちますが、アニメーションの開始時刻はそれぞれ異なります。トレイルの配列と項目の配列を同時に反復処理し、対応するスプリングを使って各アニメーション項目をレンダリングします。

トレイル付きのリストは、トレイルの配列をマッピングしてレンダリングします。trail.map((spring, i) => React.createElement(animated.div, { style: spring, key: items[i].id }, items[i].content))。各animated.divが独自のスプリングオブジェクトを受け取るため、項目は順番にアニメーションします。スプリングはインデックスの順序、つまり0、1、2、3...の順に実行されます。

useTrailは、順方向と逆方向のアニメーションを切り替えるパターンに対応しています。真偽値のopen状態を渡して方向を制御します。openがtrueのとき、トレイルは非表示から表示へアニメーションし、falseのときは表示から非表示へ逆向きにアニメーションします。トレイルは自動的に順序を反転するため、項目は逆順、つまり最後に入った項目から最初に出る順序でアニメーションします。

useTrailのconfigオブジェクトはuseSpringと同じで、tension、friction、massを指定します。項目間の遅延は、各スプリングがアニメーションを開始するまでにかかる時間によって決まり、これは全体的なスプリング物理によって制御されます。tensionが高く硬いスプリングほどずらしの進行が速くなり、穏やかなスプリングほど長い連鎖を作ります。

useSpringRef()は、スプリングフックのrefオプションに指定するrefを作成します。このrefを使うと、useChainでスプリングを開始するタイミングを制御できます。順番に実行したいスプリングまたはトレイルごとに1つのrefを作成します。const springRef = useSpringRef()と記述し、次のように渡します。useSpring({ ref: springRef, ... })。

useChain([ref1, ref2, ref3], [0, 0.5, 0.8])は、複数のスプリングまたはトレイルを順番に実行します。第1引数は、実行したい順番に並べたspringRefの配列です。第2引数は0から1までのタイムスタンプの配列で、全体の時間に対する割合として各スプリングを開始するタイミングを示します。

useChainで[0, 0.5]のようなタイムスタンプを指定すると、スプリング1はシーケンスの0%の時点で開始し、スプリング2は50%の時点で開始することを意味します。省略可能な第3引数は全体の時間をミリ秒で指定するもので、デフォルトは1000msです。したがって、[0, 0.5]と2000msを指定した場合、スプリング1は0msで、スプリング2は1000msで開始します。

よくあるパターンとして、コンテナの拡大をアニメーションし（サイズにはuseSpringを使用）、その後で内部の項目をフェードインさせます（リストにはuseTrailを使用）。両方にrefを設定し、useChain([sizeRef, trailRef], [0, 0.5])を使うと、最初にコンテナが拡大し、その半分の時点で項目がフェードインします。これにより、2段階で展開する映画的な登場アニメーションを作成できます。

useChainはページ遷移に適しています。ページ間を移動するとき、古いページの退出アニメーションと新しいページの登場アニメーションを連鎖させます。最初に退出が完了し（タイムスタンプ0）、その後で登場が始まります（タイムスタンプ0.6）。これにより、突然切り替えるのではなく、滑らかに引き継ぐことができます。

useTrailは、トレイル内の位置に応じて項目を異なる速度でアニメーションさせることで、パララックススクロール効果を作成できます。トレイルの奥にある項目ほど遅れて開始し、異なるconfig（低いtension）を設定することもできます。その結果、よりゆっくり移動します。この奥行きに基づくタイミングによって、異なる距離にある物体のパララックス効果を再現できます。

useTrailは、アニメーションする項目間のずらしの遅延をどのように作り出しますか？

useTrail(count, config)はcount個のスプリングを作成し、それらを順番にアニメーションさせて、リストをずらしながら表示します。trailと項目を同時にマッピングしてレンダリングします。useSpringRef()は、useChainが順序制御に使うrefを作成します。useChain([ref1, ref2], [0, 0.5])は、分数で表したタイムスタンプを使って複数のスプリングをオーケストレーションします。これらを組み合わせることで、拡大してから表示するアニメーションのような、複雑な複数段階のシーケンスを実現できます。