インストール後にちょっとだけ設定
Bodymovinをインストールしたら、ちょっとだけ設定をします。
メニューから
環境設定 > 「一般設定」タブ > 「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れます
読んで字の如く。「スクリブトによるファイルへの書き込み」を許可するかどうかのチェックで、Bodymovinを使ってファイルを書き出す時に、「あなたのPCの任意の場所に新しいファイルを作りますよ、いいですか」という確認。
ここにチェックを入れておかないと、書き出しの際にエラーがでる場合があります。
さっそく、SVGファイルを作りましょう
それでは、無事、インストールも設定も完了したということで、 アニメーションを作っていきましょう。もう一度、できることできないことの確認
第1回の記事の復習ですが、BodymovinはあくまでAfter Effects上のパスデータをSVGに置き換えるAdd-onです。なので、パスデータ以外は画像(PNG)に変換されます。 これを念頭におき、再度確認しましょう。エフェクトや3D、ビデオ、オーディオは非対応
- 画像ファイルの書き出し
- エフェクト類
- 画像のシーケンス
- ビデオ、オーディオ
- レイヤーの時間伸縮
- 3Dレイヤー
シェイプ、パス、プリコンポ、マスクなどは対応
- プリコンポーズ
- シェイプ(矩形、楕円、星型)、テキスト
- ヌルオブジェクトレイヤー
- マスク
- パスのトリミング
- タイムリマップ
- ブレンドモード(IE、Edgeを除く)
まずは、パスを用意
![](http://plife.studio/wp-content/uploads/2017/11/スクリーンショット-2017-11-27-18.33.13-1024x610.png)
アニメーションをつける
![](http://plife.studio/wp-content/uploads/2017/11/スクリーンショット-2017-11-27-18.34.55.png)
![](http://plife.studio/wp-content/uploads/2017/11/スクリーンショット-2017-11-27-18.37.02-1024x623.png)
書き出すコンポと書き出し先のフォルダを指定
![](http://plife.studio/wp-content/uploads/2017/11/スクリーンショット-2017-11-27-18.39.04-1024x267.png)
![](http://plife.studio/wp-content/uploads/2017/11/スクリーンショット-2017-11-27-18.40.43-1024x527.png)
![](http://plife.studio/wp-content/uploads/2017/11/スクリーンショット-2017-09-16-12.00.57.png)
![](http://plife.studio/wp-content/uploads/2017/11/スクリーンショット-2017-11-27-18.45.58のコピー-1024x164.png)
書き出しのセッティングをする
書き出すコンポ名の左にある「Settingsギアマーク」をクリックすると、プロパティ画面が開きます。 書き出し形式は「Glyphs」を選択し、「Save」をクリック![](http://plife.studio/wp-content/uploads/2017/11/スクリーンショット-2017-11-27-18.55.41-1024x508.png)
JSONファイルを書き出す
![](http://plife.studio/wp-content/uploads/2017/11/スクリーンショット-2017-11-27-18.57.50.png)
![](http://plife.studio/wp-content/uploads/2017/11/スクリーンショット-2017-11-27-18.59.04-1024x509.png)
htmlファイルで書き出してくれるDemoモード
実際にブラウザでどのように動作するかを確認できるDemoモードという書き出し方法がSettingsの中にあります。![](http://plife.studio/wp-content/uploads/2017/11/スクリーンショット-2017-11-27-19.06.40-1024x254.png)