News
Meetup
YouTube
Blog
書き起こし
2020/04/24 に公開
1143 views
このエピソードについて
@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 の面白さ
After Effects で作った資産を Web で活かせる
フロントエンドエンジニアがリッチなマイクロインタラクションなどを気軽に実装できる
今日は 2. について簡単に紹介
LottieFiles で探す・使うアニメーション
そうはいっても AfterEffecs が気軽に使えるわけではない……
そんなときに使えるサイトに LottieFiles がある
https://lottiefiles.com/
Lottie 向けのアニメーションを配布・販売している CGM
多くのアニメーションがクリエイティブ・コモンズにて配布されている
CSS や gsap (TweenMax) でちょっとしたあしらいを作っていた人の引き出しが増えるかも?
https://greensock.com/gsap/
アニメーションの使い所
ストレス低減
初期ローディングが長いアプリケーションのスプラッシュスクリーン
リテンション率を高めたいアクションに対してピンポイントで差し込む
いいねのような、サービスのKPIに関わるものが押されやすくなるとサービス自体の数字にもつながる
ユーザーにとって負担の大きな操作も最後にあしらいがあると体験が変わってくる
単純に目をひきたいような場合
今回のバナーでの採用のようなケース
インタラクションはは静かな Web サイトや Web アプリケーションの世界に命を吹き込む
フロントエンドエンジニアからボトムアップで改善できるベストな場である前提で考えていく
LottieとCSSアニメーション、GIF/スプライト画像、動画素材との使い分けは?
Lottieのアニメーションがすべてイージングされていて、好きなところで止めたり逆再生したりが簡単なのが大きな特徴 → 例えばスクロールによって徐々に変化する要素とか
逆に言うと時間軸以外での制御方法は皆無なので、インタラクティブなアニメーションはCSSや別のJSライブラリの方が適している
実はAEからBodyMovinでエクスポートできる機能はかなり限られている
ダイナミックな演出というよりは、動きの少ないWebページの中でワンポイント追加して注目を集める目的が良さそう
AEで作ったきめ細やかなアニメーションをWebに持ち込み、動きの楽しさを与える
Refs
LINE 新卒採用 2024
https://linecorp.com/ja/career/newgrads/engineering/
キャリア採用はこちらから
https://linecorp.com/ja/career/position/475
BGM&SE
魔王魂/騒音のない世界/OtoLogic
1.0x
1.3x
1.5x