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】URP対応のAssetのPrefabがピンク色になる件

1 はじめに2 レンダリングパイプラインとは2.1 ビルトインレンダリングパイプライン2.2 ユニバーサルレンダリングパイプライン3 URPの設定手順3.1 URPのインストール3.2 URPのアセッ ...

【Unity】AssetStoreで取得したCharactorにThirdPersonCharacterの動きを設定する。

1 はじめに2 AssetStoreからインポート2.1 RPG Hero PBR HP Polyart2.2 StandardAssets3 ThirdParsonCharactorの動きについて3 ...

UserNotificationsの使い方について

1 はじめに2 UserNotificationsフレームワーク3 基本実装3.1 デリゲートの設定3.2 ユーザー許可3.3 デバイストークン取得後3.4 バックグラウンドで通知受信3.5 フォアグ ...

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

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

C# マルチキャストデリゲートの備忘録

1 はじめに2 C#のデリゲートについて2.1 デリゲートの定義3 マルチキャストデリゲートについて3.1 追加方法3.2 削除方法4 さいごに5 おすすめ書籍 はじめに こんにちはsuzukiです。 ...

フォロー

blog-page_side_responsive

2019年9月
1234567
891011121314
15161718192021
22232425262728
2930  

アプリ情報

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