前回の記事「html5の記事: ページジャンプを実現する5つの方法(コード共有)」では、html5を使って現在のページにジャンプする5つの方法を紹介しました。次の記事では、ページにアニメーションを実装するいくつかの方法について説明します。 ！
wed にはさまざまなアニメーションの実装がありますが、H5 の開発により、アニメーションを実装する方法がますます増えています。暫定統計によると、アニメーションを実装する方法は次のとおりです。
通常、ソーシャル チャットでの動的な表現のほとんどは GIF アニメーションです。 GIF（Graphics Interchange Format）の本来の意味は「画像交換形式」であり、GIF ファイルのデータは、LZW アルゴリズムに基づいた連続階調可逆圧縮形式です。その圧縮率は通常約 50% であり、どのアプリケーションにも属しません。 GIF 形式は複数のカラー画像を格納でき、ファイルに格納された複数の画像データを 1 つずつ読み出して画面に表示すると、最も単純なアニメーションを作成できます。 GIF は、静的 GIF とアニメーション GIF の 2 種類に分類されます。拡張子は .gif です。透明な背景画像をサポートする圧縮ビットマップ形式です。さまざまなオペレーティング システムに適しています。「ボディ サイズ」は小さいです。インターネット上の小さなアニメーションは GIF です。実際、GIF 形式では、複数の画像を 1 つの画像ファイルに保存してアニメーションを形成します。最も一般的なものは、アニメーションのフレームを介して接続された面白い GIF 画像です。したがって、最終的には、GIF は次のようになります。まだ画像ファイル形式です。 GIF の作成は、PS、または画像、ビデオ、または FLASH 変換を通じて行うことができます。
欠点: 高解像度の GIF はサイズが大きくなります。圧縮された身体検査では、サイズが小さいとフレームが失われます。インタラクションは貧弱で、本質的には動画です。
Flash は非常に強力で、豊富なビデオ、サウンド、グラフィック、アニメーションが含まれています。 Flash を使用すると、さまざまな非常に豪華なアニメーションやビデオを作成できますが、さまざまな理由により、Flash は 2012 年 8 月 15 日に Android プラットフォームから撤退し、モバイル端末に正式に別れを告げました。 2015 年 12 月 1 日、Adobe はアニメーション制作ソフトウェア Flashprofessional CC2015 をアップグレードし、Animate CC 2015.5 に名前を変更し、Flash テクノロジーとは一線を画しました。 一昔前は、企業ポータルサイトのトップページにある大きな画像カルーセルは基本的にFlashが使用されており、12306のチケット購入サイトのトップページにある大きな画像も初期にはFlashが使用されていましたが、現在はすべてFlashに置き換えられています。静止画。この技術は徐々に目立たなくなり、Youku、iQiyi、その他のビデオ Web サイトなどのオンラインビデオライブブロードキャストのみが利用可能になりました。
欠点: Flash Player に基づいて再生されるため、Flash Player はパフォーマンスを非常に消費し、さまざまな脆弱性が頻繁に報告されます。
SilverLight
Microsoft Silverlight は、クロスブラウザー、クロスプラットフォームのプラグインであり、新しい Web レンダリング テクノロジです。さまざまなプラットフォームで実行されます。このテクノロジを使用すると、ブラウザ内でも、Windows や Apple Macintosh などのデスクトップ オペレーティング システム間でも一貫した、リッチで視覚的に美しいインタラクティブ エクスペリエンスが得られます。
欠点: ブラウザ プラグインの形式でアニメーションをサポートするのは開発が簡単ではありません。こういうものがあるということを理解するだけで十分です 著作権は作者に帰属します。
原則: 主なアイデアは、setInterval または setTimeout メソッドのコールバック関数を通じて要素の CSS スタイルを継続的に呼び出して変更し、要素の CSS スタイルを変更する効果を実現することです。要素のスタイル。
Jquery の animate() メソッドはこの方法で実装されます。
欠点: JavaScript でアニメーションを実装すると、通常、ページの再配置や再描画が頻繁に発生し、パフォーマンスが消費されます。通常は、デスクトップ ブラウザで使用する必要があります。
16ms 問題: 一般に人間の目で認識できる滑らかなアニメーションは 1 秒あたり 60 フレームであると考えられていますが、ここでは 16ms です。比率は (1000ms/60) です。フレームはわずかに小さくなりますが、アニメーションは依然として全体的に滑らかです。多くのモバイル アニメーションのパフォーマンスを最適化する場合、継続的にトリガーされるブラウザ イベントを調整して処理するために、通常 16 ミリ秒が使用されます。たとえば、touchmove イベントやスクロール イベントを抑制します。このように連続イベントのトリガー頻度を減らすことで、アニメーションの滑らかさを大幅に向上させることができます。
SMIL の特徴: プログラムは で始まり、で終わります。プログラム全体は、本文とヘッドの 2 つの部分で構成されます。SMIL では、タグとタグ属性が小文字である必要があります。一部のタグでは、終了タグとしてスラッシュが必要であり、属性値は二重引用符で囲む必要があり、SMIL ファイルの拡張子は *.smil または *.smi です。
埋め込み html
名前空間定義をタグに追加し、を追加します< ;?import>要素を使用して、「time」名前空間をインポートし、「time」を定義する
