【APNGはGIFの次世代アニメ? 】APNGでスノーアニメーションロゴを作ってみた。

アニメーション画像といえば、GIFを思いつく人が多いかと思います。

しかし、GIFは256しか対応していないため、PNGなどの画像のように奇麗に表示することができません。また、GIFは透明色には対応していますが、半透明には対応していません。

APNGとは?

元々あったPNG形式のファイルをさらに拡張して、アニメーション化させたものです。

また、APNGに対応していなくても、最初のフレームが静止画として表示されるようになっています。

参考元

対応しているブラウザ

Firefoxでは、2008年6月17日リリースのバージョン3.0以降でサポートされている。

Operaでは、2017年6月22日リリースのバージョン46以降でサポートされている。

Safariでは、2014年10月16日リリースのバージョン8以降でサポートされている[3]

Google Chromeでは、2017年6月5日リリースのバージョン59以降でサポートされている。

Chromiumは2017年3月15日にAPNGの表示に対応した[4]

Microsoft Edgeは主要ブラウザで唯一対応していない。

引用元

Microsoftのブラウザでは、未だに対応しきれていない現状です。

APNG作成ツール

APNG Assembler

APNG Assemblerというソフトを使用して、作成することができます。

  • Playvack Setting:ループ数を設定します。
  • Delays – All Frames:全画像のフレームの表示時間を設定します。
  • Compression:圧縮方法等を設定します。
  • Delays – Selected:選択した画像のフレームの表示時間を設定します。
  • Make Animated PNG:APNGファイルの書き出し処理を開始します。

実際にAPNGを作ってみた。

今回は、実際に一コマごとに画像を用意して、APNGを作ってみました。

今回作った画像の解像度は640×480ですが容量は5MB以上あるので、ラインスタンプに直接使用することはできません。流石に容量が大きすぎます。

背景は透明色、再生フレームレートは60FPSです。

画像をクリックすると実際の画像が表示されます。

こちらは雪の結晶が舞い落ちていく様子をアニメーションにしたものです。

こちらは雪の結晶が大きくなったバージョンです。

こちらは雪の結晶の画像をみかんに置き換えたものです。

「落下するミカン・・・ってなんだろう。」

ヘッダー画像

既にお気づきかと思いますが、この画像はこのブログのヘッダー画像にしています。

最初はGIF画像にしていましたが、PageSpeed Insightsで計測したところ、かなり悪化してしまったのでAPNGを使用しています。

画像は全部で13パターン用意していて、ページごとにランダムに表示されるようになっています。

13パターンあるうちの一つは、雪の結晶ではなく、他のアイコンを使用しています。

見かけたらラッキー!?かもです。

今年度の冬の間のみ表示しています。

error

関連記事

返信を残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください