エクスプレスエフェクトアニメーションをHTML5にエクスポートする

Sep 14, 2025

操作方法

Web上のアニメーションはここにいます。それは私たちのことをもたらすのを助ける微妙な動きからすべてです UIデザイン 生活に向けて、完全にアニメーション化されたキャンバスの経験とWebGL実験と、私たちがかつてブラウザで考えられていたことが可能でした。

Devsの創造性とブラウザの機能が高まっている間、Web上のアニメーションはビデオとの関係が長い間、モーショングラフィックコミュニティが何年もの間注意を払っていたものです。あなたが維持する複雑なサイトを持っているなら、あなたの ウェブホスティング サービスが点灯する必要があります。

UIデザインの長所ガイド

開発者は、JavaScriptを通じてアニメーションの再生を重視するために、GreenSockやSnap.SVGなどのライブラリに頼っています。これらのツールは多くの柔軟性を与えられていますが、それらを使用することができるアニメーションの精度と微妙さと比較することはできません。 後遺症CC 自分のタイムラインと緩和グラフ。ウェブの観点からは、エフェクトがコードにコミットする前にモーションを微調整しようとするのに非常によく適しています。

character with 'Ae' written on its belly — ボディモビン：Webの魔法の「レンダリング」機能Adobeを忘れた[すべてのイメージ：空腹サンドイッチクラブ]

入るボディモビン、ブラウザに表示されて表示されるように、アニメーションをJavaScriptに直接エクスポートするエフェクトの後にAdobeの画期的な拡張機能。によって作成されたヘルナントリジボディモビンは、AnimatorとDeveloperの間の障壁の多くを取り除きます。その基本レベルでは、プラグインはWebの機能の魔法の「レンダリング」がAdobeを忘れました。その最も先進的にそれはインタラクティブなアニメーションのための新しい可能性を開きます。

BodyMovinは、これらの新しい可能性のいくつかを満たすために上昇するためのツール、プラグイン、システムのチェーンのリンクです。 Airbnbのロッティリーそして Facebookのキーフレームどちらもこれらの基礎を築く - そして、彼らはついに最も強力なアニメーションツールをWebにもたらします。

ボディモビンを使用するのはなぜですか？

SVGはインターネットを越えて、すべてが高品質、光、そしてスケーラブルであるべきであるという期待を持ってきました。ボディモビンはあなたの組成のすべてを任意のサイズでそのベクトル品質を維持する美しく鮮明なSVGにすべてをレンダリングします。そのGIFをライトアップするか、ユーザーが肥大ビデオファイルを読み込むように軽減することはもうありません。

アニメーションをエクスポートするプロセスを単純化するだけでなく、ボディモビンは開発者が新しいインタラクティブな経験で創造的な創造的な能力を増やす可能性があります。 Extensionが使用されていたいくつかの素晴らしい方法については、拡張子が使用されています - Interactive IK RigsからAnimate-As-You型のインタラクティブテキストのいくつかについて。

Web Devプロセスをさらに単純化するには、試してください。 ウェブサイトビルダー 。

Ae character and www. character — すべてが鮮明で光の両方であるWebに優しいSVGにレンダリングされています

エクスポートされたアニメーションは、他の要素のようにブラウザで操作でき、Webデザイン内のインタラクティブで実験的なツールとしてアニメーションを考えることができます。そして今、ボディモビンのために、あなたのアニメーションをWebに持ち上げることは決して簡単になりました。このチュートリアルでは、アニメーションのエフェクトからアニメーションをエクスポートし、ユーザーのクリックに応答する簡単なループアニメーションを作成する方法を学びます。

アフターエフェクトファイルを準備する方法

After Effects機能のサポートは大幅に向上しており、あなたは箱から直接良く良い結果を得ることを期待することができます。それは言われている、あなたの空想的な飛行3D層は素晴らしいプレイしないので、始める前に限界を知ってください。プロジェクトを開始する前に、常にBodyMovinの最新バージョンをダウンロードし、GitHubページをチェックして、現在サポートされている機能を確認してください。

楽しい部分に移動するには嫌くしすぎないでください... Tidyファイルはきちんとした心を作ります。この場合、彼らはブラウザから余分な作業を取り除き、あなたにシルキースムーズな再生を与えるのにも役立ちます。まず、あなたのコンテンツが完全なベクトル電力のための後遺症形状層にあることを確認したいと思うでしょう。 Illustratorファイルを整形レイヤに変換するには、単に右クリックしてベクトルレイヤから[シェイプを作成]を選択できます。この段階で形状ではない層は、画像に変換され、それらはベクトルとしてレンダリングされません。

次に、レイヤーとサブレイヤーを介してチェックしてください。何かを犠牲にすることなく、形状の内容を単純化することができる良い機会があります。グループ、パスの数を削減して、単なる裸の必需品を埋めるようにしてください。

マスクを手に入れてください

マスクはこの段階でスリップアップする簡単な方法です。 Alpha MaskがSVGレンダラを操作しますが、キャンバスに切り替えることを選択してください。マスクは性能が高くなる可能性があるため、それらを効率的に使用します。

レンダリング

BodyMovinは、このファイルを解釈してブラウザにレンダリングできるように、アニメーションデータをJSONファイルとBodyMovin.jsプレーヤーに変換するAfter Effects Extenceの拡張機能があります。

あなたのファイルが行くのが良いと思いますか？ウィンドウ＆gtを通してボディモビンの延長を開く。拡張子とその後ボディモビン。

更新を終了すると、このAfter Effectsプロジェクトのすべてのコンポジションのリストが表示されます。選択したコンプを選択してから、Webプロジェクトの内側にある保存先フォルダを選択します。あなたが幸せなときは、レンダリングをクリックして魔法を見ているのを見るだけです。完了したら、「完成」メッセージを受けることができます。おめでとう！プレイヤーがアニメーションを再作成する必要があるすべての情報を含むJSONファイルをエクスポートしました。

two characters — レイヤーを確認してください - それはサポートされていない機能またはAfter Effectsで使用される式である可能性があります

新しくエクスポートされたアニメーションをテストするには、Preview＆GTをクリックしてください。あなたが期待するものと少し違うように見えるものを見つけるかもしれないので、現在のレンダリングとタイムラインをスクラブすることを忘れないでください。あなたが何か問題を見つけたら、ジャンプしてレイヤーをチェックしてください - それはサポートされていない機能またはAfter Effectsで使用される式かもしれません。

ゴムホースなどのいくつかのエフェクトプラグインはボディモビンをサポートしています。ラバーホースはガイド層と隠れ層を利用します。これらを有効にするには、選択した構成の横にある設定COGをクリックして、必要な機能をチェックしてください。

すべてがよく見えるならば、あなたが後ろにエフェクトの後に去る前にあなたがする必要があるもう1つだけです。この段階では、アニメーションを記述した新鮮なData.jsonファイルを持つ必要がありますが、それを解釈するボディモビンプレーヤーはありません。拡張子では、右上にある[プレイヤーの取得]ボタンをクリックして、JSONファイルで保存します。

アニメーションをロードしてください

今すぐあなたが必要とするすべてを持っています、コードをまっすぐジャンプして、あなたのアニメーションを表示するために基本を置きましょう。

最初に新しいコンテナを作ります #Anim_Container アニメーションを握るため。あなたもそれを含める必要があります BodyMovin.JS. 閉じるボディタグの前のファイル。次に、ボディモビンをあなたのアニメーションについてのすべてを伝え、それを新しいコンテナにロードします。

ステップバイステップでセットアップステップを歩きましょう。

 var container = document.getElementByID（ 'anim_container'）;
//私たちのアニメーションを設定します

var animdata = {
コンテナー：コンテナ、
レンダラー： 'svg'、
オートパイ：TRUE、
ループ：true、
パス： 'data.json'
;;
VAR ANIM = BODYMOVIN.LOADANIMATION（ANIMDATA）;

アニメーションのすべてのパラメータを定義する必要があります。ボディモビンにアニメーションをロードしたいコンテナに指示してから、アニメーションをSVG要素としてレンダリングするように指示します。次に、ロードされるとすぐにアニメーションに再生するように指示し、それが終了したら開始を開始したいと思うようにします。

Pathプロパティは、Animation用のJSONデータファイルを見つけるためにBodyMovin Playerに指示します。クロスリソース共有ポリシー（CORS）により、JSONファイルへのアクセスに使用する手法は、サーバーまたはローカルサーバー上にある場合にのみ機能します。ローカルで作業するには、そのデータを変数に割り当てるJavaScriptファイルにそのData.jsonを作成できます。その場合、あなたのセットアップは次のようになります。

＆lt; script src = "js / data.js"＆gt; / script＆gt;
＆lt;スクリプト＆gt;
var container = document.getElementByID（ 'anim_container'）;
//私たちのアニメーションを設定します
var animdata = {
コンテナー：コンテナ、
レンダラー： 'svg'、
オートパイ：TRUE、
ループ：true、
AnimationData：データ
;;
VAR ANIM = BODYMOVIN.LOADANIMATION（animData）;
＆script＆gt;

ページを更新して、アニメーションはコンテナ内でプレイする必要があります。 Dev Toolsで選択して、アニメーション内の各要素が現在含まれていることがわかります。 ＆lt; g＆gt; タグ、そしてリアルタイムで変換されています。

驚くべき右に見えますか？あなたは今、ブラウザで美しい、鮮明なアニメーションを持っているはずです（視力で惨めなビデオタグなしで...）。アニメーションは常にそのコンテナに合うように拡大縮小されますので、先に進み、吹き飛ばします！

BodyMovinは、ロード後にアニメーションを制御するための強力な方法の範囲です。メソッドを呼び出す anim.pause（） または ANIM.SetDirection（） さまざまな方法で再生を操作できます。いくつかの例を見てみましょう。

ANIM.SetDirection（-1） 逆のアニメーションを再生します
anim.pause（） そして anim.play（） アニメーションを開始して停止します
anim.setspeed（0.5） ハーフスピードでアニメーションを再生します

インタラクションを追加します

次のステップでは、JavaScriptを通じてアニメーションに対話を追加するためのさまざまな方法を調べます。この例では、2つのセクションでAfter Effectsアニメーションをエクスポートします。セクションAとセクションBのセクションAから20を使用すると、1から20の枠が20から40のフレームを使用しています（三角は上下にジャンプしています）。ポゴスティックで）。

さて、ループでセクションAを再生したい場合（ユーザーがクリックした後のみ）再生とループセクションBを再生します。この方法でアニメーションを分割するためにPlaySegmentsプロパティを利用できます。このメソッドは2つの引数を取ります - 開始値と終了値を持つ配列と2番目のブール値 - ISFrameを取ります。これをtrueに設定すると、アニメーションにFRASSとして開始値と終了値を読み取るように指示しますが、FALSEはこれらの値を時間として読み取るように指示します。

 anim.pause（）;
anim.playsegments（[0,20]、true）

これを追加する最初のフレームで一時停止し、0から20フレームのアニメーションだけを再生します。 Aのアニメーションを設定したときに ループ：true. プロパティこれは再びセクションAを再びプレイします。

例全体を設定しましょう。この例では、アニメーションの2つのセグメントを使用しているので、2つの機能を作成します。

 var container = document.getElementByID（ 'anim_container'）;
//私たちのアニメーションを設定します
var animdata = {
コンテナー：コンテナ、
レンダラー： 'svg'、
自動再生：false、
ループ：true、
パス： 'data.json'
;;
VAR ANIM = BODYMOVIN.LOADANIMATION（animData）;
//アニメーションがロードされたとき、最初のループ機能を実行します
Anim.AdDeventListener（ 'DomLoaded'、FirstLoop）;
//再生機能を作成します
関数FirstLoop（）{
anim.playsegments（[0,20]、true）。
;;
関数secondloop（）{
anim.playsegments（[20,40]、true）。
;;
//クリックイベントを待機してください
container.addeventListener（ 'click'、関数（イベント）{
Anim.AdDeventListener（ 'LoopComplete'、SecondLoop）;
}）;

行く方法！これで、アニメーションはユーザーがそれをクリックするまでループを続けます、そしてそれから2番目のループを開始します。現在唯一の問題は、このようなジャンプが非常に突然であり、アニメーションの滑らかさを台無しにすることができるということです。

理想的な状況は、アニメーションに3番目のセクションを含めることです.Pogo Stickを開催してからジャンプすることに移行するものです。今あなたの構造は次のようになります：

最初のループ - フレーム0~20
遷移 - フレーム20から30
secondl - フレーム30から50

クリックしたまで、アニメーションが最初のループに留まるようにします。その時点で、あなたが現在入っているループの終わりを待ちたいと思うでしょう、そして遷移に移動します。移行が行われた後は、2番目のループに移動します。これは複雑に聞こえますが、私と一緒にいます！これがあなたのコードです：

 var container = document.getElementByID（ 'anim_container'）;
//私たちのアニメーションを設定します
var animdata = {
コンテナー：コンテナ、
レンダラー： 'svg'、
自動再生：false、
ループ：true、
パス： 'data.json'
;;
VAR ANIM = BODYMOVIN.LOADANIMATION（animData）;
//アニメーションがロードされたとき、最初のループ機能を実行します
Anim.AdDeventListener（ 'DomLoaded'、FirstLoop）;
//再生機能を作成します
関数FirstLoop（）{
anim.playsegments（[0,20]、真）。
;;
関数遷移（）{
anim.playsegments（[20,30]、true）。
Anim.RemoveEventListener（ 'LoopComplete'）;
Anim.AdDeventListener（ 'LoopComplete'、SecondLoop）;
;;
関数secondloop（）{
anim.playsegments（[30,100]、true）。
Anim.RemoveEventListener（ 'LoopComplete'）;
;;
//クリックイベントを待機してください
container.addeventListener（ 'click'、関数（イベント）{
Anim.AdDeventListener（ 'LoopComplete'、Transition）;
}）;

クリックして、Aを使用しています ループコメント リスナーはループの最後のフレームに到達するまで待機するために、 遷移（） 関数。ここでは最後のリスナーを削除し、次のフレームのセットを再生してから再度同じようにします。移行が終了した後、呼び出します secondloop（） 。

それでおしまい！

あなたは今日ボディモビンのいくつかの機能を務めましたが、あなたがプラグインについてもっと学ぶことに興味があるなら、あなたは情報の負荷を見つけることができますボディモビンジチチュブページ。より多くの例では、これまでに印象的なボディモビンコードペンコレクションをチェックしてください。

うまくいけば、このチュートリアルでは、Webのためのスーパークールアニメーションを生産するためにAfter EffectsとBodyMovinの使用を組み合わせることができるさまざまな種類の方法の考えを教えてくれました。

finished animation with triangles on pogo sticks — アニメーションの各部分の別のセクション

Webにエクスポートするアニメーションを設定して、エクスポートされたファイルをブラウザに移動し、[Animation]をクリックして再度反応させることができます。 MP4ファイルを超えて、将来的にはるかに豊富なWebエクスペリエンスを作成するためのボディモービンを使用してボディモービンを見ていることを考えてください。

開発プロセスでアニメーターを密接に巻き込むことができることは、ますます重要になっており、Webアニメーションの分野は信じられないほど速く動いています。新しい拡張機能、プラグイン、およびフレームワークの永遠に成長しているコレクションで、アニメーター、開発者はこのプロセスが時間の経過とともにより簡単かつ良くなると予想できます。私は将来の何が成り立つのかを見るのを待つことができません。

バックアップするファイルがたくさんありましたか？私たちをチェックしてください クラウドストレージ 選ぶ。

この記事は最初に登場しました ネットマガジン 2017年に。 ここで購読する 。

続きを読む：

SVGポリゴンを作成してアニメートします
14素晴らしいアドビ エフェクトプラグインの後
Web Animations用のストーリーボードを作成します

エクスプレスエフェクトアニメーションをHTML5にエクスポートする

ボディモビンを使用するのはなぜですか？

アフターエフェクトファイルを準備する方法

マスクを手に入れてください

レンダリング

アニメーションをロードしてください

インタラクションを追加します

それでおしまい！

操作方法 - 最も人気のある記事

水シミュレーションを作成する方法

19世紀のマスターのようにペイントする方法

様式化されたゲームアートワークを作成する方法

開発者のスキルを開発するための4つのヒント

画像の焦点を強調する方法

マヤでカスタムリグコントロールを作成する方法

鉛筆でおいしいテクスチャを作る方法

野生の西のねじれでマンガを作成する方法

カテゴリ