APNG（アニメーションPNG）の作成方法
ここでは、AfterEffects（アフターエフェクト）とウェブツールを使用した、高利率的なANPG（アニメーションPNG）の作成方法を示します。
APNG（アニメーションPNG）とは
APNG、アニメーションPNGとは、アニメーションGIFのPNG版と理解して頂ければ良いかと思います。アニメーションGIFはPCの環境に依存せず、ブラウザ上で動作するアニメーションという意味では非常にありがたい仕組みです。とはいえ、非常に歴史の古い形式ということもあり、画像の解像度が低く、ファイルサイズが思い上に、PCのリソースを必要とする「３重苦」です。
その３重苦に対して、高解像度、軽量、高レスポンスになったものがAPNGというわけです。
APNGの概要
効率的にAPNGを作成するための手順として、
①AffterEffectsで動画を作成
②PNGファイルの書き出し
③ANPGアニメーション化ツール（ezgif.com）でアニメーション化
上記の手順で行います。
今回は、〇の点滅アニメーションを作成しながら手順を確認します。
AfterEffectsで動画を作成
動作を滑らかにするためにフレームレートは60fpsで、デュレーションは1.5秒で設定します。
ツールで随円形ツールで、32pxの円を作成します。
アニメーションとしては、ポンッ！とはじけて表示されて、小さくなりながら、透明になっていくという設定にします。
サイズ0.0、不透明度0％、0.00.07で、サイズ100%、透明度63%（MAXとします。）、00:01:40で再びサイズ０，不透明度0％。効果としては、ポンッ！と表示させるために、00:00:00から00:00:07までイージーイーズで調整。というイメージです。
では順番に
タイムライン：00:00:00 で、サイズ0.0、不透明度0％。ストップウォッチをクリック。
タイムライン：0:00:00:07へ移動。サイズ100%、透明度63%に変更
タイムライン：0:00:01:49 で、で、サイズ0.0、不透明度0％。
イージーイーズを実現するために、タイムラインで該当の２か所をマウスでドラッグして選択します。
ポイント上で、右クリック、キーフレーム補助、イージーイーズを選択します。
すると、砂時計マークがでますので、砂時計を選択して、「グラフエディター」を開きます。
黄色のハンドルをつかんで、左に引っ張り、このような形にします。
これで、ポンッ！と表示されるようになりました。念のため、動画を確認します。
この動画をPNGファイル群に書き出します。
Cntr + m （ショートカット）
出力モジュールを設定します。
形式は、PNGシーケンス、チャンネルは、RGB + アルファ です。
レンダリングボタンをクリックします。
以上で、アフターエフェクト側のアニメーションの元画像のPNG出力までは完了です。
次に、出力したPNGファイル群を下記URLのアップロードして、アニメーションPNGが完成します。
ANPG MAKERにアクセスします。
先程作成したファイルをすべてアップロードします。
フレームレートを16msに変更して、62.50FPSになっているか確認して、APNGの生成を実行します。
以上で、APNGファイルの作成は完了です。
付録
Affeter Effectでコンポジットにコンテンツを合わせる方法。
まずは、コンポジションのサイズを確定させ、コンテンツ上で右クリック、トランスフォーム、コンポジションに合わせる。をクリックすると。すべてのタイムテーブル上のものがコンポジションサイズに変更されます。
