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. Lottieが動作するプラットフォーム ⚫ Web ⚫ iOS ⚫ Android ⚫ React Native

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

    SVGでレイアウトの支障があるときに利用 → ちゃんと動かない?
  3. デジタルプロダクトのデザインパターン 機能パターン ⚫ 個性を視覚的に表現する ⚫ プロダクトのエートス (気風、特性、性格)に基づく ⚫ 形容詞 認知パターン

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

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