Reanimated 4 安定版：ほとんどのworkletシナリオをCSSアニメーションで置き換え
Reanimated 4 安定版がリリース、CSS 互換の宣言的アニメーション API を追加し、一部の worklet シーンを置き換え可能。
日本語
コピー
React Native Reanimated 4 安定版リリース——React Native アニメーションの未来
以前お約束したとおり、これは Reanimated 2 で worklet の概念を導入し、それを土台に UI スレッドベースのまったく新しいアニメーションエンジンを打ち出して以来、最大かつ最も重要なリリースです。Worklet は React Native エコシステムの中で非常に重要な存在になり、多くのプロジェクトがその上に構築されるきっかけにもなりました。今回のメジャーバージョンは worklet を新たな段階へ引き上げると同時に、宣言的で CSS 互換の新しいアニメーション API を提供し、多くのユースケースで worklet を置き換えることを狙っています。短いリリース動画で、このバージョンの全体像をさっと確認できます。
CSS アニメーションとトランジションを使い始める
CSS ベースのアニメーションとトランジションの API が、今回のリリースの中心です。以前から、最も一般的な種類のアニメーション——ジェスチャーやスクロール位置ではなく、状態の更新によってトリガーされ制御されるアニメーション——に、明快な宣言的 API を提供したいと考えていました。宣言的アニメーションはコードベースの多くの部分を簡素化します。これまでは単純なアニメーションでも shared value とアニメーションスタイルの worklet が必要でした。最終的に CSS アニメーションとトランジションを選んだのは、広く知られ、実戦で検証され、完結した標準だからです。Web から来た開発者が Reanimated に親しみやすくなるだけでなく、React Native 開発者がこれらの API を学んだり、慣れ親しんだ状態を保てるようにもしたいと考えました。 Reanimated の CSS 宣言的アニメーションには、もう一つ利点があります。最適化しやすいのです。この方法なら、どのコンポーネントのどのプロパティがアニメーションされているかを、より正確に把握できます。shared value を使うと、本来なら明示的に得られるはずのこの情報を、shared value や派生値の関係から推測するしかありません。そのため、状態で制御するアニメーションには Reanimated の CSS API を使い始めることをお勧めします。 コードは減り（hook の呼び出しが不要になります）、パフォーマンスも向上するはずです（今後のアップデートでさらに最適化が入ります）。迷ったら、この API の力を示すサンプルアプリを見てください。
worklet はどうなるのか
より複雑なケースでは、worklet と shared value を使うのが今も推奨です。 たとえばジェスチャーやスクロールで駆動するアニメーション、画面遷移アニメーション、複数の派生アニメーションを組み合わせる必要がある場面などです。今すぐすべてのコードを CSS アニメーションに書き換えなければならない、などとは考えないでください。Worklet 向けにもパフォーマンス関連の改善をいくつか用意しており、近いうちに公開します。
Worklet はこれまでになく注目されています。関連するコードは独立したパッケージ react-native-worklets に移行したので、単独でイテレーションを速められますし、アニメーション以外のパッケージにも使ってもらえます。実はこの移行は 3.17 ですでに完了していて、誰も気づいていませんでした。Reanimated のユーザーから見るとこの変更は完全に透過的です。Worklets は Reanimated の内部依存にすぎないからです。Reanimated 4 のインストールガイドでは、Babel の設定に react-native-reanimated/plugin ではなく react-native-worklets/plugin を書くよう求めています。既存のアプリがあれば今すぐ変更できますが、以前の書き方も当面は使えます。
破壊的変更
Reanimated 4 の API は Reanimated 3 と互換性があり、アップグレードでコードを変更する必要はないはずです（利用規約が適用されます™）。私たちのライブラリはエコシステムの数万のアプリとライブラリで使われているため、コミュニティを新しいバージョンに適応させる作業には特に気を配り、できるだけ楽になるようにしています。Reanimated 4 を使うにはアプリが React Native の新アーキテクチャを使っている必要があり、新アーキテクチャへの移行自体にそれなりの作業がかかるかもしれません。新アーキテクチャに移行してしまえば、ほぼ変更なしで Reanimated 4 にアップグレードでき、CSS アニメーションのような新機能を少しずつ使い始められます。
Reanimated を継続的に改善するため、私たちはときに、まずい設計判断を捨てる必要があります。ただし、そうするときはいつも、ユーザーへの影響を最小限に抑え、変更内容を明確に伝えるようにしています。今回も同じです。Reanimated 3 で非推奨となっていた、ほとんど使われていないメソッドをいくつか削除します。また、すでに時代遅れとなった少数のメソッドについては非推奨の警告を出しつつ、後方互換性のために no-op として残します。詳細はマイグレーションガイドをご覧ください。
API の変更に加えて、spring アニメーションの挙動も変わりました。Reanimated 4 では新しいデフォルト設定を採用しています。これまで spring アニメーションに独自のパラメータを設定していた場合、その設定は引き続き有効です。それ以外の場合、変化はごくわずかで、私たちの見解では、より良く、より自然な挙動になります。当初の spring 実装は、React Native コアにあるものを模倣したものでした。時間が経つにつれ、このやり方にはぎこちなさがあると分かってきました。spring の力学は開始条件と終了条件に敏感すぎて、わかりにくいしきい値パラメータを正しく調整しない限り、おかしな挙動や完全に誤った挙動が頻繁に起きます。新しい spring 実装は、これらのしきい値パラメータを指定しなくても正しく動作します（後方互換性のために指定することも可能です）。spring を使うときは、duration と damping ratio だけを指定することをおすすめします。こうすれば、距離に関係なく、アニメーションは指定した時間で終了するため、ユーザーが見る挙動はより予測しやすくなります。以下が新しい spring の実際の動きです：
最後に
5年前、私たちは Shopify と協力して、Reanimated 2 で React Native のアニメーションのあり方を刷新しました。ここまでの信頼と支援に感謝します。また、Reanimated と React Native の境界部分の問題解決に多大な労力を注いでくれた Meta の React Native コアチームにも感謝します。
Reanimated 4 はまったく新しいものでありながら、どこか見慣れたものでもあります。これらの新しい機能によって、あなたのアプリを次のレベルへ引き上げ、より多くの開発者が、ユーザーに愛される、アニメーションの優れたモバイルインターフェースを作れるようになると信じています。
参考リンク：