動きを調整する

withTimingとwithSpringに設定オブジェクトを渡し、durationやeasing、mass・stiffness・dampingで動きの表情を自在に調整します。

前章まででwithSpringとwithTimingを使ってきました。どちらもそのまま渡すだけで自然な動きになりますが、第2引数に設定オブジェクトを渡すと、動きの表情を細かく調整できます。この章では2つの関数の設定を見ていきます。

ReanimatedにはwithTiming・withSpring・withDecayという3つのアニメーション関数があります。withDecayはジェスチャーと組み合わせて使う場面が多いので、第3部の「ジェスチャーと組み合わせる」であらためて扱います。ここではwithTimingとwithSpringに集中します。

withTimingは時間とイージングで進み方を決め、withSpringは目標を越えた振動を物理パラメータで収束させます。

withTimingを調整する

withTimingは、時間(duration)と緩急(easing)にもとづいてアニメーションを作ります。設定オブジェクトには主にdurationとeasingの2つを渡します。

import { withTiming, Easing } from "react-native-reanimated";

withTiming(sv.value, {
  duration: 300,
  easing: Easing.inOut(Easing.quad),
});

durationはアニメーションが目標値に達するまでの時間をミリ秒で指定します。既定値は300です。easingは指定した時間の中で、動きをどう加速・減速させるかを決めます。たとえば最初はゆっくり始まり、途中で速くなり、終わり際にまたゆっくりになる、といった調整ができます。既定値はEasing.inOut(Easing.quad)です。

次のプレイグラウンドで、durationスライダーとeasingの選択を動かしてみてください。四角形をタップすると左右に動きます。linearと既定のinOut(quad)を見比べると、緩急のありなしがはっきり分かります。

Easingモジュールには、すぐ使えるイージング関数がひととおりそろっています。

• back いったん少し後ろに引いてから前へ進む
• bezier(x1, y1, x2, y2) 3次ベジェ曲線
• bounce 弾むような動き
• circle 円状の曲線
• cubic 3次関数
• ease ゆるやかな慣性のある動き
• elastic(bounciness?) バネのような動き
• exp 指数関数
• linear 直線的で等速な動き
• poly(n) 4次・5次など高次の関数
• quad 2次関数
• sin サインカーブ

これらはin・out・inOutという補助関数と組み合わせられます。inは関数をそのまま前向きに、outは逆向きに、inOutは左右対称にします。たとえばEasing.inOut(Easing.quad)は、quadを対称にして始点と終点の両方をなめらかにします。

主要なイージング関数をカーブと実際の動きで見比べたい場合は、イージング関数ギャラリーにまとめてあります。

durationとeasingのほかに、reduceMotionという設定もあります。端末の「視差効果を減らす」などのアクセシビリティ設定にアニメーションをどう反応させるかを決めるもので、既定値はReduceMotion.Systemです。

withSpringを調整する

withSpringは物理ベースのアニメーション関数で、withTimingとはしくみが大きく異なります。動かす対象が本物のバネにつながっているかのように振る舞い、その物理的なふるまいが動きを「それらしく」見せます。

バネを調整するとき、よく触るのはmass(質量)・stiffness(硬さ)・damping(減衰)の3つです。

import { withSpring } from "react-native-reanimated";

withSpring(sv.value, {
  mass: 1,
  stiffness: 100,
  damping: 10,
});

3つの値は互いに影響するため、違いを確かめるときは残りの2つを固定します。

massは対象を動かしたり止めたりする難しさに影響します。質量が大きいほど慣性が増し、もっさりした動きになります。stiffnessはバネの弾みやすさで、硬いバネほどキビキビ跳ねます。dampingは振動を抑える抵抗で、値が大きいほど跳ね返りが小さくなります。空気中で跳ねるバネと水中で跳ねるバネの違いを想像すると分かりやすいかもしれません。

もう少し正確に捉えると、massは加速と減速のしにくさ、stiffnessは目標値へ引き戻す力、dampingは揺れのエネルギーを失わせる抵抗です。dampingは大きいほど揺れを抑えますが、大きくしすぎると目標値へ近づく動き自体が遅くなります。「大きいほど速い」パラメータではありません。

前章までのプレイグラウンドで、この3つの効果を確かめられます。スライダーを動かして、キビキビした動きとゆったり揺れる動きの差を試してみてください。

withSpringの設定を整理する

withSpringの設定には、物理ベースの指定と、時間ベースの指定の2系統があります。

物理ベースで使う設定はこちらです。

時間ベースで使う設定はこちらです。

どちらの系統でも共通して使える設定もあります。mass(既定値4、小さくすると速くなる)、velocity(初速)、overshootClamping(目標値を越えて跳ねるかどうか、既定値false)、clamp(動きの範囲を制限する)、reduceMotionなどです。clampで範囲を制限すると、その範囲を越えそうなときにdampingRatioが下げられ、跳ねが弱まります。

この章のまとめ

• withTimingとwithSpringはどちらも第2引数に設定オブジェクトを取ります
• withTimingはdurationとeasingで調整します。イージングはEasingモジュールから選べます
• withSpringはmass・stiffness・dampingなどで調整します。物理ベースと時間ベースの指定は混在させません

次章では、これらの関数を組み合わせて、繰り返しや連結といったより複雑な動きを作るモディファイアを扱います。

この章のもとになった公式ドキュメント

• Customizing animations
• withTiming
• withSpring