0

Webkit アニメーションを使用して単純な雨の効果を適用しようとしています。iPad 2 では問題なく正常に動作しますが、新しい Retina ディスプレイ iPad では動作が非常に遅くなります。

.rain{
width:100%;height:100%;
background-image:url('rain.png'),url('rain3.png'),url('rain2.png');
-webkit-animation:rain 1.5s linear infinite}
@-webkit-keyframes rain{0%{background-position:0 0}100%{background-position:900px     1000px,400px 400px,300px 300px}
}

iOS で 3D 変換を使用してハードウェア アクセラレーションをトリガーするという言及を見たことがありますが、このクラスに直接適用するとアニメーションが停止します。これらが違いを生むかどうかさえわかりません。

-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
-webkit-transform: translate3d(1);
-webkit-transform: scale3d(1);

この質問は、 iOS Webkit animation performance has only on retina displayの複製である可能性があることは承知していますが、それはずっと前に尋ねられ、実際の結論はありませんでした。

この問題の解決策はありますか? または、パフォーマンスをわずかに向上させるものはありますか?

4

1 に答える 1

0

雨のイメージは網膜ですか？背景サイズのタグが表示されていません。そうではないと思います。これは、webkit がこれらの画像のそれぞれにアンチエイリアスを適用する必要があることを意味します。また、アンチエイリアス処理された画像はキャッシュされないため、継続的にアンチエイリアスを再適用する必要があります。画像の解像度を 2 倍にして、background-size プロパティを使用してみてください。

于 2013-07-02T18:56:33.043 に答える