約 5 分 · React 16.8+ · React DOM
はじめる
インストールからジェスチャー、登場・退場のモーションまでを 6 ステップで。各ステップは小さな動くコンポーネントです。
インストール
Animated にランタイム依存はありません。React 16.8 以上が peer dependency です。
パッケージのエントリーには 'use client' が付いています。Next.js App Router では、サーバーのレイアウトで
AnimatedProviderを描画でき、フックとAnimated.<tag>は Client Component の中で使います。npm install @kkwaenggwari/animatedエディターで
@kkwaenggwari/animatedの import が解決されていること。最初の値を動かす
useAnimatedValue(1)は、コンポーネントが生きている間ずっと動く数値を持ちます。そのままstyleに入れると CSS 変数になるので、値が変わっても React はレンダリングしません。timing(value, { toValue, duration }).start()で値を動かします。途中でもう一度押すと、現在の不透明度から始まります。サンプルを準備中…
ボックスがフェードアウトして戻り、途中でもう一度押すとその位置から反転すること。
ひとつの値から多くの出力を導く
interpolateは値を長さ、角度、数値へ対応付けます。イージングがなければ同じ変数の正確なcalc()になるので、5 レーンでもコストは 1 レーンと同じです。同じ値に異なる入力範囲を与えれば、5 つの別々のアニメーションなしでカスケードがつくれます。
サンプルを準備中…
1 回押すと 5 レーンがカスケードして動き、spread を変えると範囲だけが変わること。
行き先を書く
Animated.buttonは普通の button を描画します。seedは最初のフレーム、poseはいまあるべき位置、tempoはそこへの行き方です。移動の途中で
poseが変わると、要素は画面上の位置から向きを変え、スプリングなら速度も引き継ぎます。サンプルを準備中…
カードをすばやくクリックしても、カードが飛ばないこと。
入力をつなぐ
input(ref, moveInput(...))はポインターの座標を値に書き込みます。follow(target, source)は一方の値をもう一方にスプリングで追従させます。useAnimatedのファクトリーで宣言したものはすべてコンポーネントが所有します。アンマウントされるか依存値が変わると、リスナーもスプリングも止まります。サンプルを準備中…
カードがポインターのほうへ傾き、ポインターが離れると元に戻ること。
退場をアニメーションする
React の子要素を取り除くと、普通はすぐに消えます。
Animated.Keepは key 付きの子要素を、departのポーズが終わるまで残します。waitは、すべての退場が終わってから新しい子要素を描画します。サンプルを準備中…
閉じたメッセージが、選んだモーションで退場してから消えること。
これでモデル全体がわかりました
値、行き先、入力、退場は、同じコントローラー、中断のルール、後片付けを共有しています。ガイドではそれぞれをさらに詳しく説明します。