読者です 読者をやめる 読者になる 読者になる

面白きことは良きことなり

拙く未熟なiOSエンジニアの備忘録と戯言

GIFアニメなんて古い!時代はAPNGだ!(12/04追記)

画像アニメといえば、昔から知られたGIFアニメが有名で、
アニメーション画像が貼られていたらまず誰しもがGIFアニメだと思うことでしょう。

だがしかし!ITの世界は日進月歩で、GIFアニメなんて数十年前の代物だし古い!
今はアニメーション画像の形式にAPNG(拡張子は.apngまたは.png)というものがあるのを知っているだろうか?

お馴染みWikipedia
Animated Portable Network Graphics - Wikipedia

要するにアニメーションするpng画像である。

ご覧の通り透過処理したアニメーションももちろん可能
(APNGのアニメーションしているものをGIFアニメで貼り付けなければお見せできない皮肉)
f:id:aryzae:20161130010628g:plain

ちなみに、Hatena BlogにAPNGアップロードして表示させると↓ご覧の有様さ!
f:id:aryzae:20161130011208p:plain


実は大半の人は知らず知らずに見てたら、使っていたりする。
自分は知って驚いたのだが、LINEのアニメーションスタンプがAPNG形式だったりする。

ics.media


同サイトの記事で、APNGの動作環境が書いてあるのだが、改めて自分の方でも
iOS含めどこまで対応しているのか検証してみた。
ics.media

検証結果 (2016/11/30)

OS
表示箇所
結果
備考
iOS 10.1.1
写真(Photo Library)
×
1コマ目で静止
Safari
UIViewController
WKWebView
SFSafariViewCotnroller
UIImage
×
1コマ目で静止
iOS 9.3.5
写真(Photo Library)
×
1コマ目で静止
Safari
UIViewController
WKWebView
SFSafariViewCotnroller
UIImageView
×
1コマ目で静止
macOS Sierra 10.12.1
Safari 10.0.1 (12602.2.14.0.7)
ローカルにあるAPNGを直で読み込ませても動作する
Google Chrome 54.0.2840.98 (64-bit)
×
拡張機能"APNG"を入れればサーバ上のものは表示可能
Preview
アニメーションはしないが各コマが表示され、GIFアニメを開いた時と同じ挙動のため◯に
Windows10
InternetExplorer11 11.589.10586.0
×
1コマ目で静止
Microsoft Edge 25.10586.0.0
×
1コマ目で静止
Google Chrome 54.0.2840.99 (64-bit)
×
拡張機能"APNG"を入れればサーバ上のものは表示可能


もっと広く普及してGIFアニメと同等以上の環境で動作するようになってほしいものです。
GIFアニメよりも綺麗だし、容量は今の時代なら言うほど大きくならないし、対応していないところが多い今!
今対応するとアピールポイントになるんじゃないかな〜Hatenaさーん。

===

12/04 追記
表にUIImageViewの検証結果追加。
UIImageViewでもアニメーションして欲しかったが、残念。
UIImageViewのメソッドを使用してアニメーションさせるしかないかなぁ〜。