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


関連記事

入門スクラム〜スクラムフレームワーク

1 はじめに2 スクラムの特徴2.1 シンプルなフレームワークであること2.2 素早い反復を繰り返すこと2.3 検査・適応・透明性3 スクラムの役割3.1 プロダクトオーナー3.2 スクラムマスター3 ...

React+axiosでhttpリクエスト

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

ReactNative開発のスタート、シミュレータでのデバッグ

1 はじめに2 改めてシミュレータの起動3 表示内容を変更してみる3.1 App.js3.2 表示テキストの変更3.3 シミュレータの更新「command + R」4 デバッグメニュー4.1 Real ...

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

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

icon

ドキュメント作成の技術「テクニカルライティング」とは

1 はじめに2 テクニカルライティングとは3 少しでも分かりやすく、簡潔にする3.1 一文一義3.2 長くしすぎない、繋げすぎない3.3 長さの目安は?4 伝わりやすく書く4.1 まず主題を書く4.2 ...

フォロー

follow us in feedly

page_side_300rect

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

アプリ情報

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