ep.40 Lottie と LottieFiles で実現する「ちょっと嬉しい」アニメーション

  • HANATANI Takuma(@potato4d)
  • spring-raining
2020/04/24 に公開1304 views

このエピソードについて

このエントリーをはてなブックマークに追加
LINE
BlueskyShare

@potato4d と @spring_raining の二人で、 Lottie について語りました。

  • UIT INSIDE Live! の特設ページで久々に Lottie を利用した
    • メールのアイコンのもの
    • https://airbnb.design/lottie/
    • After Effects で作ったモーションを Web, iOS, Android で動かすことができるライブラリ
      • Ae の動画データ → JSON → JavaScript ライブラリとすることでフロントエンドで使える
        • オフィシャルな Lottie Web のほかに、 有志による react-lottie や lottie-vue が存在
  • Lottie の面白さ
      1. After Effects で作った資産を Web で活かせる
      1. フロントエンドエンジニアがリッチなマイクロインタラクションなどを気軽に実装できる
    • 今日は 2. について簡単に紹介
  • LottieFiles で探す・使うアニメーション
    • そうはいっても AfterEffecs が気軽に使えるわけではない……
    • そんなときに使えるサイトに LottieFiles がある
    • Lottie 向けのアニメーションを配布・販売している CGM
    • 多くのアニメーションがクリエイティブ・コモンズにて配布されている
    • CSS や gsap (TweenMax) でちょっとしたあしらいを作っていた人の引き出しが増えるかも？
  • アニメーションの使い所
    • ストレス低減
      • 初期ローディングが長いアプリケーションのスプラッシュスクリーン
    • リテンション率を高めたいアクションに対してピンポイントで差し込む
      • いいねのような、サービスのKPIに関わるものが押されやすくなるとサービス自体の数字にもつながる
      • ユーザーにとって負担の大きな操作も最後にあしらいがあると体験が変わってくる
    • 単純に目をひきたいような場合
      • 今回のバナーでの採用のようなケース
    • インタラクションはは静かな Web サイトや Web アプリケーションの世界に命を吹き込む
      • フロントエンドエンジニアからボトムアップで改善できるベストな場である前提で考えていく
    • LottieとCSSアニメーション、GIF/スプライト画像、動画素材との使い分けは？
      • Lottieのアニメーションがすべてイージングされていて、好きなところで止めたり逆再生したりが簡単なのが大きな特徴 → 例えばスクロールによって徐々に変化する要素とか
      • 逆に言うと時間軸以外での制御方法は皆無なので、インタラクティブなアニメーションはCSSや別のJSライブラリの方が適している
    • 実はAEからBodyMovinでエクスポートできる機能はかなり限られている
      • ダイナミックな演出というよりは、動きの少ないWebページの中でワンポイント追加して注目を集める目的が良さそう
      • AEで作ったきめ細やかなアニメーションをWebに持ち込み、動きの楽しさを与える

採用について

使用素材・クレジット

© Presented by UIT