アニメーション画像の テストをしています。
2017/7/7 七夕飾りのアニメーションを作りました。
同じものでも Gifアニメでは618KB、Apngアニメでは1223KBとファイルサイズが倍も大きいです。
(EdgeやIEでは動かないかもしれません。
ブラウザは、FireFox又はChromeで見て下さいね)
Gifアニメとの比較はこちらを どうぞ!
→
七夕の短冊飾ります 2017 ~ ベルルのお絵かき・ふりーく
→
七夕の短冊を飾ろう:2017 ~ パそぼのあれこれフリーク:Part2
~ ~ ~ ~ ☆ ~ ~ ~ ~ ☆ ~ ~ ~ ~
アニメーション画像の テストをしています。
Gif画像は、よく使っていますが、今回はこれ。
PNGのアニメーション版 APNG
(Animated Portable Network Graphics)
↑ 動いて、見えますか (*^_^*)♪
★ 見るには? 2017/7/7 時点
◇ Webブラウザ
・
FireFox では、なにげに アニメーションが表示されます。(*^_^*)♪
・ Chromeは 以前は要プラグインでしたが、今は動いています。
→
APNG - Chrome Web Store google chrome用のアドオンDLページ
・ Edge、IE不可。
◇ PCで、PNGアニメーションを表示できるビューア
「XnView」 (未利用)
◇ iOS 8では APNG がサポートされているそうです。(今度確認しますね!)
★ 作成は?
では、作ってみましょう
◇ まずは試しに、GifアニメをAPNGアニメに変換!
「GIF to APNG」 SourceForge.net ~ gifアニメをapngに変換するフリーソフト
Gif画像 → GifをAPNGに変換 ~ FF、CChromeとも表示するのは右端
オリジナル (seesaaのapng) (HPのPNG)
◇ PNG画像から APNGアニメーション作成
APNG Assembler ~ apngアニメを作成するフリーソフト
PNGからAPNG作成 (手動で時間設定もできます)
(seesaaのapng) (HPのPNG)
◇ 画像作成から 全部やるなら、
Gimp がよさそうです。
プラグイン 又は、Gimp に 「GIMP Extensions」追加
→
GIMP の機能を大幅に拡張してくれるツールパック「GIMP Extensions」
→
GIMPの使い方 ~プラグイン~
★ 公開は?
作ったら、ブログにアップ!! したいですが・・・、
ほとんどのブログでは、UP出来る画像が「JPG、PNG、GIF」だけです。
幸い、seesaaブログなら「APNG」もUPできるので、先に、seesaaブログにAPNGをアップして記事を書きました。
⇒
アニメーションテスト ~ Myブログ「ベルルの欲しいなブログ」
ここのブログでは、その画像をリンクで紹介しています。
でも、「APNG」は、Chromeプラグインでは、表示不可とわかりました。
一方seesaaブログに「PNG」でアップすると単なるPNG画像として取り扱われます。
結局、一般のHPに画像アップして ブログにリンク表示なら、Firefox、Chromeとも表示することがわかりました。
以上、いろいろ調べて、APNG画像を作成しました。
今回は 作成したファイルの表示の確認が主目的です。
Gifアニメより きれいにできるそうですが、そのテストはこれからになります
未だ一般的ではないので、慌てることはないでしょう。
待てば、使いやすいツールが出てくるかもしれません。
参考
・
2015年02月04日 PNG型式でアニメーションができる! APNG型式ではない!
・
フルカラーアニメが作れる!?GIFアニメに代わる新たな拡張子APNGが凄い!! 2014年10月10日
テスト:ウィキペディアから お借りし一旦 PCに保存してからUPした png (動きません・・・)
これは、↓ Wikipedia の apng のページの 画像を リンク表示させたもの。
★ FireFoxでは、アニメーションが表示されます
(chromeは 要プラグイン。 IE不可。)
→
APNG - Chrome Web Store google chrome用のアドオンDLページ
iOS 8でも APNG がサポートされたそうです。
今後は、どうなるのでしょう。
もう少し、勉強します。
2016/12/23
久しぶりに Apngアニメーションを作ろうと思った!
Windows10のPCに ソフトをDLしたが、動かない。!!(>д<)ノ
→
APNG Assembler ~ apngアニメを作成するフリーソフト
Windows7のパソコンなら同じソフトを使えるのでそこで作成したが、やり方をすっかり忘れていて、難航した・・・。
その後、Windows10のPCでも 作成できました。(*^_^*)♪
無事、完成! ⇒
Myブログ:「X’masツリーを飾ろう:2016」
(人気定番記事)ninkiteiban