3

私は CSS3 ベースのアニメーションに取り組んでおり、背景として線形グラデーションを持つ div があり、-webkit-mask-image プロパティを使用してマスクとして PNG を使用しています。

アニメーション化するには、マスクをグラデーションの上に移動します。それは正常に動作し、見た目も素晴らしいですが、私の問題は、CPU をちょっと殺してしまうことです。

アニメーションは次のとおりです。

@keyframes moveMask {
    0%  { -webkit-mask-position: 0px 0px;}
    100% { -webkit-mask-position: 2000px 0px; }
}

そして、私はこれを使用してそれを呼び出しています:

animation: moveMask 200s linear infinite alternate;

次のトリックを追加しようとしましたが、何も変わりませんでした:

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

最適化する方法について何か考えはありますか?

4

1 に答える 1

0

Rich Bradshaw が指摘したように、あまり最適化されていないことがわかると思います。ただし、同様の効果を得るには、アニメーション GIF を作成し、キャンバス サイズを 2 倍にしてから、キャンバスの他の半分のすべてのフレームに GIF の静的バージョンを配置します。そうすれば、アニメーションは常にバックグラウンドで目に見えないように再生され、アニメーション バージョンを表示したいときはいつでも画像の位置を変更するだけで切り替えることができます。

この手法の問題点は、アニメーションをトリガーしたときに必ずしも最初からアニメーションが開始されないことです。これは、特定のアニメーションにとって重要な場合とそうでない場合があります。

于 2012-12-21T15:53:12.490 に答える