SONICMOOV Googleページ

ChromeがAPNG (Animated PNG) に対応したので作ってみた

ChromeがAPNG (Animated PNG) に対応したので作ってみた

  • このエントリーをはてなブックマークに追加

Chromeのバージョン59でAPNG (Animated PNG)が対応されたみたいなので、早速作ってみたいと思います。

目次

APNG (Animated PNG)とは?

アニメーションをするPNGファイルで、The Animated Portable Network Graphicsの略です。アニメーションGIFのPNG版といったところですが、アニメーションGIFが256色しか扱えなのに対して、APNGは24bitのフルカラーでアルファチャンネルを扱えます。

また、アニメーションGIFでは輪郭がジャギって綺麗にアニメーションされなかったりしたのですが、それが滑らかなものになっています。

なので、

APNGは、アニメーションGIFよりも綺麗、ビューティフォー!

だということが言えます。

APNGのデモ

これが今回作成したアニメーションサンプルですが、輪郭が分かるように背景に色を着けてます。スムーズで綺麗ですね。
APNGデモサンプル

APNGのブラウザ対応状況

APNGのブラウザ対応状況は下記のページで確認できます。この記事の執筆時点ではIE 11、Edge 15、古いAndroidブラウザ、Chrome for Androidなどを除く、Firefox、Chrome、Safari、iOS Safariなどのブラウザが対応をしています。
https://caniuse.com/#search=apng

Microsoft Edge 15ではまだ未対応ですが、このページで「3 Votes」をクリック投票をして対応を急かしましょう!!

Microsoft EdgeとAndroid用のChromeが対応すれば、GIFアニメーションに変わって今後普及が見込まれるのではないかと考えられます。なお、現在の段階でブラウザが対応していない場合でも、静止画として表示される仕様になっています。

また、LINEスタンプアニメーションスタンプはこのフォーマットを採用しているので、これを制作する機会が増えることがあるのではないでしょうか。

APNGの作り方

Adobe Animate CCでアニメーションを作成

まずは、APNG用のアニメーションを作る必要がありますが、Photoshopのタイムラインでも作成するのもいいですけど、1枚ずつPNG画像を書き出すのは手間なので、高度なアニメーションを作成するならやはり同じくAdobeさんのAnimate CCを使うのがいいでしょう。

なので今回はAdobeさんのAnimate CCを使います。

Animate CCを触ったことがない人は、下記ページのチュートリアル「2Dキャラクターアニメーションの作成」までを読めば作成できるようになるかと思います。
Animate チュートリアル | Animate CCの使い方

また、LINEスタンプアニメーションスタンプを作成したい人は、予めガイドラインも読んでおくことをお薦めします。

準備ができたら、コツコツとアニメーションを作成します。
Animate CCでAPNGを作成する

PNGシーケンスに書き出し

アニメーションの作成が終わったらPNGシーケンスに書き出ししましょう。
「ファイル、書き出し、ムービーの書き出し」と進みます。
ムービーに書き出し

そしたら「ファイルの種類」を「PNGシーケンス」に設定して保存します。
PNGシーケンスを選択

確認のダイアログが表示されたら、「書き出し」で書き出しします。
書き出し

「アニメ画像に変換する君」のダウンロード

次の作業は、書き出しした連番のPNG画像をAPNGのファイルに変換するのですが、今回はICSさんが配布している「アニメ画像に変換する君」を使います。「アニメ画像に変換する君」は、LINEスタンプアニメーションにも使え、APNGだけではなくWebPファイルにも書き出しできます。(そういえばWebPってどうなったんだろう?)

こちらからダウンロードしてください。
Windows版 | Mac版

今回はWindows版での紹介となります。
(さっと試したい人は、Online APNG Assemblerのオンライン版を試すのもあり)

APNGへの書き出し設定

アニメ画像に変換する君は、インストールせずに使うタイプのソフトウェアなので、ダウンロードしたフォルダの中の「アニメ画像に変換する君.exe」を起動します。

こんな感じの画面が表示されたら、書き出ししたPNGの連番ファイルをドラッグ&ドロップして、設定を行います。用途は「Webページ用アニメーション」に設定します。LINEアニメーションで使用したい場合には、この「用途」を「Webページ用アニメーションスタンプ」を選択します。
PNGの連番ファイルをドラッグ&ドロップ

画質設定のタブでは、「APNGファイル出力」にチェックを入れ、すぐにサンプルを見たい場合は、「HTMLファイル出力」にもチェックを入れて、「アニメ画像を保存する」で書き出しします。7zipで圧縮するとかなり容量が小さくなりました。
APNGの書き出し設定

APNGの拡張子は、APNGではなく普通の「.png」です。これで作業は終わりで書き出ししたHTMLファイルを開けば確認できます。
PNGファイルで保存

JSライブラリ「apng-canvas」で非対応ブラウザでも再生

書き出されたHTMLソースを見てみると、JSライブラリで非対応ブラウザでも再生出来るようにしているみたいです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>APNGデモサンプル - SONICMOOV LAB</title>
    <meta name="robots" content="noindex, nofollow"/>
    <style>
      /* 確認用のCSS */
      a {color: #f2639c;}
      picture img, .apng-image { background: url(https://raw.githubusercontent.com/ics-creative/160609_animation-image-generator/master/app/imgs/opacity.png); }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/apng-canvas/2.1.1/apng-canvas.min.js"></script>
  </head>
  <body>
    <!-- Firefox と Safari で再生可能 (Chrome, IE, Edge ではアニメは再生できません) -->
    <img src="apng-demo-sample.png" width="640" height="360" alt="" class="apng-image" />
    <script>
      // APNG に未対応のブラウザ(例:IE, Edge, Chrome)では、JSライブラリ「apng-canvas」により表示可能にする
      APNG.ifNeeded().then(function () {
        var images = document.querySelectorAll(".apng-image");
        for (var i = 0; i < images.length; i++){ APNG.animateImage(images[i]); }
      });
    </script>
  </body>
</html>
  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

ビールが好き。 でも最近はワインと日本酒もいいなぁと思える今日この頃。

Webデザイナー募集!

イラストーレーター募集!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ

Webデザイナー募集!

新着の記事

mautic is open source marketing automation