Reanimatedとは何か
Reanimatedが得意とすること、標準のAnimated APIとの違い、そしてできることのショーケースを通して全体像をつかみます。
React Native Reanimatedは、Software Mansionが開発しているアニメーションライブラリです。滑らかなアニメーションやインタラクションを、UIスレッド上で動かせるところに最大の特徴があります。
なお、本書で扱うReanimated 4.xはNew Architecture(Fabric)専用です。Legacy Architecture(Paper)のアプリで同じコードをそのまま使う前提にはしないでください。
「UIスレッド上で動く」と言われても、まだピンとこないかもしれません。この章ではその意味を、標準のAnimatedAPIと見比べながら少しずつ解き明かしていきます。細かいしくみは次章にゆずるとして、まずはReanimatedがどんなライブラリで、どんなときに力を発揮するのかを押さえましょう。
何が得意なのか
Reanimatedが向いているのは、ユーザーの操作や時間の流れに合わせて、画面上の要素をなめらかに動かす場面です。
たとえば次のような動きです。
- ボタンを押すとカードがバネのように伸び縮みする
- 指でドラッグした量にぴったり追従してシートが持ち上がる
- スクロール位置に連動してヘッダーが縮んだり色を変えたりする
- リストに要素が追加されたとき、周囲がスッと詰まる
タップのような一瞬の入力から、ドラッグやスクロールのように連続する入力、要素の再配置まで、同じ考え方で扱えます。
これらに共通するのは、値が刻一刻と変わり続ける点です。指の位置やスクロール量といった「生きた値」を、そのままアニメーションの入力にできる。ここがReanimatedの強みです。
逆に、一度きりのフェードインや、ずっとループするローディングスピナーのように、外からの入力を必要としない動きもあります。そうしたケースには、後の章で扱うCSSアニメーションAPIのほうが素直に書けることもあります。使い分けの話は第3章であらためて取り上げます。
なぜ滑らかなのか
Reanimatedの滑らかさを理解するには、React Nativeがアプリを動かすときに使う2種類のスレッドを知っておくと早いです。
React Nativeには、アプリのJavaScriptコードを実行するJSスレッド(JavaScript thread)と、画面の描画を担当するUIスレッド(UI thread、メインスレッドとも呼ばれます)があります。あなたが書いたコンポーネントのロジックや状態更新は、基本的にJSスレッドの上で動いています。
ここで問題になるのが、JSスレッドは同時にひとつのことしかできないという性質です。重い計算やデータの整形、ネットワーク応答の処理などでJSスレッドが忙しくなると、その間はほかの処理が待たされます。もしアニメーションの1フレームごとの計算までJSスレッドに乗っていたら、JSスレッドが詰まった瞬間にアニメーションもカクついてしまいます。
Reanimatedはこの問題を、アニメーションの計算をUIスレッド側で行うことで避けています。公式ドキュメントも、Reanimatedはworkletを使ってビューのスタイル計算やイベントへの反応をUIスレッド上で行う、と説明しています。スタイルの更新がJSスレッドから切り離されているので、JSスレッドがどれだけ忙しくても、動き自体は滑らかさを保ちやすくなります。
JSスレッドを毎フレーム経由する構成では処理の詰まりがフレーム落ちにつながります。Reanimatedは毎フレームの計算をUIスレッド側へ置きます。
これが標準のAnimatedAPIとの一番の違いにつながります。AnimatedでもuseNativeDriverを有効にすればネイティブ側で動かせますが、対象はtransformやopacityなど一部のプロパティに限られ、レイアウトに関わる値には使えません。Reanimatedはworkletという仕組みを土台に据えることで、この「UIスレッドで動かす」を既定の姿にしています。
worklet(ワークレット)とUIスレッドの関係は、この本の核になる考え方です。ここでは「アニメーションの計算がUIスレッドに載っているから滑らかなのだ」という感触だけ持っておいてください。詳しいしくみは次章で図を交えて説明します。
できることを見てみる
言葉だけでは伝わりにくいので、実際に動くものを触ってみましょう。次のデモは、ボタンを押すたびに四角形の幅がバネのように伸びていきます。
「コード」タブを開くと、この動きがどう書かれているかを見られます。useSharedValueで値を用意し、withSpringで包んで代入するだけ。たったこれだけで、バネの物理的なはねかえりまで含んだ動きになります。用語の意味はまだ分からなくて大丈夫です。第2部でひとつずつ解説します。
もう少し凝った例も見てみましょう。次のデモは、四角形をタップすると左右に動くのですが、バネの硬さ(stiffness)や重さ(mass)、減衰(damping)といったパラメータをその場で変えられます。スライダーを動かして、値によって動きの表情がどう変わるかを試してみてください。
数字を変えるたびに、キビキビした動きになったり、ゆったり大きく揺れたりします。こうした物理ベースのふるまいを、少ないコードで表現できるのがReanimatedの魅力です。
次の一歩
この章では、Reanimatedがどんなライブラリで、なぜ滑らかに動くのかという全体像を眺めました。次章では、その滑らかさの正体であるUIスレッドとworkletのしくみに踏み込んでいきます。
なお、自分のプロジェクトにReanimatedを導入する手順は、公式のGetting Startedがすでに丁寧にまとめています。本書ではセットアップ手順を繰り返さず、そちらへゆだねます。