react-springでapiを使う

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

react-springの大雑把な理解

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

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

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

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

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

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

apiの利用

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

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

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

以前のtoの値を参照できる

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

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

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

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

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

おわり

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

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

以上です。


Amazonアソシエイト

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

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス | Alex Banks, Eve Porcello, 宮崎 空 |本 | 通販 | Amazon
AmazonでAlex Banks, Eve Porcello, 宮崎 空のReactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス。アマゾンならポイント還元本が多数。Alex Banks, Eve Porcello, 宮崎 空作品ほか、お急ぎ便対象商品は当日お届けも可能。またReact...
タイトルとURLをコピーしました