Lottieで変わる

これからの

Webアニメーション

なにか？

  1. After Effect で動きををつくり

  2. json を出力し

  3. JavaScript で読み込んで

  4. SVG で描画する

いままでにあわせると

  1. デザイナーがデータ（ai, svg）を用意

  2. エンジニアが After Effects で動きをつける

  3. エンジニアがサイトに組み込む

やってみる

Illustrator

  1. グループ解除

  2. サブレイヤーに分割（シーケンス）

  3. サブレイヤーの階層を上げる（レイヤーにする）

  4. サブレイヤーの入っていたレイヤー削除

  5. レイヤー名を分かりやすく変更

  6. レイヤーの順番を整理

After Effects

  1. プロジェクトにaiデータを読み込む
     - 読み込みの種類：コンポジション
     - フッテージのサイズ：ドキュメントサイズ

  2. コンポジションの設定を変更
    -     背景色を設定（透過になるので埋め込む箇所に近い色など）

  3. レイヤーをシェイプに変換

  4. アニメーションをつくる
    - 表示と非表示など複数のある場合はフレームで管理

  5. 拡張機能の bodymovin で json を出力

はじめてのときは Bodymovin をいれる

  1. ZXP Installer と Bodymovin をダウンロード
  2. ZXP Installer をインストール
  3. ZXP Installer で Bodymovin をインストール
  4. 環境設定から「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」する

確認する

出力した Json を

実際に Lottie で動いている状態で

プレビューできます。

https://lottiefiles.com/preview

組み込む

  1. lottie-web を import

  2. 出力した json を読み込む

  3. 再生する

Demo

フレームワークとも相性が良い

ちなみにボクは

https://github.com/syuji-higa/javascript-modules-v5/blob/master/src/modules/lottie.js

  • data 属性にモーション名を設定して管理

  • テキストを記述して title 属性に置き換える

できないこと

  • SVG で表現できないこと

  • インタラクティブに動きをかえること

とくいなこと

  • マイクロインタラクション

  • インフォグラフィックス

  • イラストアニメーション

なにがかわる？

  • 作業担当の流動性

  • 高いコストパフォーマンス

  • モーション実装担当者の選択

  • モーショングラフィックカーのアサイン

  • アニメーション確認タイミングの早期化

  • ビジュアライズ化された実装

  • 動画よりも自由な操作性

  • アニメGIFよりも高いパフォーマンス

  • ベクターデータによる解像度のない世界

  • CSS

  • JavaScript アニメーションライブラリ

  • WebGL

  • 動画

  • アニメGIF

Webサイトにおける

アニメーション実装へのアプローチ

いろいろある

新たな扉は

すでに

開かれている

おわり

Made with Slides.com