】APNGでスノーアニメーションロゴを作ってみた。contentかなめろぐ基本雑記ブログ。注目されそうなゲームや、便利なソフトウェアの使い方や紹介をしています。】APNGでスノーアニメーションロゴを作ってみた。福々アニメーション画像といえば、GIFを思いつく人が多いかと思います。GIFは256しか対応していないため、PNGなどの画像のように奇麗に表示することができません。GIFは透明色には対応していますが、半透明には対応していません。実際にAPNGを作ってみた。関連記事APNGとは?元々あったPNG形式のファイルをさらに拡張して、アニメーション化させたものです。APNGに対応していなくても、最初のフレームが静止画として表示されるようになっています。>参考元<対応しているブラウザFirefoxでは、2008年6月17日リリースのバージョン3.0以降でサポートされている。Operaでは、2017年6月22日リリースのバージョン46以降でサポートされている。Safariでは、2014年10月16日リリースのバージョン8以降でサポートされている[3]。Chromeでは、2017年6月5日リリースのバージョン59以降でサポートされている。Chromiumは2017年3月15日にAPNGの表示に対応した[4]。Edgeは主要ブラウザで唯一対応していない。引用元Microsoftのブラウザでは、未だに対応しきれていない現状です。Assemblerというソフトを使用して、作成することができます。Setting:ループ数を設定します。Frames:全画像のフレームの表示時間を設定します。Compression:圧縮方法等を設定します。Selected:選択した画像のフレームの表示時間を設定します。PNG:APNGファイルの書き出し処理を開始します。実際にAPNGを作ってみた。今回は、実際に一コマごとに画像を用意して、APNGを作ってみました。今回作った画像の解像度は640×480ですが容量は5MB以上あるので、ラインスタンプに直接使用することはできません。背景は透明色、再生フレームレートは60FPSです。画像をクリックすると実際の画像が表示されます。こちらは雪の結晶が舞い落ちていく様子をアニメーションにしたものです。こちらは雪の結晶が大きくなったバージョンです。こちらは雪の結晶の画像をみかんに置き換えたものです。「落下するミカン・・・ってなんだろう。お気づきかと思いますが、この画像はこのブログのヘッダー画像にしています。Insightsで計測したところ、かなり悪化してしまったのでAPNGを使用しています。画像は全部で13パターン用意していて、ページごとにランダムに表示されるようになっています。13パターンあるうちの一つは、雪の結晶ではなく、他のアイコンを使用しています。見かけたらラッキー!?かもです。今年度の冬の間のみ表示しています。Post【WordPress】アナリティクス動作不能!?もしかしたら勝手に挿入されている可能性あり。コメントデータの処理方法の詳細はこちらをご覧ください。