Go to Qiita Advent Calendar 2024 Top
LoginSignup
71
55

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Life is Tech !Advent Calendar 2018

Day 9
@Seil(Kayashima Yuki)

Lottieを利用したアニメーション作成 & 実装

Last updated at Posted at 2018-12-09

アニメーションってどんなの？

こんなのです
20181129065047_img20181129-19-b4m6se.gif

よく使われているのは ActivityIndicator と呼ばれるもので、くるくると回っているように線の色が変化するアニメーション
20181026092025_img20181026-10-1k6ofcj.png

なんでアニメーションが必要なの？

  • ユーザーが操作をしない時間（できない時間）の体験を退屈なものにしないため
  • サービスの状態をより分かりやすくするため（読み込みなど）
  • ブランド認識を持ってもらうため

どう作っているのか

AfterEffectsで作成したアニメーションをLottie というライブラリを使用してアプリ上で動かせるようにしています。

Lottieって？

20180602180750.jpg

  • Airbnbが作ったアニメーションのレンダラー
  • アニメーションを簡単にiOS, Android, Webで簡単に再生できる

Lottieを使うメリット

アニメーションを表示する方法としては、直接画像ファイルを表示する方法もありますが、コード上で制御がしづらかったり、画質が悪かったり、ファイルの容量がどんどん増えてしまいます。
ただ、Lottieはjsonファイルがアニメーションの情報になっているので、ファイルのサイズがかなり小さく、コード上でアニメーションの制御も可能です。

簡単な流れ

Illustrator > AfterEffects > Bodymovin > 実装
という感じで、

  1. Illustrator
    アニメーションの元になるイラストを作成する

  2. AfterEffects
    1 のイラストをインポートして動きを作る

  3. Bodymovin
    2 で作ったアニメーションを json 化する（AE 上で）

  4. 実装
    アニメーションを入れたい箇所を編集して呼び出す

というように作っています。

今から簡単なアニメーションを作ってみましょう！

作り方

必要なソフト

簡単な流れ では、まず Illustrator を使ってイラストの作成という手順がありましたが、今回は簡単なアニメーションを作ってもらうので、必要ありません。

  • AfterEffects
  • ブラウザ
    ここでは Chrome を使って紹介します

アニメーションを作成する

まず、AfterEffects を立ち上げてください。

持ってない人はこちらの体験版をダウンロードしてください。

コンポジションを作成する

コンポジション設定は、
コンポジション名 loading
幅 400px
高さ 400px
フレームレート 30
解像度 フル画像
開始タイムコード 0:00:00:00
デュレーション 0:00:02:00
スクリーンショット_2018-12-09_1_01_22.png

スクリーンショット_2018-12-09_1_01_48.png

パネルの配置

今回は デフォルト にしてください

スクリーンショット_2018-12-09_1_02_09.png

円を作成

まず、左上の図形のアイコンを選択して、 楕円ツール を選択し、黒い部分をドラッグして円を 配置してください

スクリーンショット_2018-12-09_1_03_48.png

次に、コンテンツの追加で パスのトリミング を選択してください

スクリーンショット_2018-12-09_1_05_47.png スクリーンショット_2018-12-09_2_41_39.png

次に、塗り潰しを選択して、削除してください。
更に、線を選択して
線幅 25.0
カラー #ffffff
にしてください。
スクリーンショット_2018-12-09_1_06_47.png

動きの追加

遂に動きの設定をしていきます。
0:00:00:00 の時は...

  • 開始点 0%
  • 終了点 0%

0:00:01:00 の時は...

  • 開始点 100%
  • 終了点 0%

0:00:01:29 の時は...

  • 開始点 100%
  • 終了点 100%

にしましょう。

線の端が角張っているので、丸くするために、
線端 丸型
に変更しましょう。

スクリーンショット_2018-12-09_1_09_33.png

動きの違和感を直す

一度 spaceキー を押して再生してみてください。
線が完全に消えてしまう瞬間があり、不自然なアニメーションになってしまっていると思います。

ここで、線が 完全に消えないように、
0:00:00:00 の時は...

  • 開始点 10%
    に変更しましょう。

さらに、終了点のひし形をドラックして完全に閉じることのないようにしましょう。

スクリーンショット_2018-12-09_1_18_40.png

今のままではループのタイミングで不自然な動きになってしまうので、
0:00:01:29 の時は...

  • 終了点 10%
    に変更しましょう。
スクリーンショット_2018-12-09_1_18_47.png

まだループのタイミングで変な動きをしてしまうので、開始の 線の位置を調整します。

0:00:00:00 に合わせてガイドを設定します。
⌘ + R で線の左端にガイドを作成しましょう。

スクリーンショット_2018-12-09_1_19_46.png

次に、0:00:01:29 に合わせてください。
先ほど作成したガイドに合うようにオフセットの値をドラックで調整しましょう。
調整した後はストップウォッチのアイコンを選択して、設定しましょう。

0:00:00:00 の位置も変わってしまったので、この時は 0x+0.0° にしましょう。

スクリーンショット_2018-12-09_1_20_00.png

動きを滑らかにする

開始点 と 終了点 のひし形をドラックで全て選択しましょう。
（オフセット まで選択しないように気をつけてください）
選択した後に右クリックでイージーシーズを選択してください。
spaceキー を押して再生してみましょう。
動きが滑らかになったと思います。

スクリーンショット_2018-12-09_1_20_34.png スクリーンショット_2018-12-09_1_20_50.png

微調整をする

再生すると気づいた人もいるかと思いますが、一瞬 円が 閉じてしまいそうになっているタイミングがあると思います。
これはイージーイーズの効果のせいです。詳しくはここでは説明しないので、気になる人はググってみてください。

スクリーンショット_2018-12-09_1_21_57.png

ひし形の場所を調整して、ある程度隙間を広げられたら再生して確かめてみてください。
問題がなければ、これでアニメーションは完成です！

スクリーンショット_2018-12-09_1_23_04.png

アニメーションを json 化する

bodymovin という サービスを使って、Lottie で使えるようにアニメーションを json 化しましょう。

Bodymovin をダウンロードする

bobdymovin はここからダウンロードしてください。

スクリーンショット_2018-12-09_1_24_48.png

json を書き出す

bodymovin のパネルの中の右にある ... を選択して、デスクトップに保存するよう設定しましょう。
次に、左の丸を選択して、書き出すコンポジションを設定しましょう。
最後に、緑の render ボタンをクリックして、書き出しましょう。

スクリーンショット_2018-12-09_1_24_48-2.png

デスクトップにこのような json ファイルが配置されていれば成功です。

スクリーンショット_2018-12-09_1_35_01.png

実装する

実際にスマホ上で動くように実装していきましょう。
せっかくなので、12/4 に ニーザが投稿したreact native と簡単 API で作るお天気アプリにも出てくる react native で実装をしましょう。

今回は 簡単に体験して貰いたいので、Expo というサービスを利用して、 ブラウザのみで実装していきましょう。

Expo を利用する

ここから Lottie のサンプルデータを開いてください。
下のような画面になったでしょうか？白っぽい色の カラーテーマでも問題はありません。

スクリーンショット_2018-12-09_1_36_58.png

開けたら、右上の Run ボタンを選択して、QR Code を表示してください。
下のような画面になったら、スマホで読み込んでみてください。

スクリーンショット_2018-12-09_1_37_44.png

読み込む際には下のアプリをインストールしてください。

IMG_4F5EAF6EC56F-1.jpeg

下のような画面をスマホで見ることが出来たでしょうか。

IMG_4142.PNG

アニメーションがズレてしまっていますね。
これは Lottie の バグなので、コードを追加して修正しましょう。

コードを編集する

まずは、右クリックをして Format Document を選択して、コードの 整形をしてください。
さらに、それぞれの行にしたのコードを 書き加えてください。

20 行目

<View
    style={{
        width: 300,
        height: 300,
    }}
>

39 行目

</View>
スクリーンショット_2018-12-09_2_13_52.png

このように中央に寄ったでしょうか？

IMG_4143.PNG

json ファイルをアップロードする

この部分には json ファイルの置き場所が書かれています。
緑の文字の 部分をブラウザに貼り付けてみると、json ファイルがネット上に配置されているのが分かると思います。

スクリーンショット_2018-12-09_1_41_26.png

今回作成した json ファイルもネット上に配置しましょう。
まずは gist を開きましょう。

スクリーンショット_2018-12-09_1_40_23.png

Github Gist を開くとこのような画面になっているかと思います。
下の青い枠には loading と記入してください。

その下の広い部分はデスクトップに書き出した json ファイルを、テキストエディタ等で開き、中身をコピーして貼り付けてください。
貼り付けたら右下の Create public gist を選択してください。

スクリーンショット_2018-12-09_1_40_52.png

下のような画面になったでしょうか？
なっていれば、URL をコピーしてください。
コピーした URL を先ほどの緑のテキストの部分と置き換えます。
自分が作ったアニメーションが実機で確認できたでしょうか？

スクリーンショット_2018-12-09_1_41_10.png

あとはローディングらしく、小さめのアイコンにして黒い画面の上で再生してみましょう。
width: 400 -> width: 100
height: 400 -> height: 100
に変更しましょう。
さらに、背景の色を #000 にしましょう。

スクリーンショット_2018-12-09_2_18_04.png

最後に全体の背景色を黒にしましょう。

スクリーンショット_2018-12-09_2_19_23.png

このような画面になっていれば成功です！！！
本当にお疲れ様でした！！

IMG_4147.PNG

あとがき

平成最後&メンター最後の Advent Calendar カレンダーなので、書いてみました。
どうだったでしょうか？
自分は書いている途中、LiT!で教科書を製作していた時を思い出してエモくなってました。
この記事を読んでアニメーションに興味を持ってもらえたら嬉しいです。

71
55
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
71
55

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?