アニメーションコンポーネントとスタイル補間

react-springは、すべてのHTML要素に対応するanimated版を提供しています。animated.div、animated.span、animated.img、animated.buttonなどです。これらはネイティブの対応要素をそのまま置き換えられますが、重要な違いが1つあります。styleプロパティとしてSpringValueオブジェクトを受け取れることです。

通常のReact要素が受け取るstyleは、静的な値を持つ単純なオブジェクトです。SpringValuesは、Reactの再レンダーサイクルを経由せず、アニメーションの毎フレームで更新される特殊なオブジェクトです。SpringValueの更新を購読し、Reactを完全に介さずにDOMのstyleを直接変更できるのはanimated.*コンポーネントだけです。これにより、最大限のパフォーマンスを実現できます。

animatedコンポーネントのCSS styleプロパティに、スプリングの値を直接適用します。たとえば、style={{ opacity: opacity, transform: transform }}のように記述します。ここでopacityとtransformはuseSpringから取得したSpringValueです。animated.divは各RAF（requestAnimationFrame）のタイミングでこれらの値を読み取り、DOMノードに適用します。

SpringValueには、出力を変換するための.to()メソッドがあります。よくある用途は、数値のスプリング値をCSS文字列に変換することです。x.to(v => "translateX(" + v + "px)")のように記述します。関数は現在の数値を受け取り、変換後の出力を返します。その出力がstyleとして適用されます。

.to()メソッドでは、配列を入力して範囲を対応付けることもできます。x.to([0, 1], ["#ff0000", "#00ff00"])は、スプリングの値を範囲[0, 1]から赤から緑までの色の範囲に対応付けます。このようにして、数値のスプリングを色、文字列、または単純な数値では表せない任意の値に補間できます。

スプリングで複数の値を同時に追跡する場合、それらをまとめて補間できます。{ x, y }を追跡するスプリングでは、次のように記述できます。x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)")。.to()のコールバックは、スプリングの設定に登場する順番で、すべての値を受け取ります。

独自のコンポーネントをanimated()でラップできます。const AnimatedCard = animated(Card)のように記述します。ラップするコンポーネントはstyleプロパティを受け取り、それをDOM要素に転送する必要があります。これでAnimatedCardは、animated.divと同じようにstyleプロパティでSpringValueを受け取れるようになります。

複雑なアニメーションでは、複数のスプリングを組み合わせることがよくあります。たとえば、登場アニメーションで、opacityに1つのスプリング、垂直位置に別のスプリングを使う場合があります。次のように、同じanimated.divに両方を適用できます。style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}。

react-springで最も重要なパフォーマンス上の特性は、animated値の更新がReactのreconcilerを経由しないことです。スプリングのアニメーション中も、Reactは毎フレームコンポーネントを再レンダーしません。代わりに、animated.*コンポーネントが各requestAnimationFrameコールバックでDOMノードのstyleプロパティを直接更新するため、Reactのオーバーヘッドなしで60fpsのアニメーションを実現できます。

補間を使った一般的なアニメーションパターンには、opacity.to([0, 1], [0, 1])を使ってマウント時にフェードインする、scale.to(s => "scale(" + s + ")")を使ってホバー時に拡大する、rotation.to(r => "rotate(" + r + "deg)")を使って切り替え時に回転する、といったものがあります。これらの変換をチェーンすると、複合的な効果を作成できます。

デフォルトでは、範囲配列を使った.to()は、定義した範囲を超えて外挿できます。これをextrapolateオプションで制御できます。x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" })とすると、スプリングがオーバーシュートしても出力が0未満または100超にならないようにします。これはプログレスバーや範囲が制限されたアニメーションに便利です。

スプリングの値を適用するとき、通常のdivではなくanimated.divを使わなければならないのはなぜですか？

animated.div、animated.span、animated(CustomComponent)は、そのまま置き換えられるコンポーネントで、styleプロパティとしてSpringValueを受け取れます。.to()メソッドでスプリングの値を補間し、CSS文字列、色の範囲、その他の任意の出力形式に変換できます。複数のスプリングを1つの要素に自然に組み合わせることもできます。主なパフォーマンス上の利点は、RAFコールバックでDOMのstyleを直接変更することにより、スプリングの更新がReactの再レンダーを回避することです。