ReactNativeでAnimated.Valueの挙動をグラフ化してみた

先日アニメーションを初めて実装したのですが、 アニメーションが動いているときに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を操作しますが、これらをいじった時のデモは、以下などが参考になると思います。

timing(easing)

• Easing Function 早見表

spring

• Rebound Spring Animations for Android