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

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

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

Cb42953bfedcd81daf5b1330d98712c3?s=128

448jp | OKI Yoshiya

October 18, 2019
Tweet

Transcript

  1. 6.
  2. 7.

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

    ⚫ Windows プラットフォームによって サポートされる機能が異なるので要注意 参考:Supported After Effects Features https://airbnb.io/lottie/#/supported-features
  3. 8.

    LottieのRenderer ⚫ SVG ⚫ Canvas ⚫ HTML(DOM) → 基本これでOK →

    SVGでレイアウトの支障があるときに利用 → ちゃんと動かない?
  4. 13.

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

    ⚫ UIの構成要素 ⚫ プロダクトの領域や コアな機能に基づく ⚫ 名詞、または動詞 アニメーションが 得意とする領域
  5. 14.

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

    ⚫ UIの構成要素 ⚫ プロダクトの領域や コアな機能に基づく ⚫ 名詞、または動詞 デザインパターンについては、 『Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド』 がオススメです