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で始めるWebアニメーション入門
Search
448jp | OKI Yoshiya
October 18, 2019
Programming
1
670
Lottieで始めるWebアニメーション入門
2019年10月18日(金)Web✕Animation Vol.1「ローディング制作のワークフロー」発表資料
448jp | OKI Yoshiya
October 18, 2019
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
人はなぜコミュニティとつながると幸せを感じるのか
448jp
3
290
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.7k
合意形成のためのFigma活用術
448jp
0
120
書く・即・DONEな仕組みをNuxtで作る
448jp
0
380
神速でワイヤーフレームを作るためのライブラリ
448jp
1
860
Figmaで神速ドキュメント作成術
448jp
3
2.4k
今から始めるFigma超入門
448jp
0
1.6k
零細Web制作会社のリモートワーク事情
448jp
0
420
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
750
Other Decks in Programming
See All in Programming
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
5つのアンチパターンから学ぶLT設計
narihara
1
170
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
Porting a visionOS App to Android XR
akkeylab
0
460
ふつうの技術スタックでアート作品を作ってみる
akira888
1
840
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
XP, Testing and ninja testing
m_seki
3
240
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
How to Ace a Technical Interview
jacobian
278
23k
A better future with KSS
kneath
238
17k
4 Signs Your Business is Dying
shpigford
184
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Music & Morning Musume
bryan
46
6.6k
Designing for humans not robots
tammielis
253
25k
For a Future-Friendly Web
brad_frost
179
9.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Transcript
世路庵 沖 良矢 | 2019.10.18 (Fri) Web×Animation Vol.1「ローディング制作のワークフロー」 Webアニメーション入門 Lottieで始める
沖 良矢 おき よし や ・ インタラクションデザイナー ・ 受託制作一筋16年 ・
妻1人、子2人 @448jp
本日お話しすること Lottieによる実装デモ 事例紹介 Webアニメーション概論 1 2 3
Lottieによる実装デモ Implementation demonstration by Lottie 1
デザイン アニメーション 実装 Bodymovin Lottie JSON
デモ
Lottieが動作するプラットフォーム ⚫ Web ⚫ iOS ⚫ Android ⚫ React Native
⚫ Windows プラットフォームによって サポートされる機能が異なるので要注意 参考:Supported After Effects Features https://airbnb.io/lottie/#/supported-features
LottieのRenderer ⚫ SVG ⚫ Canvas ⚫ HTML(DOM) → 基本これでOK →
SVGでレイアウトの支障があるときに利用 → ちゃんと動かない?
事例紹介 Case study 2
旧奈良監獄(2018)
Webアニメーション概論 Introduction to web animation 3
デジタルプロダクトのデザインパターン 機能パターン ⚫ 個性を視覚的に表現する ⚫ プロダクトのエートス (気風、特性、性格)に基づく ⚫ 形容詞 認知パターン
⚫ UIの構成要素 ⚫ プロダクトの領域や コアな機能に基づく ⚫ 名詞、または動詞
デジタルプロダクトのデザインパターン 機能パターン ⚫ 個性を視覚的に表現する ⚫ プロダクトのエートス (気風、特性、性格)に基づく ⚫ 形容詞 認知パターン
⚫ UIの構成要素 ⚫ プロダクトの領域や コアな機能に基づく ⚫ 名詞、または動詞 アニメーションが 得意とする領域
デジタルプロダクトのデザインパターン 機能パターン ⚫ 個性を視覚的に表現する ⚫ プロダクトのエートス (気風、特性、性格)に基づく ⚫ 形容詞 認知パターン
⚫ UIの構成要素 ⚫ プロダクトの領域や コアな機能に基づく ⚫ 名詞、または動詞 デザインパターンについては、 『Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド』 がオススメです
Webアニメーションができること ⚫ 世界観の演出 ⚫ ストーリーの伝達 ⚫ 象徴的瞬間の表現(マイクロインタラクション)
転倒ます型雨量計の例
転倒ます型雨量計の例 引用:http://www.snwm.co.jp/uryou2.html 画像による説明
転倒ます型雨量計の例 ① 受水口(雨が降り込んでくる所) ② 漏斗 (降り込んだ雨を集める所) ③ 転倒ます(水を計る所) 「受水口」からの雨が「漏斗」で集められ「転倒ます」へ雨水を貯める。0.5mmに 達すると「転倒ます」が倒れ、溜まった雨水を排水する。倒れる事により反対側の 「ます」へ再び雨水が溜まりはじめる。 「転倒ます」が転倒をするたびに接点パルスを発生する。これを計測することに よって降水量がわかります。 引用:http://www.snwm.co.jp/uryou2.html
画像+テキストによる説明
転倒ます型雨量計の例 アニメーションによる説明 アニメーションを開く
アニメーションにしか 伝えられないことがある
Webにおけるアニメーション技術 ⚫ DOMアニメーション ⚫ CSS3アニメーション ⚫ Canvas ⚫ GIFアニメーション ⚫
video
DOMアニメーション 要素のstyle属性を連続的に変更する
CSS3アニメーション CSS3で追加されたCSS TransitionsまたはCSS Animationsを利用する
Canvas HTML5で追加されたcanvas要素でContext2dまたはWebGLを利用する
GIFアニメーション/ビデオ GIFアニメーション、ビデオを再生する
各技術のメリット・デメリット
各技術のメリット・デメリット Webアニメーション表現において Lottieのバランスは大変貴重です
さいごに
フェナキスティスコープ(和名:驚き盤)
フェナキスティスコープ(和名:驚き盤)
語源「騙す」(ギリシャ語)
画は静止していても 動いているように見える
私たちはアニメーションによって そこには無い 新たな存在を作り出せる
アニメーション(animation) 霊魂(anima)
あなたのプロダクトに 生命の息吹を与えるのは アニメーション!
……かもしれません
沖 良矢 @448jp ありがとうございました