IEの落とし穴pngアニメーション

ここにいる私たちは皆、IE6が好きで、IE7が少し好きではなく、IE8を（すべてではなく、常に認めているわけではありませんが）心から信じています。 ここでは、PNG形式を理解するのではなく、ソフトブラウザーの第6版の機能を扱う多くの方法について書いています。 しかし、これらの議論はすべて、単にpng画像を読み込むことに関するものでした。 そして、私の目の前には、もっと面白い（そしてもっと難しい）タスクがありました-これらの写真のアニメーションです。 また、写真の位置とサイズを変更するだけのアニメーションが必要な場合は、すべてうまくいきます。 透明度がスムーズに変化するアニメーションを作成する必要がありました。 そして、新しいトリックが登場しました。

AlphaImageLoader

AlphaImageLoaderが何であり、png.htc がどのように機能するかを知っている場合は 、次の部分にスキップできます。 さて、知らない人のために-png.fixのメカニズムを簡単に説明しようと思います。



MSは、他の開発者と同様に、ブラウザにいくつかの特別な機能を組み込むことを好みます。 これらの機能の1つ（バージョン4.0以降）は、「マルチメディアスタイルの視覚効果」を作成するためのフィルターです（ MSDNの詳細）。 バージョン5.5以降、IEにはAlpahaImageLoaderフィルター（ MSDNの詳細）があり、これを使用して、背景とオブジェクトのコンテンツの間に透明なpngを含む画像を表示できます。 このフィルターをJSと組み合わせて使用​​すると、IE 5.5および6.0でpngをロードするプロセスを自動化できます。 最も一般的な方法は次のようになります。



function PngForIe(elem)

{

elem.style.filter = "progid:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + elem.src + ');"

elem.src=blank; // blank 1x1.

}







この機能は何をしますか？ まず、正しく読み込まれた（AlphaImageLoaderを使用して）pngを背景と誤って読み込まれたもの（修正したもの）の間に配置します。 そして、間違った画像を完全に透明な画像に置き換えます。 そして、私たちが見たいものを正確に見る-通常のpng'shku：



スタイルの必要に応じて画像のサイズを変更するには、 AlphaImageLoaderでsizingMethod = 'scale'パラメーターを追加する必要があります。



png'shekを恐れることはできず、それらの位置とサイズを変更することでそれらを大胆にアニメーション化することもできません（ただし、変更すると、修正を再度開始する必要があります）。 しかし、この画像の透明度を変更したい場合はどうなりますか？ 実際、IEの透明度（5.5-7.0）もフィルターを介して設定されます。

フィルターと満たされていない希望

最も興味深いものに渡します。

修正された画像にアルファフィルターを追加しようとしています。画像と透明度の透明度係数が乗算され、...期待したものがまったく得られないことを期待しています。 Kosyakovは、写真で何をしようとしているかに応じて、一度にいくつか表示されます。



何が見えますか？

最初の画像（ alpha（opacity = '100'） ）は、不透明度が0より大きい場所では不透明になりました。

2番目の画像アルファ（不透明度= '70 '）は一見、元の画像とほぼ同じですが、よく見ると、平滑化されたエッジがなくなり、正確に2色が残っていることがわかります。 実際、不透明度は70％（不透明度は正確に不透明度係数です。0％は透明、100％は不透明度）は、ほとんどの元の画像のこの特性と一致します。

したがって、画像が元のサイズで表示される場合、完全に透明なピクセルは同じままであり、他のピクセルの透明度はアルファフィルターの不透明度パラメーターの値（パーセント）に等しくなります。 したがって、pngがgifより優れている点はすべて失われます。

しかし、3番目の図で何が起こるかは、pngを使用したいという欲求をまったく落胆させます。 画像のサイズ変更と透明度の変更を同時に行おうとすると、完全に透明だったものが突然黒くなります！



IE7には、最初はpngに非常に友好的だった妨害が表示されたことに注目する価値があります。 さらに、 l2kのコメントに記載されている別の不具合が表示されます。

テキストにアルファフィルターを使用して（IE7ではデフォルトで）アンチエイリアスを使用すると、「フィルターと不当な希望」の例と同じ妨害が得られます。 つまり、美しい透明フォントの代わりに、アンチエイリアスを使用せずに太字のステップフォントを取得します。

誰が責任を負い、何をすべきか

問題がある場合は、何らかの方法で対処する必要があります。 5枚のスライドのアニメーションを作成する必要があるため、最初に思いついたのは、透明度の異なる5枚の写真を正直に作成し、AlphaImageLoaderで簡単に読み込むことでした。 ただし、画像を置き換えるとは、アニメーションで使用する画像を事前に読み込む必要があることを意味します。 原則として、これについて複雑なことは何もありませんが、さらに検討する価値があると判断しました。

次のオプションは、pngでスコアを付けてgifを使用することでした。 この場合、丸みは失われますが、ひどいことは起こりません。 しかし、私たちは簡単な方法を探していません！



そして、これが私の心を越えた考えです。 透明度を乗算または分割する方法はわかりませんが、追加できます！ つまり、1枚の写真を元の写真の5倍透明にし、そのコピーの5枚を重ねて表示することができます。アニメートするときは、交互に表示しないでください 。



ここから、何が出てきたのか、スクリーンショットがどこから来たのかを見ることができます（IEを見るか、何も表示されません）。



PS IE8がこれらすべてにどのように反応するかを見ました。 ただし、フィルターを使用したKosyakovは、style = "opacity：0.7" upsetsを理解していないという事実は見つかりませんでした。