Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
LOTTIEを利用したiOSアプリのアニメーション
Search
eta
May 23, 2018
Design
1
41
LOTTIEを利用したiOSアプリのアニメーション
eta
May 23, 2018
Tweet
Share
Other Decks in Design
See All in Design
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
580
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
390
Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023
moriyuya
31
2.6k
Web 組版の課題とその解法
yamatoiizuka
0
110
root Design Partnership Policy
root_recruit
0
4.1k
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
300
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
150
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
230
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
180
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
7.8k
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
450
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
0
2.9k
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
What's in a price? How to price your products and services
michaelherold
237
11k
What's new in Ruby 2.0
geeforr
337
31k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Become a Pro
speakerdeck
PRO
11
4.5k
Unsuck your backbone
ammeep
663
57k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
BBQ
matthewcrist
80
8.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
The Invisible Customer
myddelton
114
12k
Designing the Hi-DPI Web
ddemaree
276
33k
Transcript
LOTTIEを利利⽤用した IOSアプリのアニメーション Eita Yamaguchi 1
IOSアプリを作るためには • ハイブリットアプリ - Monaca(以前に前⽥田くんが発表した) - Xamarin(強い) • Swift or
Objective-Cを使ったネイティブアプリ 2
アプリのデザイン • 基本的にiOSはフラットデザイン (ルールはちゃんと決まってない) 3 • 基本的にAndroidはマテリアルデザイン (Googleがガイドラインを制定)
マテリアルデザインとは • デザインのセンスがない⼈人でも、ある程度美しくてユーザ ビリティに配慮されたデザインが作れる。 Googleがガチガチに決めたデザインの仕様。 4
マテリアルデザインとは • 基本概念 - ディスプレイのような平⾯面でも奥⾏行行き(Z軸)を表現する。 - 意味のあるアニメーションをさせる。 • つまりは、ディスプレイ上で現実世界のような物体の表現をさせる。 •
さらにユーザに情報の流れや動作の流れを直感的にわかってもらえる 表現。 5 Source: http://material.cmiscm.com/
例例えば。 6 グッドボタンや通知マーク ユーザの待ち時間に 表示される画⾯面
アニメーションは⼤大切 • マテリアルデザインにとってアニメーションは⽋欠かせない存在。 • アニメーションをネイティブコードで記述するのはしんどい。 • 部品単位でネイティブコードからでも制御できる⽅方法が欲しい。 7
そこでLOTTIE • LottieはAirbnbが開発した、アプリ、ウェブサイトなどの 制限がないアニメーションライブラリ。 (Airbnbは⺠民泊の仲介をするサイトとして有名だが、意外 と開発系でも強い) 8
LOTTIEだととっても簡単 • AfterEffectsを利利⽤用して作られたアニメーションをJson形式で 読み込むことでネイティブコードから制御できる。 • 導⼊入も簡単。CocoaPodsやCarthage(カーセッジ)を利利⽤用してア プリに簡単に組み込むことができる。 • MITLicenceで誰でもタダで使える! 9
JSONファイルはどうする? • AfterEffectsで作ったアニメーションを書き出す。 • LottieFilesというユーザが作ったアニメーションをダウン ロードするサイトから⼊入⼿手。 - ⼀一般的に使うアニメーションは揃っている。 - CC
Licenceで著作権表示さえすれば⾃自由に使える。 10
実際どんくらい楽? • Twitterのいいねボタンのようなアニメーショ ンを作ることを想定してみる。 11
ネイティブコード • キーフレームごとにポイントを指定して記述していく実装。 12 Source:https://github.com/okmr-d/DOFavoriteButton DOFavoriteButtonより引⽤用
LOTTIEの使⽤用時 • LottieFilesからJSONをダウンロード後 実際にネイティブコードで実装する量量 13 Created by Flowtuts
⽐比較 • ネイティブコードだけだと1フレームづつキーを打っ ていかなければいけない。 複雑なものであればあるほど複雑になる。 • Lottieだとどんなアニメーションであってもベースは 3⾏行行で実装できる。 LottieFilesに使いたい素材があればアニメーションの 制作時間も短縮される。
14
LOTTIEではできないこと • ネイティブにあるTableViewなどの画⾯面要素を AfterEffectsで作ってそのままネイティブに使うこと。 (あくまでもアニメーションのツールなので…) • すべてのアニメーションをLottieで完結させること。 • AfterEffects以外で作ったアニメーションを動かすこと。 15
最後に • Lottieはちょっとした場所にアニメーションを使いたい時には 最⾼高のライブラリ。 • 特にAfterEffectsを使う技術を持っているのであれば使わない⼿手 はない。 16
THANK YOU!!