react-springでapiを使う

react-springでspringを再利用する。

react-springの大雑把な理解

react-springのuseSpringはreactのフックを利用しているので、フックの理解が必要になる。react公式（日本語）: フック早わかり – React

useSpringはuseEffectに近い印象がある。戻り値からするとuseStateやuseReducerだが、実際の動作はreactのレンダリングの外側で行われる。

useSpringでは大体なんでもアニメーションしてくれる。アニメーションというより、アニメーションに必要な値を補間してくれる。

文字列はダメなようだ。補間されずにtoの値になった。

下の例では、10秒かけてrgbの値を補間してもらってアニメーションをしている。一度しか行われないので、わかり難かった時は埋め込み内の更新ボタンを押すといい:

公式ではpropsが戻り値の変数名でこれをanimated要素のstyleに設定するが、上の例とほぼ同じ現象が起きていると思う。 key名(opacityなど)が実際のCSS名と一致しているので、そのまま指定できている形でうまくいっている。

useSpringに単なるpropsオブジェクトを渡したか、（propsオブジェクトを返す）関数を渡したかで戻り値が異なる。以降は関数を渡したケースを考えていく。そのほうが再利用できるなどの点で使い勝手がいい。

戻り値の2つ目に、アニメーションのためのメソッドをいくつか持ったオブジェクトが指定される。公式docsはapiと命名している: react-spring

メソッドの一つであるstartが再利用において便利。

react-springの核であるControllerを使うとspringの設定などをすべて見ることができる。これを使うと、現在の値をもとに次のアニメーションを決定することができる。

Controllerへアクセスするには、uesSpringRefを使うのがいい。上述のapiオブジェクトからも参照できるのでこちらのほうが簡潔かもしれない。

kickをクリックしたときに、次の表示先の座標を決定し、そこへアニメーションしている。その際に移動距離に応じて円のサイズを変更している。最終サイズは最初と同じなので移動しつつ、だんだん縮小するアニメーションになる。

current[0]でControllerが返ってきている。コンソールなどいじってみると理解を深められる。

useChainを使うと連続したアニメーションのときに直前の状態から次のアニメーションの決定に役立ちそうだ。上の例も円が距離に応じてサイズが変わっているが、そのサイズの変更は現状一瞬で行われているが、そこをアニメーションにできたりする。

今回はapiを用いて再利用できることを書いておきたかった。current[0]という書き方はあまり好みではないが、まあいいだろう。

ドキュメントは英語でもしっかり読もう。クラスベースと関数ベースは結構違う。関数ベースに慣れてないなら、まずはそのドキュメントを熟読すべきだとひしひし感じた。

以上です。

Amazonアソシエイト

日進月歩なところなので新しいのがいいと思う。2021/08発売のようだ。