まず、PNGの親aであるMNGに目が行きました。 「フォーマット仕様は2001年にリリースされたため、おそらくすべての最新のブラウザーに実装されています！」 そして、最初の失望が私を待っていました。 このフォーマットは実装するには複雑すぎるため、Mozillaの実装には、他のすべてのフォーマットと同じ数のコード行が含まれていたため、製品から削除されました。 他のブラウザメーカーは、この形式を実装しようとしてさえいないようです。 もちろん、Netscapeプラグインをサポートするブラウザー用のプラグインがありますが、これはFlashよりも優れています。 おそらく、形式が時代を先取りしすぎていることに注意してください。 フィーチャの説明から判断すると、これはこのようなラスターSVGです。
さらに検索すると、APNG形式になりました。 形式は2ルーブルのように単純です。ファイルには、いくつかの小さなニュアンスのある前のフレームからのフレームの変更が含まれています。 しかし、最も重要なことは、この形式をサポートしていないブラウザは静的な画像を表示することです。 一般に、形式の機能はGIFに似ています。 Mozillaによって、巨大なMNGの代替として提案されました。 Firefoxでのチェック-すべて正常に動作します。 オペラも。 Chromeで開いて...静止画像を取得します。 何が起こったのか：Mozillaは、PNG仕様にAPNGを含めることを提案しました。 投票により、このアイデアは拒否されました。 現在、この形式をサポートしているブラウザとサポートしていないブラウザがあります。
写真は私の前にはっきりと現れました。
Mozilla：あなたのフォーマットは悪いです、あなたはアニメーションPNGで何も理解していません！ 私たちはチェスや詩人なしで自分で作りました。 それを仕様に含めてください！
PNG開発グループ：どうぞ！
よくあることですが、人間のうぬぼれのせいで、私たちは10年も昔のGIFを楽しんでいます。
そして、アイデアが浮かんできました。ビットマップ画像をSVGに挿入できるようです。
山がモハメッドに行かない場合
実験のために、私はMozillaから写真を借りました：
画像を個別のフレームに分割します。
などなど。 25フレームになりました。
最大フレームのサイズに等しいSVGのサイズを指定し、画像を挿入します。 ちなみに順序は重要ではありません。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="148" height="148"> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_001.png" /> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_002.png" /> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_003.png" /> … <image x="0" y="0" width="148" height="148" xlink:href="spinfox_024.png" /> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_025.png" /> </svg>
さらに、フレームを単純に順番に重ね合わせることを試みましたが、透明度を考慮せず、キツネの耳から太陽を取得しました（IE9でも同じ効果が見られます）。
この効果を使用して、APNGモードの1つを実装できます。前のフレームの上に次のフレームを描画します。
次に、opacityプロパティをアニメーション化します。 フレームをアニメーション化して調整し、フレームを見えないように移動できます。
ここでは、透明度がスムーズに変化し、ループまたはフリッカーが現れるという事実に問題が現れる場合があります。 このために、calcModeを「discrete」として指定します。
参照値のリスト：値= "1; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0 ; 0; 0; 0 "。 ご覧のとおり、これが最初のフレームです。 最初の値は1-画像は透明ではありません。 他のすべてのフレーム-完全に透明。
アニメーションの継続時間（dur）は、フレーム数で割ったときに1フレームの時間が得られるように選択されます。 画面上でフレームの長さを2倍にする必要がある場合、参照値のリストを2倍にするか、1つの値の継続時間を変更する必要がありますが、これはやや複雑です。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="148" height="148"> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_001.png"> <animate attributeType="CSS" attributeName="opacity" dur="1.25s" values="1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0" calcMode="discrete" repeatCount="indefinite" /> </image> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_002.png"> <animate attributeType="CSS" attributeName="opacity" dur="1.25s" values="0;1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0" calcMode="discrete" repeatCount="indefinite" /> </image> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_003.png"> <animate attributeType="CSS" attributeName="opacity" dur="1.25s" values="0;0;1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0" calcMode="discrete" repeatCount="indefinite" /> </image> … <image x="0" y="0" width="148" height="148" xlink:href="spinfox_024.png"> <animate attributeType="CSS" attributeName="opacity" dur="1.25s" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1;0" calcMode="discrete" repeatCount="indefinite" /> </image> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_025.png"> <animate attributeType="CSS" attributeName="opacity" dur="1.25s" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1" calcMode="discrete" repeatCount="indefinite" /> </image> </svg>
不便な点は1つだけです。アニメーションは多くのファイルで構成されています。 SVGに画像を直接埋め込むことで、data：URLを使用してこの問題を解決します。
最終結果
元のAPNGのサイズ： 613321バイト。
SVGサイズ： 799692バイト;
SVG圧縮gzipのサイズ： 601409バイト。 オリジナルよりもさらに少ない！
PNGフレームはpngoutを使用して最適化されました。
注意深い読者は、この「秘密のテクニック」がIEで機能しないことに気付いているかもしれません。 彼にGIFまたはFlashを使って別のコードを渡し、IE10を待ってシャベルを準備することをお勧めします。