モバイルデバイスでのフリーズ問題に対する CSS3 ソリューション (アニメーション パフォーマンスの最適化)

1. CSS、jQuery、Canvasを使用してアニメーションを作成する

1. キャンバス

利点: パフォーマンスが良好、強力、ほとんどのブラウザをサポート (IE6、IE7、IE8 を除く)、描画したグラフィックを .png または .jpg グラフィックとして直接保存できます。

デメリット: HTML に依存し、スクリプトを通じてのみグラフィックを描画でき、アニメーションを実装するための API がありません (イベントとタイマーの更新に依存)。プログラムによってキャンバス上に表示されるテキストは実際にはビットマップであるため、検索クローラーはテキストを完全に無視します。テキストコンテンツもスクリーンリーダーでは読み取れません。

2.css3

利点: シンプルでコンテンツから分離されており、CSS アニメーションはレイアウトとペイントをトリガーしません (これらのプロパティを変更してもレイアウトとペイントはトリガーされません: backface-visibility、opacity、perspective、perspective-origin、transform)。

デメリット: ブラウザの互換性の問題があり、Android フォンがフリーズする可能性があり、タイプセッティング エンジンによって制限され、ページ全体の DOM 構造に密接に関連しています。

3. クエリ

利点: 互換性の問題がない

デメリット: すべてのフレームを再描画して再合成する必要がある (非常に時間がかかります)。

要約: モバイル アニメーション効果に関しては、CSS3 アニメーションを使用する方が jQuery アニメーションを使用するよりもはるかに効率的です。これは特に Android スマートフォンに当てはまります。そのため、モバイルアニメーションは CSS3 アニメーションよりも優先され、jQuery はアプリケーションロジックを単純に処理するためにのみ使用できます。 CSS3 アニメーションは、コンテンツのレイアウトに特殊効果を追加するための汎用的なソリューションですが、パフォーマンスの低いモバイル ブラウザーではレイアウトのパフォーマンスが制限され、目的の効果が得られない場合があります。ゲームなど、高いパフォーマンスが求められる特定のシナリオでは、キャンバスを使用するとパフォーマンスが大幅に向上します。

2. CSS3はモバイルデバイス上でフリーズする問題がある

CSS3 で作成されたアニメーションは iOS では 66% 実行されますが、Android では遅延が発生する場合があります。以下の点から問題を探してみるとよいでしょう。

a. レイアウトに影響を与えるかどうか
その場合は、ドキュメント ツリーに影響を与えないようにし、リフローを減らすために、アニメーション要素を可能な限り絶対的または固定的にします。

b. ハードウェアアクセラレーションを有効にするかどうか
「CSS3 アニメーションの使用」と「ハードウェア アクセラレーションの有効化」は異なるものですが、前者は後者につながる可能性があります。
Webkit には、ハードウェア アクセラレーションを有効にする魔法の万能薬があります: opacity: 1; または -webkit-backface-visibility: hidden;。

c. コストの高い属性はありますか (CSS シャドウ、グラデーション、background-attachment: fixed など)
可能であれば、写真もオプションです。これは、空間と時間を交換する最適化とみなすことができます。

d. 再描画領域がある場合は、アニメーション領域を縮小する必要があります。このステップでは最適化は制限されています。

e. アニメーションを生成するには、transform を使用するようにし、height、width、margin、padding などは使用しないようにします。以下の例 1 と 2 を参照してください。

PS: トランスフォームを使用すると、ブラウザはこの要素のビットマップを 1 回生成し、アニメーションの開始時に GPU に送信して処理するだけで済みます。その後、ブラウザはレイアウト、描画、またはビットマップの送信操作を実行する必要がなくなります。したがって、ブラウザは GPU を最大限に活用して、さまざまな位置にビットマップをすばやく描画したり、回転やスケーリングを実行したりできます。つまり、変換アニメーションは GPU によって制御され、ハードウェア アクセラレーションをサポートし、ソフトウェア レンダリングは必要ありません。

3. アニメーション処理中にちらつきが発生する（通常はアニメーションの開始時に発生します）

解決：

.キューブ{

   -webkit-backface-visibility: 非表示;

   -moz-backface-visibility: 非表示;

   -ms-backface-visibility: 非表示;

   背面の可視性: 非表示;

   -webkit-perspective: 1000;

   -moz-perspective: 1000;

   -ms-パースペクティブ: 1000;

   視点: 1000;

   /* その他の変換プロパティはここに記載 */

}

Webkitベースのブラウザでは、もう1つの効果的な方法は

.キューブ{

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

   変換: translate3d(0, 0, 0);

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

   変換: translate3d(0, 0, 0);

  /* その他の変換プロパティはここに記載 */

}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。