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
610
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
170
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.1k
合意形成のためのFigma活用術
448jp
0
66
書く・即・DONEな仕組みをNuxtで作る
448jp
0
330
神速でワイヤーフレームを作るためのライブラリ
448jp
1
800
Figmaで神速ドキュメント作成術
448jp
3
2.2k
今から始めるFigma超入門
448jp
0
1.5k
零細Web制作会社のリモートワーク事情
448jp
0
380
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
720
Other Decks in Programming
See All in Programming
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
570
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
150
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
Grafana Cloudとソラカメ
devoc
0
180
PRレビューのお供にDanger
stoticdev
1
180
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
790
Software Architecture
hschwentner
6
2.1k
時計仕掛けのCompose
mkeeda
1
300
もう僕は OpenAPI を書きたくない
sgash708
5
1.8k
Unity Android XR入門
sakutama_11
0
160
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
570
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Fireside Chat
paigeccino
34
3.2k
Typedesign – Prime Four
hannesfritz
40
2.5k
Gamification - CAS2011
davidbonilla
80
5.1k
Code Reviewing Like a Champion
maltzj
521
39k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Building Flexible Design Systems
yeseniaperezcruz
328
38k
KATA
mclloyd
29
14k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
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 ありがとうございました