HTML 5 で動的な効果を作成するいくつかの方法

1. はじめに

動的な効果を備えた Web サイトは、Web サイトをより高級に見せ、ネチズンの注目を集めます。時代の発展に伴い、フロントエンド インターフェイスに動的な効果を追加する開発者が増えています。 。

そこで今日はフロントエンドのダイナミックエフェクトの制作方法を整理して共有し、Canvasについて簡単に説明します。

2. ダイナミックエフェクトの分類

まず、ダイナミックエフェクトの制作の分類について簡単に見てみましょう。

3.GIF

まず、最初の画像は gif 画像です。これは、動的なグラフィックを作成するための非常にシンプルですが効率的な方法です。

GIF 画像は、詳細な小さなアニメーションやビットマップの作成に適しており、「サイズ」が小さく、圧縮可能であり、制作コストが低いという点で、画像の形式ではさまざまなオペレーティング システムに適しています。互換性が心配。 GIF アニメーションを作成するには、私たちが使い慣れている Photoshop タイムラインや、Flash、AE を使用してアニメーションをエクスポートし、GIF 形式で保存するなど、さまざまな方法があります。

GIF アニメーションは、H5 アニメーションの読み込みナビゲーション バー、人気の小さなタグ、その他の要素として最もよく使用されます。画像サイズと精度のバランスを制御する必要があるため、一般的にアニメーションを作成するために使用されます。細かい部分もございます。

H5 ページで GIF 画像をホストする方法は、以下で紹介する他の方法と比較して、最もコスト効率が高く、簡単です。ページ上で背景画像/コンテンツ画像として参照するだけです。

4. フレーム単位のアニメーション

これを読んでいる多くの友人は、フレーム単位のアニメーションと GIF は同じではないと考えるかもしれません。

フレームごとのアニメーションは、等間隔のアニメーションを使用してフレームごとの画像を分解するもので、通常は JS スクリプト シミュレーションによって記述されます。

フレーム単位のアニメーションと GIF アニメーションの違いは、スクリプトでフレーム単位のアニメーションの速度と一時停止を制御できるのに対し、GIF アニメーションは後の段階でコードを通じてアニメーションの速度と透明度を変更できないことです。

コマ送りアニメーションを作るのに欠かせないのが等間隔の「アニメーション分解コマ送り画像.png」です。背景位置のフレームアニメーションを変更してフレーム画像.png」を作成します。

もちろん、特別な画像を設定することで、いくつかの特殊効果を実現することもできます。

5. CSS3 アニメーション

CSS3 は、決して忘れられないアニメーション ファミリーの一員となるはずです。ここでは、平面レイヤーのアニメーションが得意であると定義します。 CSS3 の欠陥は、そのプロパティの一部がブラウザーで十分にサポートされていないことである可能性があります。

アニメーションの応用と基本的な属性については以前に紹介しましたので、忘れてしまった場合は、下のリンクをクリックしてもう一度復習してください。

ここで余談になりますが、アニメーションデザインをエンジニアに高品質かつ効率的に伝えるにはどうすればよいでしょうか？

ヒント: 「ケースデモまたはショットスクリプト + アニメーション属性内訳表 + マテリアルカットアウト」のパッケージを使用することをお勧めします。

次の図を例に挙げます。これはクリック フィードバック用の小さなアニメーションです。デモが提供できない場合は、「アニメーション属性分解テーブル」メソッドを使用できます。

アニメーション属性分解テーブルを使用すると、エンジニアはテーブルに入力された値に基づいてアニメーションを作成できます。これは、何もないところからエンジニアと通信するよりも正確です。

6.SVG

SVGもアニメーション制作では無視できない人気の手法です。 欠点は、IE8、Android4.2以下では使用できないことです。それをしっかりとサポートします。

以下の図のいくつかの例を見てください。要素スケッチの端に沿ったこの種のアニメーションは通常 SVG によって作成されます。もちろん、この表現図のようないくつかの複雑なアニメーションも実現できますが、実装コストは高くなります。あまり費用対効果が高くありません。

知識の普及: SVG (Scalable Vector Graphics**) は、XML 形式で保存された画像です。 いくつかの特別な機能があります:

さまざまなツール (メモを取るなど) で読み取ったり、変更したりできます

小さい。サイズ、より圧縮可能

Vector

Pure XML

SVG 画像は、実際には多数のアンカー ポイントを接続することによって生成されます。そのため、ドキュメント形式として簡単に保存できます。ページ内の参照は、このテキストを紹介するだけで済みます。

ここで注意しなければならない点は、SVGアニメーションを作成したい場合は、必ずAIツールを使用してベクトルグラフィックスを描画し、エンジニアの学生に出力してください。

さらに詳しく知りたい場合は、下のリンクをクリックしてください。これは、SVG を使用して小さなキツネを描く方法を教えるために私が以前に書いた小さなチュートリアルです。

7.Canvas

HTML5 の新しい要素 は製図板に似ており、パス、長方形、円、文字を描画したり、画像を追加したりするための複数のメソッドがあります。

自体には描画能力はありません。すべての描画作業は JavaScript に依存する必要があります。

絵が上手なアニメーションと定義します。

多数の要素が落下するアニメーション効果を描くのは、Canvas が得意とするところです。

Canvas は SVG のいとことみなされます。ほとんどのチャート アニメーションは Canvas または SVG によって作成されますが、次のような違いもあります。 Canvas は高さと幅が固定された額縁です。 svg は解像度に依存せず、自由に拡大または縮小することができます。

canvasは画像を.jpg形式で保存でき、svgは画像をテキスト形式で保存できます

canvasで描画された画像はDOMを占有しませんが、svgの各画像はDOM要素です

canvasは画像を多用するアニメーションに適しています。 svg は、降雪の作成などの大規模な使用には適していません。

canvas は完全にスクリプト描画に依存していますが、svg はベクター ダンプを使用して直接生成できます。

8. Flash to Canvas

上記の一般的なテクニックを除いて、Flash to Canvas の方法も今年特に人気のある形式です。

かつて輝かしい Flash について言及したため、出力はクールという形容詞と切り離せないものでなければなりません。複雑で洗練されたアニメーションは Flash cc を通じて生成され、Canvas ファイルにエクスポートされ、アニメーションのインタラクティブな操作は完了した Create.js ライブラリのステップに依存します。 。

Flash を Canvas に変換する実装コストは実際には非常に高いため、ここではこれ以上紹介しません。

9.Video

video は、HTML 5 の新しいタグとして、多くの非常に強力な機能を備えています。

しかし、それに応じて、互換性の問題によるさまざまな制約もありますが、動的な効果を実現する方法とコストの点で、ビデオが他の方法に匹敵しないことは否定できません。

10.JavaScript

実際、スクロールからページめくり、重力感知など、インタラクティブなフィードバックを伴うアニメーションはすべて、js で処理ステップを記述する必要があります。

言い換えれば、すべてのアニメーション特殊効果は Javascript 学生のサポートと切り離せないのです。

three.js などの特殊な Javascript スクリプト ライブラリが多数市販されており、それらを注意深く使用すると、素晴らしいアニメーション効果を作成できます。

概要:

さまざまな方法でさまざまな動的効果を生成できます。上記の HTML 5 動的効果生成方法が、より良いページの作成に役立つことを願っています。

関連するおすすめ:

CSS がホバーの動的効果を実装する方法のサンプルコード

Web の動的効果に関するディスカッション

画像の動的効果を実現するための CSS の関連属性の紹介

WeChat アプレットのランディング ページに雲が浮かぶダイナミックなエフェクト

javascript_javascriptスキルによって実装されたカラーブロックスライドのダイナミックなエフェクト

以上がHTML 5 で動的な効果を作成するいくつかの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。