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
560
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
書く・即・DONEな仕組みをNuxtで作る
448jp
0
300
神速でワイヤーフレームを作るためのライブラリ
448jp
1
770
Figmaで神速ドキュメント作成術
448jp
3
2k
今から始めるFigma超入門
448jp
0
1.5k
零細Web制作会社のリモートワーク事情
448jp
0
350
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
690
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
240
Figmaが支えるVue Fes Japanのデザイン
448jp
3
5.2k
Vue Fes Japan 2018のデザインを支えたAdobe XD
448jp
2
1.8k
Other Decks in Programming
See All in Programming
初めてDefinitelyTypedにPRを出した話
syumai
0
420
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
480
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
190
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.7k
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
610
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
970
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
630
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building Applications with DynamoDB
mza
90
6.1k
It's Worth the Effort
3n
183
27k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
How to Ace a Technical Interview
jacobian
276
23k
Building Your Own Lightsaber
phodgson
103
6.1k
BBQ
matthewcrist
85
9.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
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 ありがとうございました