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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
eta
May 23, 2018
Design
1
82
LOTTIEを利用したiOSアプリのアニメーション
eta
May 23, 2018
Tweet
Share
Other Decks in Design
See All in Design
デザインするために「多様性」について考える
iflection
0
190
DESIGNEAST 2025 A-3
_kotobuki_
0
130
Correspondence:共に生成していく過程
akiramotomura
0
190
OJTで学んだ 「心を動かす」ファシリテーション
saki822
1
240
root COMPANY DECK / We are hiring!
root_recruit
2
26k
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
1
510
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
900
From the Visible Crossroads: Turning Outputs into Outcomes
takaikanako
2
1.1k
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
200
Emmy's Artwork
mcksmith
0
200
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
visional_engineering_and_design
4
710
Ralph Penel Portfolio
ralphpenel
0
260
Featured
See All Featured
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
170
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
77
Ethics towards AI in product and experience design
skipperchong
2
200
Amusing Abliteration
ianozsvald
0
110
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
3.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.4k
Optimising Largest Contentful Paint
csswizardry
37
3.6k
How STYLIGHT went responsive
nonsquared
100
6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
9.9k
What does AI have to do with Human Rights?
axbom
PRO
0
2k
Navigating Weather and Climate Data
rabernat
0
110
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
750
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!!