（動かない場合、firefoxまたはChromeで確認すると動きます。）
上記の画像はapng形式のアニメーション画像。
gifアニメーションと違い、アルファ情報を含めることもできます。ファイルサイズもgifアニメと大差はないとのこと。
いつの間にかLINEクリエイターズスタンプにてapngの取り扱いも開始していて、今後アプリの作成なんかではどんどん主流になっていくと思うので今のうちに作り方を確認しておきたいと思います。
フリーソフトを使って作成します。
2016年11月現在、作り方としてはこんな感じです。pngさえ作ってしまえばfreeのソフトを通すだけなので作成自体は楽ですね。
連番のpng画像を作成する際は、Adobe Animate CCなどで書き出すと良いと思います。（Flashがいつの間にかこんな名前に変わっていたんですね…）
変換のためのフリーソフトもいくつか試してみたのですが、私は「アニメ画像に変換する君」が使いやすいと思います。
変換時に「LINEクリエイターズスタンプ」の項目があって、初心者でもわかりやすいです。
ダウンロード：アニメ画像に変換する君
詳細な手順
①連番png画像を作り…
②「アニメ画像に変換する君」に全部ドラッグ
③用途とフレームレート、ループ回数などを設定し、「アニメ画像を保存する」をクリックするだけ。
これだけ。①の時点で非常に高いハードルはありますが、apng自体は非常に簡単に作れます。
同時にHTMLファイルも出力しておくと、動きの確認までもスムーズ。
アニメーションの動きを遅くしたかったのに、Fireworksのステートと同じノリでfpsの数値を増やしてみて一人で「？」となってしまいました。
そういえば、fpsって減らせば遅くなるんでした。
LINEスタンプの項目を選んだ場合は、規約に沿っていないと警告表示が出たりするのとっても親切です。
初心者でも安心。
web上で使用するには？
変換する君を使用して、用途の項目をwebページ用アニメーションに設定して出力すると、pngとwebpが生成されます。png自体にアニメーションのデータも含まれているはずなのですが、Firefoxでしか対応していないため、ChromeやSafariではwebpを表示させる必要があります。変換する君をから生成されるHTMLの中身。該当箇所をコピペするだけでいいだなんて手間なしでとても良いですね。
「picture」要素で分岐しているみたいですね。
|
1 2 3 4 5 6 |
<picture> <!-- Chrome 用 --> <source type="image/webp" srcset="animation.webp" /> <!-- Firefox, Safari 用 --> <img src="animation.png" width="300" height="300" alt="" class="apng-image" /> </picture> |
併せて読み込む要素をブラウザによって変更するjsも書き込みます。
apng-canvas.js
こちらを導入したうえで、分岐のjsを書いているようです。詳しくは出力されるHTMLを見てしまってください。
私の環境で動作確認したところ、FirefoxやChromeだけでなく、jsを読み込めばIE11、Edge、AndroidのChromeやmobile Safariでも大丈夫でした。
シネマグラフにもばっちり使えますね。
余談ですが、apngって何て読むのでしょう。アピング？エイピング？
今後、静かに論争となりそうですね。
