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超入門

page_footer_300rect




page_footer_300rect




-Tech
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

ReactNative画面遷移

1 はじめに2 React Navigation3 React Navigationのインストール4 実装5 さいごに6 おすすめ書籍 はじめに こんにちはnukkyです。 ブログを書きながらアプリを ...

[Unity] Terrain(地形)を使ってみた

1 はじめに2 Terrainの追加方法3 Terrainの使い方4 Create Neighbor Terrain5 Paint Terrain5.1 Raise or Lower Terrain5 ...

React+axiosでhttpリクエスト

1 はじめに2 axiosとは2.1 XMLHttpRequest2.2 Promise3 準備4 実装4.1 resultsの中身4.2 エラーハンドリング4.3 カスタムヘッダーの付与5 Reac ...

[C#]Genericsの使い方をまとめてみた。その1

1 はじめに2 Genericsとは3 Genericsの例3.1 Genericsを使わない場合3.2 Genericsを使う場合4 Genericsのメリット5 さいごに6 おすすめ書籍 はじめに ...

[C#]Genericsの使い方をまとめてみた。その2

1 はじめに2 Genericsの構文3 型パラメーター4 制約条件5 規定値6 さいごに7 おすすめ書籍 はじめに こんにちはsuzukiです。ブログを書いているときAndroid10が発表され、ア ...

フォロー

follow us in feedly

page_side_300rect

2019年9月
« 8月 10月 »
1234567
891011121314
15161718192021
22232425262728
2930 

アプリ情報

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