GIFアニメは次世代へ!動くpng画像、apng形式の作り方

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


(動かない場合、firefoxまたはChromeで確認すると動きます。)

上記の画像はapng形式のアニメーション画像。
gifアニメーションと違い、アルファ情報を含めることもできます。ファイルサイズもgifアニメと大差はないとのこと。
いつの間にかLINEクリエイターズスタンプにてapngの取り扱いも開始していて、今後アプリの作成なんかではどんどん主流になっていくと思うので今のうちに作り方を確認しておきたいと思います。

フリーソフトを使って作成します。

05

2016年11月現在、作り方としてはこんな感じです。pngさえ作ってしまえばfreeのソフトを通すだけなので作成自体は楽ですね。
連番のpng画像を作成する際は、Adobe Animate CCなどで書き出すと良いと思います。(Flashがいつの間にかこんな名前に変わっていたんですね…)

変換のためのフリーソフトもいくつか試してみたのですが、私は「アニメ画像に変換する君」が使いやすいと思います。
変換時に「LINEクリエイターズスタンプ」の項目があって、初心者でもわかりやすいです。

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


詳細な手順


①連番png画像を作り…
02

②「アニメ画像に変換する君」に全部ドラッグ
03

③用途とフレームレート、ループ回数などを設定し、「アニメ画像を保存する」をクリックするだけ。
04


これだけ。①の時点で非常に高いハードルはありますが、apng自体は非常に簡単に作れます。
同時にHTMLファイルも出力しておくと、動きの確認までもスムーズ。

アニメーションの動きを遅くしたかったのに、Fireworksのステートと同じノリでfpsの数値を増やしてみて一人で「?」となってしまいました。
そういえば、fpsって減らせば遅くなるんでした。

LINEスタンプの項目を選んだ場合は、規約に沿っていないと警告表示が出たりするのとっても親切です。
初心者でも安心。


web上で使用するには?

変換する君を使用して、用途の項目をwebページ用アニメーションに設定して出力すると、pngとwebpが生成されます。png自体にアニメーションのデータも含まれているはずなのですが、Firefoxでしか対応していないため、ChromeやSafariではwebpを表示させる必要があります。

変換する君をから生成されるHTMLの中身。該当箇所をコピペするだけでいいだなんて手間なしでとても良いですね。

「picture」要素で分岐しているみたいですね。


併せて読み込む要素をブラウザによって変更するjsも書き込みます。

apng-canvas.js
こちらを導入したうえで、分岐のjsを書いているようです。詳しくは出力されるHTMLを見てしまってください。


私の環境で動作確認したところ、FirefoxやChromeだけでなく、jsを読み込めばIE11、Edge、AndroidのChromeやmobile Safariでも大丈夫でした。
シネマグラフにもばっちり使えますね。




余談ですが、apngって何て読むのでしょう。アピング?エイピング?
今後、静かに論争となりそうですね。

執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

WordPress

アンケートフォームをホームページに設置できるWordPressプラグインの活用事例4選

WordPressでアンケートフォームを作成したい!けれどきちんと日本語対応しているプラグインが見つからない…と思ったことはありませんか? 弊社でリリースをしたフォーム作成作成プラグイン「Easy Form Maker」であれば、完全日本語対応で、通常のお問い合わせフォームだけでなく、アンケートフォームの作成を行うことができます。 今回は、実際にどんなアンケートフォームが作成できるかご紹介します。 目次1 Easy Form Makerって?2 イベントなどのフィードバックア […]

WordPress

カレンダーをホームページに表示できるWordPressプラグインの活用事例4選

イベントのお知らせをカレンダー形式で掲載したいけれど、なかなかWordPressの日本語プラグインでピッタリなものが見つからない…と思ったことはありませんか? 弊社でリリースをしたWordPressのイベントカレンダープラグイン「Event Calendar Maker」であれば、完全日本語対応で、ホームページ上に簡単にイベントカレンダーを掲載することができます。 今回は、実際にどんなシーンでこのカレンダーが活用できるのかをご紹介します! 目次1 Event Calendar […]

スマホアプリ

高齢者を見守るアプリ「みまもりシルバー」をリリースしました!

高齢のご家族が外出中、いつもと違う時間に帰ってこないと、ちょっとした不安が頭をよぎることはありませんか? 「道に迷っていないかな」「転んでいないかな」…心配事はなかなか尽きないですよね。 そんな心配をすぐに解消できるGPS見守りアプリ「みまもりシルバー」をリリースしました。 メールアドレスなどによる会員登録やサービス契約は不要!基本無料で、かんたんに使うことができます。 この記事では、アプリの魅力や使い方を詳しくご紹介します。 目次1 みまもりシルバーはなにができるの?1.1 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。