モディファイアで組み立てる
withRepeat・withSequence・withDelayでシェイクアニメーションを組み立てながらモディファイアを学び、withClampとwithDecayも押さえます。
アニメーションを調整するもう一つの方法が、アニメーションモディファイア(animation modifier)です。モディファイアはアニメーションを包んで、繰り返したり、連結したり、遅らせたりできます。この章では、ボタンを押すと少し間をおいてから左右に揺れるシェイクアニメーションを、モディファイアを足しながら組み立てていきます。
内側のアニメーションをモディファイアで順に包むと、待機、反復、復帰という一連の動きを組み立てられます。
出発点
まずはuseAnimatedStyleとwithTimingで、ボタンを押すと四角形が右へ40px動くだけのコードから始めます。
const offset = useSharedValue(0);
const style = useAnimatedStyle(() => ({
transform: [{ translateX: offset.value }],
}));
const OFFSET = 40;
const handlePress = () => {
offset.value = withTiming(OFFSET);
};ここから、この動きをシェイクへと育てていきます。
繰り返す
繰り返しにはwithRepeatを使います。渡したアニメーションを指定回数だけ繰り返します。
offset.value = withRepeat(withTiming(OFFSET), 5, true);第2引数numberOfRepsが繰り返し回数で、既定値は2です。0や-1のような非正の値を渡すと、キャンセルされるかコンポーネントが消えるまで無限に繰り返します。第3引数reverseにtrueを渡すと、1回ごとに逆再生して行ったり来たりします。既定値はfalseです。なおreverseはwithSpringのようなアニメーション関数には効きますが、withSequenceのようなモディファイアには効きません。
これを使うと四角形は左右に揺れますが、アニメーションが終わっても元の位置に戻りません。シェイクとしてはもう一歩です。
連結する
始点を左にずらし、終わったら中央へ戻したい。こういうときはwithSequenceでアニメーションをつなげます。
offset.value = withSequence(withTiming(50), withTiming(0));withSequenceは渡したアニメーションを順番に実行します。前のアニメーションが終わると次が始まります。実行したい順にアニメーションを並べるだけです。
シェイクに当てはめると、まず左へ振り、次に左右へ5回揺らし、最後に中央へ戻す、という3段構えにできます。
遅らせて始める
仕上げに、動き出す前のわずかな「ため」を作ります。ここでwithDelayの出番です。
offset.value = withDelay(500, withTiming(0));第1引数delayMsがアニメーション開始までの遅延時間(ミリ秒)、第2引数delayedAnimationが遅らせたいアニメーションです。
3つのモディファイアを重ねると、次のシェイクアニメーションになります。ボタンを押すと、少し待ってから左右に揺れ、中央へ戻ります。
「コード」タブを見ると、withDelayがwithSequenceを包み、withSequenceの中でwithRepeatが使われている入れ子の構造が分かります。モディファイアはこのように重ねて組み合わせられます。
範囲を制限する
withClampは、アニメーションの動きを指定した範囲内にとどめるモディファイアです。withSpringと組み合わせて使います。
sv.value = withClamp({ min: -1, max: 1 }, withSpring(0));第1引数のconfigはmin(到達できる最小値)とmax(最大値)を持つオブジェクトで、第2引数にはクランプしたいバネアニメーションを渡します。バネがこの範囲を越えそうになると、そこで止まります。
慣性で減速する
withDecayは、摩擦のある物体のように、初速から少しずつ減速して止まる動きを作ります。
sv.value = withDecay({ velocity: 500, deceleration: 0.998 });velocityが初速、decelerationが速度の落ちる割合(既定値0.998)です。clampで範囲を区切ったり、rubberBandEffectで範囲を越えたときにゴムのように跳ね返らせたりもできます。
withDecayが本領を発揮するのは、指を離した瞬間の速度をそのまま初速として渡し、スワイプの勢いを引き継いで減速させる場面です。そのためジェスチャーとの組み合わせが前提になります。実際に動かす例は、第3部の「ジェスチャーと組み合わせる」で扱います。
この章のまとめ
- モディファイアはアニメーションを包んで、繰り返し・連結・遅延といった振る舞いを足します
withRepeatは繰り返し、withSequenceは連結、withDelayは遅延を担います- モディファイアは入れ子にして組み合わせられます
withClampは動きの範囲を制限し、withDecayはジェスチャーの勢いを受けて減速します
次章では、共有値から新しい値を派生させるuseDerivedValueと、値を別の範囲へ変換するinterpolateを使って、1つの入力を複数の表現へ展開します。