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
300
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.8k
合意形成のためのFigma活用術
448jp
0
130
書く・即・DONEな仕組みをNuxtで作る
448jp
0
380
神速でワイヤーフレームを作るためのライブラリ
448jp
1
860
Figmaで神速ドキュメント作成術
448jp
3
2.5k
今から始めるFigma超入門
448jp
0
1.6k
零細Web制作会社のリモートワーク事情
448jp
0
430
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
760
Other Decks in Programming
See All in Programming
QA x AIエコシステム段階構築作戦
osu
0
240
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
950
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7.3k
Flutterと Vibe Coding で個人開発!
hyshu
1
220
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
140
画像コンペでのベースラインモデルの育て方
tattaka
3
1k
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
6
1.6k
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
170
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.5k
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
510
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
660
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Art, The Web, and Tiny UX
lynnandtonic
301
21k
The World Runs on Bad Software
bkeepers
PRO
70
11k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
We Have a Design System, Now What?
morganepeng
53
7.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How STYLIGHT went responsive
nonsquared
100
5.7k
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 ありがとうございました