LOTTIEを利用したiOSアプリのアニメーション

Transcript

1. LOTTIEを利利⽤用した IOSアプリのアニメーション Eita Yamaguchi 1
2. IOSアプリを作るためには • ハイブリットアプリ
 - Monaca(以前に前⽥田くんが発表した)
 - Xamarin(強い) • Swift or Objective-Cを使ったネイティブアプリ 2
3. アプリのデザイン • 基本的にiOSはフラットデザイン
 (ルールはちゃんと決まってない) 3 • 基本的にAndroidはマテリアルデザイン
 (Googleがガイドラインを制定)
4. マテリアルデザインとは • デザインのセンスがない⼈人でも、ある程度美しくてユーザ ビリティに配慮されたデザインが作れる。
 Googleがガチガチに決めたデザインの仕様。 4
5. マテリアルデザインとは • 基本概念
 - ディスプレイのような平⾯面でも奥⾏行行き(Z軸)を表現する。
 - 意味のあるアニメーションをさせる。 • つまりは、ディスプレイ上で現実世界のような物体の表現をさせる。 • さらにユーザに情報の流れや動作の流れを直感的にわかってもらえる 表現。 5 Source: http://material.cmiscm.com/
6. 例例えば。 6 グッドボタンや通知マーク ユーザの待ち時間に
 表示される画⾯面
7. アニメーションは⼤大切 • マテリアルデザインにとってアニメーションは⽋欠かせない存在。 • アニメーションをネイティブコードで記述するのはしんどい。 • 部品単位でネイティブコードからでも制御できる⽅方法が欲しい。 7
8. そこでLOTTIE • LottieはAirbnbが開発した、アプリ、ウェブサイトなどの 制限がないアニメーションライブラリ。
 (Airbnbは⺠民泊の仲介をするサイトとして有名だが、意外 と開発系でも強い) 8
9. LOTTIEだととっても簡単 • AfterEffectsを利利⽤用して作られたアニメーションをJson形式で 読み込むことでネイティブコードから制御できる。 • 導⼊入も簡単。CocoaPodsやCarthage(カーセッジ)を利利⽤用してア プリに簡単に組み込むことができる。 • MITLicenceで誰でもタダで使える！ 9
10. JSONファイルはどうする？ • AfterEffectsで作ったアニメーションを書き出す。 • LottieFilesというユーザが作ったアニメーションをダウン ロードするサイトから⼊入⼿手。
 - ⼀一般的に使うアニメーションは揃っている。
 - CC Licenceで著作権表示さえすれば⾃自由に使える。 10
11. 実際どんくらい楽？ • Twitterのいいねボタンのようなアニメーショ ンを作ることを想定してみる。 11
12. ネイティブコード • キーフレームごとにポイントを指定して記述していく実装。 12 Source:https://github.com/okmr-d/DOFavoriteButton DOFavoriteButtonより引⽤用
13. LOTTIEの使⽤用時 • LottieFilesからJSONをダウンロード後
 実際にネイティブコードで実装する量量 13 Created by Flowtuts
14. ⽐比較 • ネイティブコードだけだと1フレームづつキーを打っ ていかなければいけない。
 複雑なものであればあるほど複雑になる。 • Lottieだとどんなアニメーションであってもベースは ３⾏行行で実装できる。
 LottieFilesに使いたい素材があればアニメーションの 制作時間も短縮される。 14
15. LOTTIEではできないこと • ネイティブにあるTableViewなどの画⾯面要素を
 AfterEffectsで作ってそのままネイティブに使うこと。
 (あくまでもアニメーションのツールなので…) • すべてのアニメーションをLottieで完結させること。 • AfterEffects以外で作ったアニメーションを動かすこと。 15
16. 最後に • Lottieはちょっとした場所にアニメーションを使いたい時には 最⾼高のライブラリ。 • 特にAfterEffectsを使う技術を持っているのであれば使わない⼿手 はない。 16
17. THANK YOU!!