先日アニメーションを初めて実装したのですが、 アニメーションが動いているときにAnimated.Value の値がどんな感じで遷移しているのか、実際のアニメーションの動きに合わせてグラフ化することに興味を持ったので、やってみました。
グラフのアニメーションは最後の方にあるので、読み飛ばしてもらって構わないです。
※ 単にグラフ化しただけで、考察とかあるわけではないです。
この記事の対象
- React Nativeの
Animatedライブラリを使ってアニメーションを実装している、または実装しようとしているけど、「よく分かんないな〜」な人
この記事で分かるようになる事
- Animatedライブラリの超基礎的な仕組み
-
Animated.timing()とAnimated.spring()を使った時のAnimated.Valueの推移
この記事で触れない事
- Animatedライブラリの使い方やパターンの詳細
詳細は、公式や以下などご参照ください。
- React Native Animations Using the Animated API
- Timing, Spring & Decay · Rangle.io: React Native Workshop
Animatedの超基礎的な仕組み
そもそもAnimatedを使った事がない方向けに、 Animated.Valueが何なのかっていうことをさらっと説明しておきます（詳しいことは分からないです）。
アニメーションと言うからには、対象に何かしらの「変化」があります。
対象コンポーネントの透過度だったり、x座標だったり、横幅だったりが変化します。
例えば透過度を変えて、最初は透明度100%だけど徐々に透明度を0にしたい場合には、 opacity の値を0から1に変えていけば良いです。
この時の「opacityの値」がAnimated.Valueで、初期値が0の場合には
state = {
fadeAnim: new Animated.Value(0), // Initial value for opacity: 0
}
のように定義し、
そのopacity値を「10秒かけて1にする」時には
//componentDidMountと同時にアニメーションをスタートさせる場合
componentDidMount() {
Animated.timing( // 時間軸に沿って変化させる
this.state.fadeAnim, // アニメーションさせる値(value)
{
toValue: 1, // Valueを1まで増やす
duration: 10000, // 10秒かけて
}
).start(); // スタートする
}
のようにします。
あとはこの値を、 Animated.Image などのアニメーション用コンポーネントのstyle opacity に指定してあげればokです。
<Animated.Image
style={{
opacity: this.state.fadeAnim, //opacityが上のルールに沿って0から1に増えていく（つまり10秒かけて見えるようになる）
}}
source={{ uri: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png' }}
/>
Valueの値をグラフ化しみてた
ようやく本題。
アニメーションでよく使うらしい、 Animated.timingとAnimated.springのvalueの推移をグラフにすると以下のようになりました。
上がtimingで、下がspringです。
timing
- 初期値: 0
- オプション:
- toValue: 1
- duration: 5500
spring
- 初期値: 0
- オプション:
- toValue: 1
- friction: 0.3
へ〜ってなるだけですよね。
まぁこのグラフの軌跡は当たり前の結果なので、だから何と聞かれても「興味本位にやってみただけなので。。。」としか言えません。特に考察があるわけではありません。
ちなみにグラフ化はreact-native-svg-chartsを使い、グラフのコンポーネントを
Animated.createAnimatedComponent()を使ってアニメーションコンポーネントに変換しています。
ソースコードは一応GitHubにあげています。
参考資料(その他のデモ)
アニメーションのvalueの「変化の仕方」を制御するには、timingの場合にはeasingを、springでは frictionやtensionを操作しますが、これらをいじった時のデモは、以下などが参考になると思います。