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 デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

プログラミング

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ②

前回はLINE Developersでチャネル登録までを行いました。 今回は実際にPHPでログインを実装していきます。 目次1 初期設定を定数にする2 LINE ログインのURLを作成する3 コールバック時の処理4 最後に 初期設定を定数にする 最初にdefineでチャネル登録した情報やAPIのURLを定義します。 メールアドレスを取得したい場合はLINE_SCOPEに「email」を追記してください。 LINE ログインのURLを作成する LINEログインに利用するログイン […]

Webサービス

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ①

今回はLINEログインです。 LINEログインは他のソーシャルログインと違って、電話番号必須なので、ユーザーがアカウントを無限に発行するということがなく、しかもOSに関係なくアカウントを使用できるので、特にB2Cサービスを考える場合には是非導入を進めたいと思います。 逆に法人サービスで使う場合、法人担当者が個人のLINEアカウントを使用することはないと思うので、あくまで個人向けサービスがよいかなと思います。 LINEログインについての概要はこちらに詳しく書いています。 htt […]

プログラミング

【PHP】ソーシャルログインに対応したお話(Apple ID編) ②

目次1 前回のおさらい2 実装に必要な情報3 PHPで実装してみる4 戻り先の処理4.1 composerでライブラリのインストール4.2 処理の説明4.3 実際のソース5 最後に 前回のおさらい 前回は「Appleでサインイン」を実装する前の下準備をまとめました。 今回は実際にPHPで実装をしたいと思います。 なお、ソーシャルログインについて実はFirebase上でできるぽいのですが、今回はそれを使わずに実装したいと思います。 実装に必要な情報 前回Apple Develo […]

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

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

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

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