はじめに
React Native Reanimatedを日本語で体系的に学ぶインタラクティブな解説本です。
この本はReact Native Reanimatedを、日本語で体系的に学ぶためのインタラクティブな解説書です。公式ドキュメントを機械的になぞるのではなく、学習のまとまりを優先して構成し直し、実際に動くデモを交えながら解説していきます。
操作や時間から届く入力を共有値に置き、UIスレッド上のworkletで見た目へ変換する。この流れが本書を通して使う基本形です。
この本で学べること
- Shared ValueとWorkletを土台としたReanimatedの設計思想
useSharedValue/useAnimatedStyleなどコアフックの使い方withTiming/withSpringなどアニメーション関数の組み合わせ- ジェスチャー・スクロール・デバイスと連動したインタラクション
- レイアウトアニメーション・CSSアニメーションAPI
- Workletの仕組みとスレッド間実行など、高度なトピック
第1部でしくみをつかみ、基本、操作、レイアウト、CSSと進み、最後にランタイムをまたぐ高度なAPIへ踏み込みます。
対象読者
React Nativeの基本的な開発経験がある方を対象としています。アニメーションやReanimatedが初めてでも、第1部から順に読み進められる構成です。
本書は Reanimated 4.xに対応しています。ブラウザ上で動く インタラクティブデモ(react-native-webベース)を各所に埋め込み、コードと動きを見比べながら学べるようにしています。
Reanimated 4.xはReact NativeのNew Architecture(Fabric)が前提です。既存アプリがLegacy Architecture(Paper)のままなら、Reanimated 3.xを使うか、New Architectureへの移行を先に検討してください。
本書は「学習に役立つ部分」を優先して書きます。プロジェクトへのセットアップ手順や、個々のAPIの全パラメータを網羅したリファレンスなど、公式ドキュメントがすでに十分にカバーしている内容はあえて本文で繰り返さず、該当箇所から公式ページへリンクします(巻末の公式リソースとその先へにもまとめてあります)。
目次
- 第1部Reanimatedを理解する — Reanimatedとは何か / しくみ(UIスレッドとworklet) / 2つのアニメーションAPI
- 第2部 基本をマスターする — はじめてのアニメーション / 共有値とスタイル / 動きを調整する / モディファイア / 値の派生
- 第3部 インタラクションと動きの実践 — ジェスチャー / スクロール連動アニメーション / デバイスと環境
- 第4部 レイアウトアニメーション — 出現・消滅 / レイアウトトランジションとリスト / キーフレームとカスタム / 共有要素トランジション
- 第5部CSSアニメーションAPI — CSS Animations / CSS Transitions
- 第6部 高度なReanimated — workletを深く理解する / 測定と参照 / リアクションとフレームコールバック / カスタムコンポーネントとイベント / Babelプラグイン
- 付録 — 用語集 / SVG / アクセシビリティ / プロパティ一覧 / 公式リソースとその先へ / クレジットとライセンス
各章は順次執筆していきます。未執筆の章は公式ドキュメントへのリンクを掲載しています。
出典・ライセンスについては クレジットとライセンス を参照してください。