Nativeを使ってアプリにアニメーションを組み込みます。instagramやFacebookのいいね!を押した時のアニメーションを実装していきます。これだけでもアプリの雰囲気が大きく変わるのでぜひやってみてください。実は、expoはデフォルトでLottieをサポートしています。Nativeには最初から簡単にアニメーションを使用することができます。今回は、Instagramのいいねのアニメーションを実装します。クリックしたら色がついて、もう一度クリックしたら解除されます。Lottieとは?そもそもLottieとはairbnbが開発した、ネイティブアプリに高品質のアニメーションを簡単に作成することができます。Nativeアプリ用の複雑なアニメーションを作成する場合、アニメーションの作成は困難で時間のかかるプロセスでした。Effectsアニメーションをリアルタイムでレンダリングし、ネイティブアプリが静止画像を使用するのと同じくらい簡単にアニメーションを使用できるようにします。Effectsの拡張機能からJSONファイルとしてエクスポートされたアニメーションデータを使用します。Effectを使うことで自分でオリジナルのアニメーションを作りアプリに実装することができます。アニメーションを作る方法はググったりyoutubeで検索したら出てくると思います。lottieで用意されているものでも十分すぎるほどあります。サンプルには、基本的なラインアート、キャラクターベースのアニメーション、複数のアングルとカットを使用した動的なロゴアニメーションなど、さまざまな種類のアニメーションのソースファイルが存在し、みているだけでも楽しいです。さぁ、早速作っていきましょう。Nativeの環境構築はこちらで済ませておいてください。World!!までのチュートリアルを解説【所要時間30分】Lottieアニメーション一覧はこちらにまとまっています。会員登録をしなければアニメーションをダウンロードすることはできません。会員登録をしましょう。実際に使用するときは、この中から好きなものを選んでください。今回はいいね機能の実装なので、ハートを使います。検索窓で”heart”と検索すればたくさん出てきます。これらの中から適当に一つ選んでください。今回は以下のアニメーションを選びます。するとこのようにひたすらアニメーションが流れるモーダルが出現します。アニメーションをダウンロードするには右上の”Download”を押してください。下にスクロールすると、このような項目があります。Colorはアニメーションの背景を変更できます。Colorsを選択すると、色を変更できる画面が新たに開きます。Colorsはイラストの色を変更することができます。animationsというディレクトリを作成してください。その中に先ほどダウンロードしたjsonファイルを入れます。ファイル名は今回はlike.jsonにしておきます。WPでvue.jsのハイライトが効かないので少し見辛いです。早く対応してくれないかな・・・。}};</script>解説ほとんどvueなので全体像はわかると思います。Nativeで使われている、ビューをタッチできるようにするコンポーネントです。playAnimation()”、この書き方気になった方もいると思います。onPress=”playAnimation”、こうじゃないのかって。これは、ReactNativeがJSXのrenderメソッドの中でプログラムに遭遇したら、表示されているプログラムを即実行してしまうからです。playAnimation()”のように関数として定義しておくと、クリックされたタイミングで発火します。ここは説明が難しいです。playAnimation()”の形にしましょうってことです。うまく説明できなくてすみません。lottieコンポーネントの変数の設定は色々あります。今回はループさせたくはないので、:loop=”false”にします。require('./animations/like.json');先ほどのlottieアニメーションのjsonファイルを読み込みま、aniamtionとして定義します。},this.$refs.lottieAnimation.play()でアニメーションを開始します。this.$refs.lottieAnimation.reset()でアニメーションを初期化します。クリックされているかどうかの判定をするのでanimationで分岐しています。アニメーションの再生時間も制御することができます。ここは時間を細かく変えながら微調整していくのが良いと思います。120);createdのタイミングでlottie_animationに代入します。mountedのタイミングではエラーになります。objectのエラーが出てきます。vue.jsのライフサイクルフックでcreatedはDOMが生成される前、mountedはDOMが生成された後のフックなのでmountedのタイミングではエラーになってしまいます。完成です!まとめ実際にいいね!機能を実装するときはもう少しだけ複雑になりますが、基本はこれで完成です。Nativeでアプリにマップを表示させてマーカーを設置するまで。part.2.htaccessのできることについてまとめる。【随時更新】vue.jsでよく使うフィルタープロフィールこのサイトを運営しているイノカワです。静岡でフリーランスをやっています。コードを書くのが大好き。いろんな技術に触れて日々気づいたこと・感じたこと・詰まったこと・生活のことを書いています。技術においては雑食です。