APNGのファイルを生成する

APNG形式のファイルを生成する流れを試してみます。

APNGについて

APNG(エーピング)はアニメーションに対応したPNG画像で、アニメーションGIFと比較して色数の制限がなく、背景の透過も可能な点が特徴です。

対応ブラウザはIEで非対応ですが、それ以外の主要なブラウザではサポートされています。
非対応のブラウザの場合、1フレーム目が静止画として表示されます。

生成方法

まずはAPNG生成のための素材の準備ですが、今回は以前投稿したAdobe Animateを使ってみるで作成したファイルを使って試してみます。
APNGで書き出したいファイルを開いて、ファイル > 書き出し > ムービーの書き出し を選択します。

ファイルの種類を「PNGシーケンス」に変更して保存します。
これでAPNG生成時に使用するフレーム毎の画像が連番で生成されました。

次にAPNGの生成ですが、アニメ画像に変換する君を使用します。
アプリをインストール後に起動して、先ほど生成した画像一式を開きます。

左上の用途を「Webページ用アニメーション」に変更します。

フレームレートやループなどの設定を適宜変更して、「アニメ画像を保存する」をクリックします。

拡張子がpngとwebpの画像ファイルと、htmlファイルが生成されました。
ページに埋め込んで確認してみます。

<p>APNG</p>
<img src="line.png">
<p>WebP</p>
<img src="line.webp">

ページ上でのアニメーションが確認できました。
APNGのデモページ