Tech

ReactNativeでアニメーションの実装

投稿日:

はじめに

こんにちは、nukkyです。
今回はReact Nativeでよりリッチなアプリを作成するためにアニメーションを扱うライブラリ「react-native-animatable」と「lottie-react-native」を使ってみたいと思います。

準備

インストールしたいプロジェクトで以下のコマンドを実行します。

実装

react-native-animatableをインポートします。

アニメーションしたいコンポーネントに対して以下のようにするだけでアニメーションが実行されます。

アニメーションをループしたい場合は以下、

イベントを通しての実行

React Nativeのrefを使ってユーザーイベントが発生した時、アニメーションが実行されるように作れます。

アニメーションについて

アニメーションはreact-native-animatableの公式githubでアニメーション例と一緒に確認できます。
https://github.com/oblador/react-native-animatable
使えるアニメーションで代表的なのは下記になります。まだまだ使用できるアニメーションはあるので公式で確認してみてください。

  • bounce
  • flash
  • jello
  • pulse
  • rotate
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • bounceIn
  • fadeIn
  • fadeOut
  • zoomIn

lottie-react-native

react-native-animatableはコンポーネントに対してアニメーションを行うライブラリでしたが、ローディング画面やスプラッシュなどでgifのようなアニメーションを簡単に実装できる「lottie-react-native」も使ってみたいと思います。

Lottieとは

LottieはAfter Effectsで作成したアニメーションを、Bodymovinというオープンソースの拡張機能を使ってjson形式にエクスポートされたアニメーションデータを使用します。
アニメーションがjson形式なので、クロスプラットフォームで動かしやすい、ファイルサイズが大きくなりにくい、ネットワーク経由でも読み込みが可能になる、キャッシュを効かせやすい、など、様々なメリットがあります。また、LottieはAndroid、iOS、Web、React Nativeで扱うことができ「lottie-react-native」はその名の通りLottieをReact Nativeで扱うためのライブラリになります。

準備

インストールしたいプロジェクトで以下のコマンドを実行します。

インストールが完了したら以下のコマンドを実行します。

実装

アニメーション用のjsonファイルを準備します。LottieFilesというサイトからサンプルを取得できるのでこちらから使用していきます。使用するアニメーションが決まりましたら「assets」以下に配置してください。

まずはライブラリと上記で配置したjsonをインポートします。

lottie-react-nativeでは、LottieViewコンポーネントを呼び出しアニメーションさせます。アニメーション発火のタイミングで使用するので、refで参照を付けておきます。

任意のタイミングでアニメーションを発火させます。今回はcomponentDidMountのタイミングでアニメーションを発火させています。このコードだけで、アニメーションを実装できます。簡単ですね!

さいごに

やはりアニメーションをさせるとグッとアプリぽくなって良いと思います。

おすすめ書籍

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE) React.js&Next.js超入門

blog-page_footer_336




blog-page_footer_336




-Tech
-,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

【Unity】StarterAssetのThirdPersonControllerにアニメーションを追加する

1 はじめに2 Animationの追加3 Animatorの編集4 コードの修正5 さいごに6 おすすめ書籍 はじめに こんにちはsuzukiです。今回はThirdPersonControllerに ...

【Unity】AnimationControllerの基本的な使い方

1 はじめに2 事前準備2.1 キャラクター2.2 アニメーション3 Sceneに追加と設定4 AnimationController5 使い方5.1 State5.2 Transition5.3 P ...

MLKitで使えるTensorflow Liteについて調べてみた

1 はじめに2 そもそもTensorflowとは3 そしてTensorflow Liteとは4 Tensorflowの環境構築4.1 pyenv, pyenv-virtualenvをインストール4.2 ...

ReactNativeデータ永続化

1 はじめに2 データ永続化の方法3 AsyncStorage4 react-native-async-storage4.1 インストール4.2 実装5 Realm5.1 インストール5.2 redu ...

Go言語

GoでSMF(MIDI)ファイルを読み込んでみた

1 はじめに2 MIDIとは?2.1 SMFファイルについて2.1.1 Tickと分解能2.1.2 トラックチャンク3 gomidiを使ってSMFファイルを読み込む3.1 gomidiの導入3.2 実 ...

フォロー

blog-page_side_responsive

2019年9月
1234567
891011121314
15161718192021
22232425262728
2930  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。