L O A D I N G

SNS

MENU

CLOSE

0422-70-3802

C O N T A C T

1
EN

HELLO!

JP

CONTACT

お問い合わせ内容を入力し、プライバシーポリシーをご確認の上、NEXT STEPSUBMITボタンより確認画面へ進んでください。

  • ✳︎マークは必須項目となります。
  • お問い合わせの内容に合わせ、詳細をご連絡ください。
  • 営業日、三日以内に担当者より返信させていただきます。
  • 営業目的や人材紹介目的の場合、返信を控えさせていただきます。

B A C K

✳︎
お問い合わせ内容を選択してください
お仕事のご依頼
ステイフルライフストアへのお問い合わせ
✳︎
項目を選択してください
ブランディング依頼
ウェブ制作依頼
グラフィックデザイン依頼
その他スポットでのご依頼
この項目は入力できません
✳︎
✳︎
✳︎
✳︎
プライバシーポリシーに同意しました。
  • STEP01
  • STEP02
  • STEP03

C L O S E

B A C K

S U B M I T

N E X T S T E P

CONTACT COMPLETE

お問い合わせありがとうございます。
お問い合わせ内容を確認させていただき次第、担当者より返信させていただきます。

THANK YOU
CLOSE

NEWS

BLOG May.15.2019

アプリのアニメーションをLottieでつくる

by Staff

SHARE

先日、Lottie(ロッティー)を使用したアニメーション制作をする機会があったので、備忘録も兼ねて所感を書かせていただきます。

これから制作を始める方の助けになれば幸いです。

実際にLottieに挑んだプロジェクトはこちら。ご参考までによかったらご覧になってみてください。

【HELLO SCOOTER サービスサイトプロジェクト】
https://uniel.jp/project/hello-scooter/

Lottieとjson

Lottieとは、特にモバイルアプリでAfter Effectsで制作したアニメーションを綺麗に再生できるアニメーションライブラリ(≒仕組み)のことです。

公式サイトには、Lottieで制作された様々なアニメーション作品が投稿されています。

かわいいローディングや、アイコンのアニメーションがたくさんあって、見ているとワクワクしてきますよ。
https://lottiefiles.com/popular

そして、このLottieでアニメーションを表現する場合、jsonという形式のファイル(以下json)を用います。

jsonは感覚としてはsvgと似ており、ざっくりいうと「JavaScriptの中でオブジェクトを表現するためのコードが書かれたファイル」です。この記事では、After Effectsで作ったアニメーションを正しくjsonで出力するまでのポイントを書いていきます。

After Effectsでjsonを出力する準備をする

はじめに、After Effectsだけではjsonを出力できないので、「Bodymovin」というプラグインを入れて環境を整えます。

下記URLからプラグインを導入できます。
https://www.adobeexchange.com/creativecloud.details.12557.html

※上記からの導入がうまくいかない場合は、ZXP Installerを用いた方法を試してみてください。

インストールが完了したら、タスクバーの [編集] > [環境設定] > [一般設定] の「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れてください。

これでAfter Effectsで制作したアニメーションをjsonで出力することができるようになりました。導入したBodymovinの起動は [ウィンドウ] > [拡張機能] > [Bodymovin] から可能です。

出力したいコンポジションを選択・保存先を指定し、「Render」をクリックすれば出力されます。この時、前述の環境設定のチェックを入れ忘れると動かないので注意してください。

アニメーションさせるものをつくる

After Effects上でオブジェクトを配置して、それにアニメーションをつけていくこともできますが、Illustratorで作ったパスデータを取り込んでそれを動かした方が簡単なので、おすすめです。

この時、コンポジションにドラッグ&ドロップで配置したaiデータではjsonに出力されないので、配置したaiデータを [レイヤー] > [作成] > [ベクトルレイヤーからシェイプを作成] でシェイプに変換してください。

作成したシェイプレイヤーの方を編集し、jsonに書き出してください。

失敗談

初めて制作したときに失敗した点です。

1.先にも触れた通り、シェイプレイヤーに変換していないaiファイルは、画像のような扱いになるのでjsonで出力してもエラーになります。

2.サポートされていない機能もあるので注意してください。3Dレイヤー、レイヤー効果などは現在未対応のようです。

対応機能の一覧については下記の「Supported After Effects Features」をご参照ください。
https://github.com/airbnb/lottie-ios

特に、レイヤー効果については現在未対応のため、Illustratorでオブジェクトを制作をする際は通常モードで制作することをお勧めします。

余談ですが、欲しかった機能の一つである「タイムリマップ」が最近対応されたようです。このように、今後も対応機能が増えていくと思われるので、随時アップデートを確認すると良いです。

3.Lottieは、PCサイト(下記URL)にjsonデータをドラッグ&ドロップすることで、プレビューすることができます。
https://lottiefiles.com/preview

しかし、PCサイトのプレビューとスマートフォンのプレビューには差異が発生することもあります。

スマートフォンでの表示を検討している場合は、Lottieのプレビュー用のアプリを入れて、実機で動作を確認することをお勧めします。

最後に

Lottieは、社内のメンバーにお勧めされたことがきっかけで触り始めました。初めはいろいろと躓きましたが、私も様々な記事を読んで理解を深めつつあります。

調べると大体の解決策は出てくるので、興味がある方は是非チャレンジしてみてください。Lottieを用いたアニメーションの制作の利点は、エンジニア側の実装コストの軽減もありますが、体感で自分の理想とするアニメーションを制作できる点だと思います。

仕様や特徴を覚えて、ウェブサイトやアプリを華やかにしてみてはいかがでしょうか。

by Staff

SHARE

OTHER ARTICLES

TOPIC
Jun.06.2018

2018年の夏も、おやこもの作りたいけんを開催します

by Mami Ohtani

BLOG
Nov.12.2019

MapAPIの利用にあたって

by Staff

BLOG
May.31.2017

おもてなしにプラスの心を持って

by Maho Noda

SCROLL TO
CLICK TO
N E W S   A L L
TAP TO NEWS ALL