Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

448jp | OKI Yoshiya

October 18, 2019
Tweet

More Decks by 448jp | OKI Yoshiya

Other Decks in Programming

Transcript

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

    View full-size slide

  2. 沖 良矢
    おき よし や
    ・ インタラクションデザイナー
    ・ 受託制作一筋16年
    ・ 妻1人、子2人
    @448jp

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Lottieが動作するプラットフォーム
    ⚫ Web
    ⚫ iOS
    ⚫ Android
    ⚫ React Native
    ⚫ Windows
    プラットフォームによって
    サポートされる機能が異なるので要注意
    参考:Supported After Effects Features
    https://airbnb.io/lottie/#/supported-features

    View full-size slide

  7. LottieのRenderer
    ⚫ SVG
    ⚫ Canvas
    ⚫ HTML(DOM)
    → 基本これでOK
    → SVGでレイアウトの支障があるときに利用
    → ちゃんと動かない?

    View full-size slide

  8. 事例紹介
    Case study
    2

    View full-size slide

  9. 旧奈良監獄(2018)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. デジタルプロダクトのデザインパターン
    機能パターン
    ⚫ 個性を視覚的に表現する
    ⚫ プロダクトのエートス
    (気風、特性、性格)に基づく
    ⚫ 形容詞
    認知パターン
    ⚫ UIの構成要素
    ⚫ プロダクトの領域や
    コアな機能に基づく
    ⚫ 名詞、または動詞
    デザインパターンについては、
    『Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド』
    がオススメです

    View full-size slide

  14. Webアニメーションができること
    ⚫ 世界観の演出
    ⚫ ストーリーの伝達
    ⚫ 象徴的瞬間の表現(マイクロインタラクション)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 転倒ます型雨量計の例
    アニメーションによる説明
    アニメーションを開く

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. さいごに

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. ……かもしれません

    View full-size slide

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

    View full-size slide