Lottie (Web)

Web上でAfter Effectsアニメーションをネイティブにレンダリング
24,399
作成:Lottieチーム

Web版Lottie

Lottieは、WebおよびiOS向けのモバイルライブラリで、Adobe After EffectsアニメーションをBodymovinでJSONとしてエクスポートし、モバイルでネイティブにレンダリングします！

デザイナーは初めて、エンジニアが手作業で苦労してアニメーションを再作成することなく、美しいアニメーションを作成し、配信できるようになりました。百聞は一見に如かずということわざがあるように、ここでは13,000語分の価値があるものを見てみましょう。

ドキュメント、FAQ、ヘルプ、例などはairbnb.io/lottieでご覧ください。

Example1

Example2

Example3

Community

Example4

プラグインのインストール

オプション1 (推奨)

aescripts + aepluginsからダウンロード: http://aescripts.com/bodymovin/

オプション2

または、Adobe Storeから入手: https://creative.adobe.com/addons/products/12557 (CC 2014以降)。

その他のインストールオプション

オプション3

  • リポジトリからZIPをダウンロード。
  • コンテンツを解凍し、'/build/extension'から.zxpファイルを入手。
  • aescripts.comのZXPインストーラーを使用。

オプション4

  • After Effectsを閉じる

  • build/extension/bodymovin.zxpにあるzipファイルをAdobe CEPフォルダーに解凍
    WINDOWS
    C:\Program Files (x86)\Common Files\Adobe\CEP\extensions または
    C:\<username>\AppData\Roaming\Adobe\CEP\extensions
    MAC
    /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
    (ターミナルを開いて以下を入力)
    $ cp -R YOURUNZIPEDFOLDERPATH/extension /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
    次に以下を入力
    $ ls /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
    (正しくコピーされたか確認するために入力)

  • レジストリキーを編集
    WINDOWS
    レジストリキーHKEY_CURRENT_USER/Software/Adobe/CSXS.6を開き、PlayerDebugModeという名前のキー(型: String, 値: 1)を追加。
    MAC
    ファイル~/Library/Preferences/com.adobe.CSXS.6.plistを開き、キーPlayerDebugMode(型: String, 値: 1)を持つ行を追加。

オプション5

以下の手順に従って手動でzxpをインストール: https://helpx.adobe.com/x-productkb/global/installingextensionsandaddons.html 「サードパーティ製拡張機能のインストール」に直接スキップしてください

オプション6

Homebrew-adobeを使ってインストール

brew tap danielbayley/adobe
brew cask install lottie

インストール後

  • Windows: 編集 > 環境設定 > 一般 > で「スクリプトによるファイルの書き込みとネットワークへのアクセスを許可」をオンにする。
  • Mac: Adobe After Effects > 環境設定 > 一般 > で「スクリプトによるファイルの書き込みとネットワークへのアクセスを許可」をオンにする。

HTMLプレーヤーのインストール

# with npm
npm install lottie-web

# with bower
bower install bodymovin

または、ここからスクリプトファイルを使用することもできます: https://cdnjs.com/libraries/bodymovin または、AEプラグインで[Get Player]をクリックして直接取得します。

デモ

基本的な実装についてはこちらをご覧ください。

例

codepenで例をご覧ください。

仕組み

基本的なアニメーションをエクスポートしてHTMLページに読み込む方法を説明したビデオチュートリアルはこちらです。

After Effects

  • AEプロジェクトを開き、[ウィンドウ] > [拡張機能] > [bodymovin]でbodymovin拡張機能を選択。
  • パネルが開き、[コンポジション]タブにプロジェクトのすべてのコンポジションが一覧表示されます。
  • エクスポートするコンポジションを選択。
  • 出力先フォルダを選択。
  • [レンダー]をクリック
  • エクスポートされたJSONファイルを探します。(アニメーションに画像やAIレイヤーがある場合は、エクスポートされたファイルを含むimagesフォルダーがあります)

HTML

  • 最新ビルド用のbuild/player/フォルダーからlottie.jsファイルを入手

  • htmlに.jsファイルを含めます (本番環境ではgzip圧縮することを忘れないでください)。

    <script src="js/lottie.js" type="text/javascript"></script>

    lottie.loadAnimation()を呼び出してアニメーションを開始できます。これは、以下を含む一意のパラメータとしてオブジェクトを受け取ります。

  • animationData: エクスポートされたアニメーションデータを持つオブジェクト。
  • path: アニメーションオブジェクトへの相対パス。（animationDataとpathは相互に排他的です）
  • loop: true / false / 数値
  • autoplay: true / false。準備が整うとすぐに再生を開始します
  • name: 後で参照するためのアニメーション名
  • renderer: レンダラーを設定するための 'svg' / 'canvas' / 'html'
  • container: アニメーションをレンダリングするDOM要素

これは、play、pause、setSpeedなどで制御できるアニメーションインスタンスを返します。

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

コンポジション設定

各設定の説明については、このWikiページを確認してください。 https://github.com/airbnb/lottie-web/wiki/Composition-Settings

使用方法

アニメーションインスタンスには、これらの主なメソッドがあります

play

stop

pause

setLocationHref(href)

  • href：通常はlocation.hrefとして渡します。URLに#記号がないSafariでマスクの問題が発生した場合に便利です。

setSpeed(speed)

  • speed：1が通常の速度です。

goToAndStop(value, isFrame)

  • value：数値。
  • isFrame：最初の引数が時間ベースの値かフレームベースの値かを定義します（デフォルトはfalse）。

goToAndPlay(value, isFrame)

  • value：数値。
  • isFrame：最初の引数が時間ベースの値かフレームベースの値かを定義します（デフォルトはfalse）。

setDirection(direction)

  • direction：1は順方向、-1は逆方向です。

playSegments(segments, forceFlag)

  • segments：配列。アニメーションの最初と最後のフレームとして使用される2つの数値を格納できます。または、それぞれ2つの数値を持つ一連の配列を含めることができます。

  • forceFlag：ブール値。falseに設定すると、現在のセグメントが完了するまで待機します。trueの場合、値をすぐに更新します。

    setSubframe(useSubFrames)

  • useSubFrames：falseの場合、元のAEのfpsを尊重します。trueの場合、中間値を使用してすべてのrequestAnimationFrameで更新されます。デフォルトはtrueです。

    destroy()

    getDuration(inFrames)

  • inFrames：trueの場合、期間をフレームで返し、falseの場合、秒で返します。

追加のメソッド

  • updateTextDocumentData -- テキストレイヤーのデータを更新する 詳細情報

Lottieには、すべてのアニメーションに影響を与える8つのグローバルメソッドがあります

lottie.play() -- 1つのオプションパラメータnameで特定のアニメーションをターゲットにします
lottie.stop() -- 1つのオプションパラメータnameで特定のアニメーションをターゲットにします
lottie.setSpeed() -- 最初の引数speed（1が通常の速度）-- 1つのオプションパラメータnameで特定のアニメーションをターゲットにします
lottie.setDirection() -- 最初の引数direction（1が通常の方向）-- 1つのオプションパラメータnameで特定のアニメーションをターゲットにします
lottie.searchAnimations() -- class "lottie"または"bodymovin"を持つ要素を探します
lottie.loadAnimation() -- 上記で説明。個別に制御するアニメーションインスタンスを返します。
lottie.destroy() -- リソースを破棄および解放します。DOM要素は空になります。
lottie.registerAnimation() -- registerAnimationを使用して要素を直接登録できます。データ.json URLを指す「data-animation-path」属性が必要です
lottie.setQuality() -- デフォルトは「high」、プレーヤーのパフォーマンスを向上させるために「high」、「medium」、「low」、または数値>1を設定します。アニメーションによっては、2程度に下げても違いが見られない場合があります。

イベント

  • onComplete
  • onLoopComplete
  • onEnterFrame
  • onSegmentStart

次のイベントでaddEventListenerを使用することもできます

  • complete
  • loopComplete
  • enterFrame
  • segmentStart
  • config_ready (初期設定が完了したとき)
  • data_ready (アニメーションのすべての部分がロードされたとき)
  • data_failed (アニメーションの一部をロードできないとき)
  • loaded_images (すべての画像ロードが成功したかエラーになったとき)
  • DOMLoaded (要素がDOMに追加されたとき)
  • destroy

その他のロードオプション

  • 既存のキャンバスを使用して描画する場合は、追加のオブジェクト 'rendererSettings' を次の構成で渡すことができます

    lottie.loadAnimation({
container: element, // the dom element
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData, // the animation data
rendererSettings: {
context: canvasContext, // the canvas context
scaleMode: 'noScale',
clearCanvas: false,
progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
hideOnTransparent: true, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
className: 'some-css-class-name'
}
});

    このようにすると、各フレームの後にキャンバスをクリアする必要が生じます。
    アニメーションをロードするもう1つの方法は、DOM要素に特定の属性を追加することです。divを含め、そのクラスを "lottie" に設定する必要があります。ページロード前にこれを行うと、クラス "lottie"を持つすべてのタグを自動的に検索します。または、ページロード後にlottie.searchAnimations()を呼び出すと、クラス "lottie"を持つすべての要素を検索します。

  • data.jsonをhtmlに対する相対パスのフォルダーに追加します。
  • アニメーションを格納するdivを作成します。

  • 必須

    • "lottie" というクラス
    • data.jsonへの相対パスを持つ「data-animation-path」属性

  • オプション

    • 「data-anim-loop」属性
    • 再生コントロールを特にターゲットにする名前を指定する「data-name」属性

例

 <div style="width:1067px;height:600px"  class="lottie" data-animation-path="animation/" data-anim-loop="true" data-name="ninja"></div>

プレビュー

アニメーションのプレビューを表示したり、ポスターとして使用するためにSVGスナップショットを撮ったりできます。アニメーションをレンダリングした後、アニメーションの任意のフレームのスナップショットを撮ってディスクに保存できます。https://jakearchibald.github.io/svgomg/のようなSVGオプティマイザーを通してSVGを渡し、設定を試してみることをお勧めします。

推奨事項

ファイル

シェイプに変換していない画像やAIレイヤーがある場合(ベクターとしてエクスポートされるように変換することをお勧めします。各レイヤーを右クリックして、[ベクターレイヤーからシェイプを作成]を実行します)、それらは出力先jsonフォルダーに対する相対パスにあるimagesフォルダーに保存されます。その同じ場所にある既存のフォルダーを上書きしないように注意してください。

パフォーマンス

これはリアルタイムレンダリングです。かなり最適化されていますが、AEプロジェクトを必要なものだけにしておくことは常に役立ちます
より多くの最適化が進行中ですが、小さな部分をマスクするためだけにAEで巨大なシェイプを使用しないようにしてください。
ノードが多すぎる場合もパフォーマンスに影響します。

ヘルプ

動作しないアニメーションがある場合や、私がエクスポートすることを希望する場合は、お気軽にご連絡ください。
このプラグインにどのような問題があるか、非常に興味があります。
私のメールはhernantorrisi@gmail.comです

AE機能サポート

  • このスクリプトは、プリコンプ、シェイプ、ソリッド、画像、ヌルオブジェクト、テキストをサポートしています
  • マスクと反転マスクをサポートしています。他のモードも来るかもしれませんが、パフォーマンスに大きな影響があります。
  • タイムリマップをサポートしています
  • このスクリプトは、シェイプ、長方形、楕円、星をサポートしています。
  • エクスプレッション。詳細については、wikiページを参照してください 詳細情報。
  • サポートされていません: 画像シーケンス、ビデオ、オーディオはサポートされていません。
  • 負のレイヤーストレッチはサポートされていません！理由はわかりませんが、レイヤーをストレッチすると、すべてのデータが混乱します。

開発

最初にnpm installまたはbower install、次にnpm start

注

  • パーサーまたはプレーヤーを変更する場合は、タスクを簡略化できるgulpコマンドがいくつかあります
  • codepenでエクスポートされた素晴らしいアニメーションを見てください codepenで例をご覧ください。
  • アニメーションjsonとプレーヤーをgzip圧縮すると、ファイルサイズが大幅に削減されます。プロジェクトで使用する場合は、それを行うことをお勧めします。

問題

  • Safariブラウザでマスクが欠落している場合は、アニメーションが生成される前にanim.setLocationHref(locationHref)を実行してください。これは通常、HTMLでbaseタグを使用することが原因です。(setLocationHrefの説明については上記を参照)
リンク