1

css3 を使用して前後に連続的にアニメーション化するアニメーションのオブジェクトがいくつかあります。これを行うために、次のような宣言を作成しました。

@-webkit-keyframes wiggle {
0% {-webkit-transform:rotate(12deg);}
50% {-webkit-transform:rotate(-6deg);}
100% {-webkit-transform:rotate(12deg);}
}

そして、これを使用したい各オブジェクトは次のようにします。

.p4, .p5, .p6 {
-webkit-animation-name: wiggle; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: ease-in-out;
}

各オブジェクト間でランダムにしたいので、次のようなアニメーションの長さの変更があります。

.p4 {
-webkit-animation-duration: 5s; 
}

.p5 {
-webkit-animation-duration: 7s; 
}

.p6 {
-webkit-animation-duration: 8s; 
}

等々...

これは問題なく動作します-(これまでのところ Chrome でのテストのみ)。しかし、それはあまり最適ではないようです。

これを達成するためのより速い方法があるかどうか知りたいです。またはよりスリムな方法。JS でこれを実行できると思いますが、エンド ユーザーのリソースで何がより軽量になるかはわかりません。

より少ないリソースでこの種の基本的なアニメーションを実現するためのより良い方法はありますか? もしそうなら、どのように?

これに加えて、たとえば jquery を使用して同じアニメーションを作成する場合、必要なメモリ使用量を実際にテストするにはどうすればよいでしょうか? 最近、タブのメモリ使用量をテストするものを見つけましたが、結果に一貫性がないようです。つまり、コードが同じであっても、1 つのタブが他のタブよりも多くのメモリを使用している場合や、その逆の場合があります。

ご指摘ありがとうございます。

4

1 に答える 1

1

意図したとおりに動作する場合は CSS3 アニメーションを使用し、必要に応じて、サポートされていないブラウザーのフォールバックとして JS で何かを行います。

CSS3 を JS に置き換えることは、実際にはスリムになったり、リソースの消費量が減ったりするわけではありません。CSS3 はよりスムーズなアニメーションを持っているように見え、一部のブラウザーではハードウェア アクセラレーションと GPU を使用するため、JS では不可能なことです (少なくとも簡単ではありません)。

全体として、JS でより多くの記述を行うことになり、アニメーションを回転させるためのライブラリまたはプラグインも使用することになります。ほとんどのブラウザーでは滑らかではなく、より多くのリソースを使用するだけでなく、JS は、アニメーションをある程度滑らかにするために毎秒数回 css 変換値を設定する必要があります。

于 2012-05-15T23:22:46.170 に答える