Lottieで始めるWebアニメーション入門

 Lottieで始めるWebアニメーション入門

2019年10月18日(金)Web✕Animation Vol.1「ローディング制作のワークフロー」発表資料

Cb42953bfedcd81daf5b1330d98712c3?s=128

448jp | OKI Yoshiya

October 18, 2019
Tweet

Transcript

  1. 世路庵 沖 良矢 | 2019.10.18 (Fri) Web×Animation Vol.1「ローディング制作のワークフロー」 Webアニメーション入門 Lottieで始める

  2. 沖 良矢 おき よし や ・ インタラクションデザイナー ・ 受託制作一筋16年 ・

    妻1人、子2人 @448jp
  3. 本日お話しすること Lottieによる実装デモ 事例紹介 Webアニメーション概論 1 2 3

  4. Lottieによる実装デモ Implementation demonstration by Lottie 1

  5. デザイン アニメーション 実装 Bodymovin Lottie JSON

  6. デモ

  7. Lottieが動作するプラットフォーム ⚫ Web ⚫ iOS ⚫ Android ⚫ React Native

    ⚫ Windows プラットフォームによって サポートされる機能が異なるので要注意 参考:Supported After Effects Features https://airbnb.io/lottie/#/supported-features
  8. LottieのRenderer ⚫ SVG ⚫ Canvas ⚫ HTML(DOM) → 基本これでOK →

    SVGでレイアウトの支障があるときに利用 → ちゃんと動かない?
  9. 事例紹介 Case study 2

  10. 旧奈良監獄(2018)

  11. Webアニメーション概論 Introduction to web animation 3

  12. デジタルプロダクトのデザインパターン 機能パターン ⚫ 個性を視覚的に表現する ⚫ プロダクトのエートス (気風、特性、性格)に基づく ⚫ 形容詞 認知パターン

    ⚫ UIの構成要素 ⚫ プロダクトの領域や コアな機能に基づく ⚫ 名詞、または動詞
  13. デジタルプロダクトのデザインパターン 機能パターン ⚫ 個性を視覚的に表現する ⚫ プロダクトのエートス (気風、特性、性格)に基づく ⚫ 形容詞 認知パターン

    ⚫ UIの構成要素 ⚫ プロダクトの領域や コアな機能に基づく ⚫ 名詞、または動詞 アニメーションが 得意とする領域
  14. デジタルプロダクトのデザインパターン 機能パターン ⚫ 個性を視覚的に表現する ⚫ プロダクトのエートス (気風、特性、性格)に基づく ⚫ 形容詞 認知パターン

    ⚫ UIの構成要素 ⚫ プロダクトの領域や コアな機能に基づく ⚫ 名詞、または動詞 デザインパターンについては、 『Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド』 がオススメです
  15. Webアニメーションができること ⚫ 世界観の演出 ⚫ ストーリーの伝達 ⚫ 象徴的瞬間の表現(マイクロインタラクション)

  16. 転倒ます型雨量計の例

  17. 転倒ます型雨量計の例 引用:http://www.snwm.co.jp/uryou2.html 画像による説明

  18. 転倒ます型雨量計の例 ① 受水口(雨が降り込んでくる所) ② 漏斗 (降り込んだ雨を集める所) ③ 転倒ます(水を計る所) 「受水口」からの雨が「漏斗」で集められ「転倒ます」へ雨水を貯める。0.5mmに 達すると「転倒ます」が倒れ、溜まった雨水を排水する。倒れる事により反対側の 「ます」へ再び雨水が溜まりはじめる。 「転倒ます」が転倒をするたびに接点パルスを発生する。これを計測することに よって降水量がわかります。 引用:http://www.snwm.co.jp/uryou2.html

    画像+テキストによる説明
  19. 転倒ます型雨量計の例 アニメーションによる説明 アニメーションを開く

  20. アニメーションにしか 伝えられないことがある

  21. Webにおけるアニメーション技術 ⚫ DOMアニメーション ⚫ CSS3アニメーション ⚫ Canvas ⚫ GIFアニメーション ⚫

    video
  22. DOMアニメーション 要素のstyle属性を連続的に変更する

  23. CSS3アニメーション CSS3で追加されたCSS TransitionsまたはCSS Animationsを利用する

  24. Canvas HTML5で追加されたcanvas要素でContext2dまたはWebGLを利用する

  25. GIFアニメーション/ビデオ GIFアニメーション、ビデオを再生する

  26. 各技術のメリット・デメリット

  27. 各技術のメリット・デメリット Webアニメーション表現において Lottieのバランスは大変貴重です

  28. さいごに

  29. フェナキスティスコープ(和名:驚き盤)

  30. フェナキスティスコープ(和名:驚き盤)

  31. 語源「騙す」(ギリシャ語)

  32. 画は静止していても 動いているように見える

  33. 私たちはアニメーションによって そこには無い 新たな存在を作り出せる

  34. アニメーション(animation) 霊魂(anima)

  35. あなたのプロダクトに 生命の息吹を与えるのは アニメーション!

  36. ……かもしれません

  37. 沖 良矢 @448jp ありがとうございました