先日、Animatedを使ったアニメーションを無限ループさせる例を以下の記事で紹介した。

http://chusotsu-program.com/react-native-animated-loop

猫のイラスト画像をグルグル回転させるアニメーションなのだが、今回はこのアニメーションにEasingを適用し、動きに変化をつけてみる。

まず、Easingが適用されていないアニメーションを見てみよう。

回転の速度が一定でないなど、少し違和感があるのが分かる。

Easingコンポーネントの使い方

Easingを使用する際は、まずコンポーネントを読み込む必要がある。

import {
  ...
  Easing
} from 'react-native';

そしてAnimated.timingのオプションとして、任意のeasing値を指定する。

animated() {
  Animated.timing(
    this.state.degree,
    {
      toValue: 1,
      duration: 4000,
      easing: Easing.linear
    }
  ).start(() => {
    this.setState({degree: new Animated.Value(0)})
    this.animated()
  });
}

Easingには様々な種類があるが、そのうち代表的なものをいくつか紹介する。

Easing.linear

最初から最後まで速度が変わらない、滑らかなアニメーション。

Easing.ease

ゆっくりスタートして加速しながら、最後は滑らかに減速するアニメーション。

Easing.exp

指数関数的に速度が上がっていくアニメーション。
最初はゆっくり動作し、急激に加速する。