【React Native】文字や画像などにアニメーションを追加するライブラリ「react-native-animatable」

タイトル通り、今回は React Native のライブラリ「react-native-animatable」についてです。
GIF アニメーションの画像を使わずに、PNG 画像などにアニメーションを追加することができます。

GitHub のページはこちらから。

oblador/react-native-animatable: Standard set of easy to use animations and declarative transitions for React Native
https://github.com/oblador/react-native-animatable

まず、下記コマンドでライブラリをプロジェクトにインストールします。

npm install react-native-animatable --save

上記が完了したら、あとはお好きな画像等を用意して下記のように実装します。

<Animatable.View
  animation='bounce'
  iterationCount="infinite"
  iterationDelay={500}>
  <Image
    source={require('画像パス')}
    style={{ width: 150, height: 150 }}
    resizeMode='contain' />
</Animatable.View>

上記コードでは、アニメーションに bounce を指定し、ゴムボールがポヨンと跳ねるような動きを付けています。
アニメーションの種類は、上記の GitHub の下の方に GIF アニメーション画像で掲載されていますので、こちらをご参考にしてください。

それ以外のプロパティだと、iterationDelay を指定して、アニメーションの実行間隔をあけています。
また、iterationCount には infinite を指定して、アニメーションの実行を無限に繰り返すようにしています。
ちなみに、iterationCount に 5 などの数値を指定すると、5回アニメーションを実行して、そのあとは静止します。

基本的な使い方は以上です。
実際にプロジェクトに追加して実行してみたところ、子要素に指定した画像がバウンドする際に適度に縮んだり伸びたりして、かなり良い感じです！
ちょっとしたアニメーションを追加したり、要素を目立たせたいときに便利ですね。

以上、React Native で画像やテキストにアニメーションを追加できるライブラリ「react-native-animatable」のご紹介でした。
ご参考になれば幸いです。