JavaScriptとCSS3アニメーションの併用まとめ_JavaScriptスキル

Html5 と CSS3 が徐々に主流になってきましたが、私はまだ js を使用して簡単なアニメーションを作成することに非常に慣れています。デスクトップブラウザでは、すべてが css3 をサポートしているわけではないためです。ユーザーもまた非常に奇妙です。すべてのユーザーがユーザーの習慣を身につけることができるわけではありません。 win7.win8はXPほど便利ではないと感じている人は常にたくさんいます。しかし、携帯電話の側面は大きく異なります。モバイル ブラウザの HTML5 と CSS3 のサポートは依然として優れています。ただし、携帯電話ハードウェアの処理能力は非常に限られています。クアッドコアや8コアの携帯電話が蔓延している今日、私のようにデュアルコアやシングルコアの携帯電話を使用している人もまだいます。 jsは良いのですが、露出が少ないので、感覚がうまく調整できません。単純なページ スライドは、i7 PC では非常にスムーズに実行されますが、私のデュアルコア携帯電話では、フリーズ、フリーズ、フリーズ、そしてフリーズが繰り返し発生します。とても憂鬱です。このため、私は長い間探していて、たくさん読みました。最後に、少し前に、css3 を使用してアニメーションを実行するという比較的簡単な方法を見つけました。

以前は、Jquery の animate やその他のアニメーション関数に加えて、要素の margin、width、top、その他の属性を周期的に変更するために setTimeout や setInterval を使用する人が増えていました。だからこそ迷ってしまうのです。

まず、setTimeoutとsetIntervalを0msに設定すると継続的に実行されなくなります。 iscroll でデバッグ中にこの秘密を偶然発見しました。タイマー遅延の計算はブラウザの内蔵時計に依存しており、時計の精度は時計の更新頻度に依存することがわかりました。 IE8 および以前の IE バージョンの更新間隔は 15.6 ミリ秒です。終わりました。10ms で 1px の変位を実行したいのですが、間に合わないのです。

それで、カードはどうなったのですか?コードがうまく書かれていないため、行き詰まっています。結局のところ、js はシングルスレッドなので、時間のかかるアクションが発生すると、UI が応答しなくなる可能性があります。 setTimeout を使用していますが、setTimeout があるからこそ、インターフェイスは不安定ではあるがスムーズではないように見えます。今回の setTimeout の実行後、次の実行までの間隔で別の時間のかかるアクションが発生する可能性が高いため、setTimeout の実行は無限に遅延されます。じゃあ何？カード！ただし、このカードが使用される次の理由は、元の属性を変更するときにブラウザのレイアウト (つまり、再レイアウト) を誤ってトリガーしてしまうことです。この問題は時間がかかると言われていますが、時間がかかると言われていますが、多くの場合は無視できます。しかし、多くの場合、それは無視できません。

上記の 2 つの段落に加えて、別の問題があります。つまり、多くの携帯電話では、常にフレームが次から次へと続くように感じられ、一方のフレームが長く、もう一方のフレームが短くなる可能性があります。これは本当に人々を麻痺させる可能性のあるリズムです。なぜこのようなことが起こるのでしょうか? settimeout の遅延がまだ関係しています。ドロップされたフレーム。この問題には、モニターのリフレッシュ頻度が関係します。複雑すぎます。

最終的にCSS3を選択し、jsは要素の属性を動的に変更し、トランジションを使用してアニメーションの実行時間を制御しました。例:

コードをコピーします コードは次のとおりです:

js:

コードをコピーします コードは次のとおりです:

$("#test").width(200);

このようにすると、このdivの幅は1秒後には200pxになります。孫悟空が桃になって急に大きくなったわけではなく、立ち止まることなくゆっくりと前に進んでいきました。また、CSS アニメーションを使用することには、時間のかかる JS の影響を受けないという利点があります。ブラウザーの UI スレッドと js スレッドは相互に排他的ですが、これは CSS アニメーションには当てはまりません。また、多くのブラウザー (Chrome など) でハードウェア アクセラレーションを有効にすることもできます。ブラウザーの再レイアウトは通常、それほど明白ではありませんが、大規模な再レイアウトは避けるようにしてください。したがって、ブラウザーがこのレイヤーを独立してレンダリングできるように、アニメーション要素に -webkit-transform: translationZ(0); または -webkit-transform: translation3d(0,0,0); を追加します。再レイアウトがやむを得ない場合でも、この方が面積は小さくなります。マージンの代わりに翻訳を使用することは、確かに非常に賢明な決定です。

最後に、変更が発生したときに再レイアウトをトリガーする、一般的に使用されるプロパティをいくつか示します。

コードをコピー コードは次のとおりです:

幅
身長
パディング
マージン
表示
ボーダー幅
境界線
最小身長

以上がこの記事で説明した内容のすべてであり、JavaScript と CSS3 の学習に役立つことを願っています。また、不足している点があれば補足してください。