用語集
本書で登場したReanimatedの用語を、辞書のように引けるかたちでまとめました。各用語がどの章で説明されたかも添えてあるので、意味を確かめてから本文に戻れます。
本書を読み進めるなかで、共有値・worklet・モディファイアといった言葉が何度も出てきました。ここではそれらを辞書のように引けるかたちで並べ、あわせて「本書のどこで詳しく説明したか」も添えておきます。意味があやふやになったときの戻り先として使ってください。
Animated component(アニメーション対応コンポーネント)
Reanimatedがアニメーションさせられるコンポーネントです。Animated.View・Animated.Text・Animated.ScrollViewなど、いくつかが最初から用意されています。
import Animated from 'react-native-reanimated';
function App() {
return <Animated.View style={{ width: 100, height: 100 }} />;
}Reanimatedに含まれないコンポーネント(サードパーティのSVGなど)をアニメーションさせたいときは、createAnimatedComponentでラップして対応させます。この仕組みは第6部4章で扱いました。
共有値(Shared Value)
Reanimatedのアニメーションを駆動する中心的な値です。useSharedValueで作り、.valueプロパティを通じて読み書きします。UIスレッドとJavaScriptスレッドの間で同期され、スタイル更新などに反映されます。ただし通常のReactのstateとは違い、値を書き換えてもReactの再レンダーは発生しません。
本書では第2部2章で最初に登場し、それ以降のほぼすべての章で使い続けてきた、いわば主役の道具です。
アニメーション可能な値(Animatable value)
アニメーションに使える型の値です。数値、文字列、数値の配列が該当します。文字列は"10deg"・"21%"のような特定の形式か、"#ffaabb"・"rgba(100, 200, 100, 0.7)"のような色であればアニメーションできます。
どのスタイルプロパティが実際にアニメーションできるかは、アニメーション可能なプロパティ一覧にまとめてあります。
アニメーション関数(Animation function)
アニメーションの動き方そのものを記述する関数です。Reanimatedには3つ用意されています。
withSpring— バネの物理に基づく動きwithTiming— 時間とイージングに基づく動きwithDecay— 与えた減速率で慣性的に止まっていく動き
withSpringとwithTimingは第2部1章で、その調整方法は第2部3章で扱いました。
アニメーションモディファイア(Animation modifier)
アニメーション関数をラップして動きをカスタマイズする、高階のアニメーション関数です。
withDelay— 開始前に遅延を入れるwithRepeat— 指定回数だけ繰り返すwithSequence— 複数のアニメーションを順につなぐwithClamp— 動きの範囲を指定した区間に制限する
これらは第2部4章でまとめて組み立て方を見ました。
アニメーションオブジェクト(Animation object)
アニメーション関数やモディファイアが返す値で、開始・終了の条件や、各フレームの状態を計算するonFrame関数などを内部に持ちます。共有値に代入すると、自動的にアニメーション可能な値として扱われます。
sv.value = withSpring(100);withSpringはアニメーションオブジェクトを返しますが、最終的に共有値へ落ち着くのは100という数値です。この「オブジェクトを代入すると動きが始まり、結果は素の値になる」という感覚は第2部1章で身につけたものです。
インラインスタイルのアニメーション(Animations in inline styling)
useAnimatedStyleを使わずに、共有値をstyleプロパティへ直接渡す書き方です。
function App() {
const width = useSharedValue(100);
return <Animated.View style={{ width }} />;
}useAnimatedStyleとの使い分けは第2部2章で触れました。
レイアウトアニメーションモディファイア(Layout animation modifier)
レイアウトアニメーションをカスタマイズするためのメソッドです。enteringやexitingに渡すアニメーションへ、メソッドチェーンでつなげて使います。
<Animated.View entering={FadeOutLeft.duration(500).easing(Easing.ease)} />.duration()・.easing()・.springify()・.damping()・.withCallback()など多くのメソッドが用意されています。組み合わせて使う具体例は第4部1章で扱いました。
worklet(ワークレット)
UIスレッド上で実行できる短命なJavaScript関数です。JavaScriptスレッドで普通の関数のように呼ぶこともできます。Reanimatedを使うコードの多くは、自動的にworklet化されてUIスレッドで動きます。
function myWorklet() {
'worklet';
console.log('Running on the UI thread');
}先頭の'worklet'ディレクティブが目印です。輪郭は第1部2章で、複数のランタイムをまたいで動くという深い像は第6部1章で扱いました。
worklet化(to workletize)
JavaScript関数を、コピーしてUIスレッドで実行できるシリアライズ可能なオブジェクトへ変換することです。'worklet'ディレクティブが付いた関数は、Worklets Babelプラグインが自動的にworklet化します。この変換の中身は第6部5章で扱いました。
JavaScriptスレッド / UIスレッド
JavaScriptスレッド(JSスレッド)は、アプリのJavaScriptコードを実行する場所です。React Nativeのアプリコードは基本的にここで動きます。
UIスレッド(メインスレッドとも呼びます)は、画面の描画を担当します。Reanimatedがアニメーションをここで走らせることで、JSスレッドの混雑に左右されない滑らかさが生まれます。2つのスレッドの役割分担は第1部2章で扱いました。
Worklets Babelプラグイン
Reanimatedで使う特定の関数を自動的にworklet化し、'worklet'ディレクティブを手で書く手間を減らしてくれるプラグインです。どんなルールで関数を見つけ、何を変換しているのかは第6部5章で扱いました。