ホームページ > 記事 > ウェブフロントエンド > HTML5 11 での SVG 2D の概要 - ユーザーの対話性 (アニメーション) の概要と application_html5 チュートリアルのスキル
HTML5 11 での SVG 2D の概要 - ユーザーの対話性 (アニメーション) の概要と application_html5 チュートリアルのスキル
- WBOYオリジナル
- 2016-05-16 15:50:081440ブラウズ
対話性
SVG は、次のような優れたユーザー対話性を備えています。
1. SVG は、ほとんどの DOM2 イベントに応答できます。
2. SVG はカーソルを介したユーザーのマウスの動きをうまくキャプチャできます。
3. ユーザーは、svg 要素のzoomAndPan 属性の値を設定することで、ズームやその他の効果を簡単に実現できます。
4. ユーザーはアニメーションとイベントを簡単に組み合わせて、複雑な効果を完成させることができます。
イベントを SVG 要素に添付すると、スクリプト言語を使用していくつかの対話型タスクを簡単に完了できます。 SVG は、onfocusin、onfocusou、onclick、onmousedown、onmouseup、onmousemove、onmouseout、onload、onresize、onscroll、その他のイベントなど、ほとんどの DOM2 イベントをサポートします。これらに加えて、SVG は、onroom、onbegin、onend、onrepeat などの独自のアニメーション関連イベントも提供します。
この事件については誰もがよく知っているので、詳しくは述べません。
アニメーション メソッド
SVG はテキストを使用してグラフィックを定義します。このドキュメント構造はアニメーションの作成に非常に適しています。グラフィックスの位置、サイズ、色を変更するには、対応するプロパティを調整するだけです。実際、SVG にはさまざまなイベント処理用に特別に設計されたプロパティがあり、その多くはアニメーション用に特別に調整されています。 SVG では、アニメーションを実装する方法がいくつかあります。
1. SVG アニメーション要素を使用します。これについては以下で強調します。
2. スクリプトを使用します。 DOM 操作を使用してアニメーションを開始および制御することは、すでに成熟したテクノロジーです。以下に小さな例を示します。
3. SMIL (同期マルチメディア統合言語)。ご興味がございましたら、http://www.w3.org/TR/2008/REC-SMIL3-20081201/ をご覧ください。
次の例には、SVG の最も基本的なアニメーションがいくつか含まれています:
xmlns="http://www.w3 .org /2000/svg" version="1.1">
基本的なアニメーション要素
- Set は可視性をアニメーション化するために以下で使用され、その後 animateMotion、
animate、animateTransform は他のタイプのアニメーションを実行するために使用されます -->
生きています!
begin="3s" dur="6s" fill="freeze" />
begin="3s" dur="6s" fill="freeze" />
begin="3s" dur="6s" fill="freeze" />
このコードを HTML ドキュメントの本文に挿入して実行し、アニメーションの効果を確認します。
アニメーション化された要素のパブリック属性
カテゴリ 1: ターゲット要素と属性の指定
xlink:href
これは、次のことを指します。アニメーションが実行される要素。この要素は、現在の SVG ドキュメント フラグメントで定義する必要があります。この属性が指定されていない場合、アニメーションはその親要素に適用されます。
attributeName = ""
この属性は、アニメーションが適用される属性を指定します。属性に名前空間がある場合 (SVG は本質的に XML ドキュメントであることを忘れないでください)、この名前空間も追加する必要があります。たとえば、次の例では、xlink に別のエイリアスが与えられています。ここで、animate は属性を指定するときに名前空間を使用します。
xmlns:xlink= "http://www.w3.org/1999/xlink">
アニメーションの名前空間の解決のデモ
attributeType = "CSS | XML | auto (デフォルト値)"
この属性は、属性値の名前空間を指定します。このいくつかの値の意味は次のとおりです。
CSS:attributeName で指定された属性が CSS 属性であることを表します。
XML:attributeName で指定された属性は、XML デフォルト名前空間の属性です (svg ドキュメントは本質的に xml ドキュメントであることに注意してください)。
auto: CSS 属性のattributeNameで指定された属性を最初に検索することを意味します。見つからない場合は、デフォルトの XML 名前空間で属性が検索されます。
カテゴリ 2: アニメーション時間を制御する属性
次の属性はすべてアニメーション時間属性であり、アニメーションの開始方法と終了方法、およびアニメーションを繰り返すかどうかなど、アニメーション実行のタイムラインを制御します。アニメーションの終了状態を保存するかどうかなど。
begin = "begin-value-list"
この属性はアニメーションの開始時間を定義します。セミコロンで区切られた一連の時間値を指定できます。アニメーションの開始をトリガーする他の値を使用することもできます。イベントやショートカットキーなど。
dur = Clock-value | "media" | "infinity"
はアニメーションの継続時間を定義します。時計形式で表示される値を設定できます。次の 2 つの値に設定することもできます。
media: アニメーション時間が内部マルチメディア要素の継続時間であることを指定します。
infinity: アニメーション時間を無限に指定します。
クロック形式は、次の正当な値形式を指します:
:30:03= 2 時間 30 分 3 秒
:00:10.25 = 50 時間 10 秒 250 ミリ秒
:33 = 2 分 33 秒
:10.5 = 10.5 秒 = 10 秒と 500 ミリ秒
.2h= 3.2 時間 = 3 時間 12 分
分 = 45 分
s = 30 秒
ms = 5 ミリ秒
.467= 12 秒と 467 ミリ秒
.5s = 500 ミリ秒
:00.005 = 5 ミリ秒
end = "end-value-list"
はアニメーションの終了時間を定義します。セミコロンで区切られた一連の値を指定できます。
min = クロック値 | "media"
max = クロック値 | "media"
アニメーション期間の最大値と最小値を設定します。
restart = "always" | "whenNotActive" | "never"
アニメーションをいつでも再開できるかどうかを設定します。 always は、アニメーションがいつでも開始できることを意味します。 whenNotActive は、前の再生が終了した場合など、再生していないときにのみ再開できることを意味します。 Never はアニメーションを再開できないことを意味します。
repeatCount = 数値 | "infinity"
アニメーションの繰り返し回数を設定します。不定は無限の繰り返しを表します。
repeatDur = Clock-value | "infinity"
アニメーションの繰り返し時間を設定します。不定は無限の繰り返しを表します。
fill = "freeze" | "remove(デフォルト値)"
アニメーション終了後の要素の状態を設定します。フリーズとは、アニメーションが終了した後、要素がアニメーションの最終状態にとどまることを意味します。削除は、アニメーションが終了した後、要素がアニメーション前の状態に戻ることを意味します。これがデフォルト値です。
カテゴリ 3: アニメーション値を定義する属性
これらの属性は、アニメーション化される属性の値を定義します。実際、キーフレームと補間のためのいくつかのアルゴリズムが定義されています。
calcMode = "離散 | 線形 (デフォルト値) | ペース | スプライン"
は、アニメーション補間方法を定義します。離散: 離散、補間なし、線形: 直線補間、ペース補間: サンプル ストリップ補間。デフォルトは線形(線形補間)ですが、アトリビュートが線形補間をサポートしていない場合は、離散補間が使用されます。
values= "
SVG は、次のような優れたユーザー対話性を備えています。
1. SVG は、ほとんどの DOM2 イベントに応答できます。
2. SVG はカーソルを介したユーザーのマウスの動きをうまくキャプチャできます。
3. ユーザーは、svg 要素のzoomAndPan 属性の値を設定することで、ズームやその他の効果を簡単に実現できます。
4. ユーザーはアニメーションとイベントを簡単に組み合わせて、複雑な効果を完成させることができます。
イベントを SVG 要素に添付すると、スクリプト言語を使用していくつかの対話型タスクを簡単に完了できます。 SVG は、onfocusin、onfocusou、onclick、onmousedown、onmouseup、onmousemove、onmouseout、onload、onresize、onscroll、その他のイベントなど、ほとんどの DOM2 イベントをサポートします。これらに加えて、SVG は、onroom、onbegin、onend、onrepeat などの独自のアニメーション関連イベントも提供します。
この事件については誰もがよく知っているので、詳しくは述べません。
アニメーション メソッド
SVG はテキストを使用してグラフィックを定義します。このドキュメント構造はアニメーションの作成に非常に適しています。グラフィックスの位置、サイズ、色を変更するには、対応するプロパティを調整するだけです。実際、SVG にはさまざまなイベント処理用に特別に設計されたプロパティがあり、その多くはアニメーション用に特別に調整されています。 SVG では、アニメーションを実装する方法がいくつかあります。
1. SVG アニメーション要素を使用します。これについては以下で強調します。
2. スクリプトを使用します。 DOM 操作を使用してアニメーションを開始および制御することは、すでに成熟したテクノロジーです。以下に小さな例を示します。
3. SMIL (同期マルチメディア統合言語)。ご興味がございましたら、http://www.w3.org/TR/2008/REC-SMIL3-20081201/ をご覧ください。
次の例には、SVG の最も基本的なアニメーションがいくつか含まれています:
コードをコピー
コードは次のとおりです。xmlns="http://www.w3 .org /2000/svg" version="1.1">
- Set は可視性をアニメーション化するために以下で使用され、その後 animateMotion、
animate、animateTransform は他のタイプのアニメーションを実行するために使用されます -->
生きています!
begin="3s" dur="6s" fill="freeze" />
begin="3s" dur="6s" fill="freeze" />
begin="3s" dur="6s" fill="freeze" />
このコードを HTML ドキュメントの本文に挿入して実行し、アニメーションの効果を確認します。
アニメーション化された要素のパブリック属性
カテゴリ 1: ターゲット要素と属性の指定
xlink:href
これは、次のことを指します。アニメーションが実行される要素。この要素は、現在の SVG ドキュメント フラグメントで定義する必要があります。この属性が指定されていない場合、アニメーションはその親要素に適用されます。
attributeName = "
この属性は、アニメーションが適用される属性を指定します。属性に名前空間がある場合 (SVG は本質的に XML ドキュメントであることを忘れないでください)、この名前空間も追加する必要があります。たとえば、次の例では、xlink に別のエイリアスが与えられています。ここで、animate は属性を指定するときに名前空間を使用します。
Copy code
コードは次のとおりです。xmlns:xlink= "http://www.w3.org/1999/xlink">
attributeType = "CSS | XML | auto (デフォルト値)"
この属性は、属性値の名前空間を指定します。このいくつかの値の意味は次のとおりです。
CSS:attributeName で指定された属性が CSS 属性であることを表します。
XML:attributeName で指定された属性は、XML デフォルト名前空間の属性です (svg ドキュメントは本質的に xml ドキュメントであることに注意してください)。
auto: CSS 属性のattributeNameで指定された属性を最初に検索することを意味します。見つからない場合は、デフォルトの XML 名前空間で属性が検索されます。
カテゴリ 2: アニメーション時間を制御する属性
次の属性はすべてアニメーション時間属性であり、アニメーションの開始方法と終了方法、およびアニメーションを繰り返すかどうかなど、アニメーション実行のタイムラインを制御します。アニメーションの終了状態を保存するかどうかなど。
begin = "begin-value-list"
この属性はアニメーションの開始時間を定義します。セミコロンで区切られた一連の時間値を指定できます。アニメーションの開始をトリガーする他の値を使用することもできます。イベントやショートカットキーなど。
dur = Clock-value | "media" | "infinity"
はアニメーションの継続時間を定義します。時計形式で表示される値を設定できます。次の 2 つの値に設定することもできます。
media: アニメーション時間が内部マルチメディア要素の継続時間であることを指定します。
infinity: アニメーション時間を無限に指定します。
クロック形式は、次の正当な値形式を指します:
コードをコピー
コードは次のとおりです::30:03= 2 時間 30 分 3 秒
:00:10.25 = 50 時間 10 秒 250 ミリ秒
:33 = 2 分 33 秒
:10.5 = 10.5 秒 = 10 秒と 500 ミリ秒
.2h= 3.2 時間 = 3 時間 12 分
分 = 45 分
s = 30 秒
ms = 5 ミリ秒
.467= 12 秒と 467 ミリ秒
.5s = 500 ミリ秒
:00.005 = 5 ミリ秒
end = "end-value-list"
はアニメーションの終了時間を定義します。セミコロンで区切られた一連の値を指定できます。
min = クロック値 | "media"
max = クロック値 | "media"
アニメーション期間の最大値と最小値を設定します。
restart = "always" | "whenNotActive" | "never"
アニメーションをいつでも再開できるかどうかを設定します。 always は、アニメーションがいつでも開始できることを意味します。 whenNotActive は、前の再生が終了した場合など、再生していないときにのみ再開できることを意味します。 Never はアニメーションを再開できないことを意味します。
repeatCount = 数値 | "infinity"
アニメーションの繰り返し回数を設定します。不定は無限の繰り返しを表します。
repeatDur = Clock-value | "infinity"
アニメーションの繰り返し時間を設定します。不定は無限の繰り返しを表します。
fill = "freeze" | "remove(デフォルト値)"
アニメーション終了後の要素の状態を設定します。フリーズとは、アニメーションが終了した後、要素がアニメーションの最終状態にとどまることを意味します。削除は、アニメーションが終了した後、要素がアニメーション前の状態に戻ることを意味します。これがデフォルト値です。
カテゴリ 3: アニメーション値を定義する属性
これらの属性は、アニメーション化される属性の値を定義します。実際、キーフレームと補間のためのいくつかのアルゴリズムが定義されています。
calcMode = "離散 | 線形 (デフォルト値) | ペース | スプライン"
は、アニメーション補間方法を定義します。離散: 離散、補間なし、線形: 直線補間、ペース補間: サンプル ストリップ補間。デフォルトは線形(線形補間)ですが、アトリビュートが線形補間をサポートしていない場合は、離散補間が使用されます。
values= "
- "
は、アニメーション キーフレームの値のセミコロン区切りのリストを定義します。サポートベクター値。
keyTimes = "
- "
アニメーション キーフレーム時間のセミコロン区切りのリストを定義します。これは値と 1 対 1 に対応します。この値は補間アルゴリズムの影響を受けます。線形補間およびスプライン補間の場合、keyTimes の最初の値は 0、最後の値は 1 でなければなりません。離散非補間メソッドの場合、keyTimes の最初の値は 0 でなければなりません。ステップ補間法の場合、keyTimes が必要ないことは明らかです。また、アニメーションの継続時間が無限に設定されている場合、keyTimes は無視されます。
keySplines = "
- "
この属性は、スプライン補間 (ベッセル補間) 中の制御点を定義します。これは、補間モードがスプラインとして選択されている場合にのみ機能します。このリストの値の範囲は 0 から 1 です。
from = "
to = "
アニメーション属性の開始値、終了値、ステップ値を定義します。ここで注意してください: 値がすでに指定されている場合、from/to/by の値は無視されます。
カテゴリ 4: アニメーションが増分であるかどうかを制御するプロパティ 場合によっては、追加プロパティを使用して、関連する値が絶対値ではなく増分値に設定されていると非常に便利です。この目的を果たすことができます。
additive = "replace(default value) | sum"
この属性は、アニメーションが増分であるかどうかを制御します。 sum は、関連する属性値または他の優先度の低いアニメーションの方がアニメーションが大きくなることを意味します。 replace はデフォルト値です。これは、アニメーションが関連する属性値または他の優先度の低いアニメーションを上書きすることを意味します。小さな例を見てみましょう:
コードをコピーしますコードは次のとおりです:
< ;/rect>
繰り返しのアニメーション結果を重ね合わせると、accumulate 属性を使用して実現できる場合も非常に便利です。
accumulate = "none (デフォルト値) | sum"
この属性は、アニメーション効果が累積的であるかどうかを制御します。デフォルト値は None です。これは、繰り返されるアニメーションが蓄積されないことを意味します。 sum は、繰り返されるアニメーション効果が累積されることを意味します。単一実行アニメーションの場合、このプロパティは意味を持ちません。小さな例を見てみましょう:
コードをコピーしますコードは次のとおりです:
この例は、反復ごとに長方形の長さが増加することを示しています。
アニメーション要素の概要
SVG は次のアニメーション要素を提供します。
1. アニメーション要素
これは最も基本的なアニメーション要素であり、直接使用できます。関連するアニメーション要素に使用されるプロパティは、さまざまな時点での値を提供します。
2. set 要素
これは animate 要素の略称で、すべての属性タイプをサポートします。これは、非数値属性 (可視性など) をアニメーション化する場合に特に便利です。 set 要素は非増分であり、関連する属性はそれに影響を与えません。 to で指定されるアニメーション終了値の型は、属性の値の型と一致する必要があります。
3. animateMotion 要素
Lu Jin アニメーション要素。この要素のほとんどの属性は上記と同じですが、以下のいくつかの違いがあります:
calcMode = "discrete | linear | paced | spline"
この属性のデフォルト値は、このデフォルトとは異なります。要素はペースです。
path = "
アニメーション要素が移動するパス。形式は path 要素の d 属性の値の形式と一致します。
keyPoints = "
この属性の値はセミコロンで区切られた一連の浮動小数点値であり、各値の値の範囲は 0 ～ 1 です。これらの値は、keyTimes 属性で指定された対応する時点での移動距離を表します。ここでの具体的な距離はブラウザ自体によって決定されます。
rotate =
この属性は、要素が移動するときの回転角度を指定します。デフォルト値は 0 で、数値は回転角度を表します。オートリバースとは、進行方向とは逆方向に回転することを意味します。また、animateMotion要素のfrom、by、to、の値で構成されます。座標ペア。x 値と y 値はカンマまたはスペースで区切られます。たとえば、from="33,15" は開始点の x 座標が 33 であり、y 座標が 33 であることを意味します。 15.
モーションパスを指定するには、path属性を直接指定する方法と、animateMotiondeの子要素としてmpath要素を使用する方法の2つがあります。両方の方法を使用する場合、mpathの使用が優先されます。要素は、from、by、to の値よりも大きいです。🎜>小さな例を見てください:
コードをコピーします コードは次のとおりです。
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/ 1999/xlink" >
< サークル cx="400" cy="250" r="17.64" fill="blue"/> M-25,-12.5 L25,-12.5 L 0,-87.5 z"
fill=" yellow" ストローク = "red" ストローク幅 = "7.06">
/svg>
4. animateColor 要素
カラー アニメーション要素。これは古い要素なので、基本的にすべての機能は animate で置き換えることができるため、もう使用しないでください。
5. animateTransform 要素 xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/ 1999/xlink" >
< サークル cx="400" cy="250" r="17.64" fill="blue"/> M-25,-12.5 L25,-12.5 L 0,-87.5 z"
fill=" yellow" ストローク = "red" ストローク幅 = "7.06">
/svg>
4. animateColor 要素
カラー アニメーション要素。これは古い要素なので、基本的にすべての機能は animate で置き換えることができるため、もう使用しないでください。
変形アニメーション要素。いくつかの特別な属性を見てみましょう: type = "translate |scale |rotate | skewX | skewY"
この属性は変換のタイプを指定します。translate がデフォルト値です。
from、by、to の値は、変換の対応するパラメーターです。これは、上記の変換と一致します。値はセミコロンで区切られた一連の値です。 アニメーション効果をサポートする要素と属性基本的にすべてのグラフィック要素 (path、rect、ellipse、text、image...)、コンテナ要素 (svg、g、defs、use、switch、clipPath、mask. . .) すべてアニメーションをサポートしています。基本的にほとんどのプロパティはアニメーション効果をサポートしています。詳細な手順については、公式ドキュメントを参照してください。
DOM を使用してアニメーションを実装します
SVG アニメーションはスクリプトを使用して完成させることもできます。DOM の詳細は後で紹介します。
コードをコピーします
コードは次のとおりです:
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> ;
xmlns="http://www.w3.org/2000/svg"
onload=" StartAnimation(evt)" version="1.1">
SVG
参考文献：
インデックスインデックス：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85) ).aspx
开発行中心：https://developer.mozilla.org/en/SVG
热门 参考：http://www.chinasvg.com/
官方文档：http://www.w3.org/TR/SVG11/
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> ;
xmlns="http://www.w3.org/2000/svg"
onload=" StartAnimation(evt)" version="1.1">
参考文献：
インデックスインデックス：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85) ).aspx
开発行中心：https://developer.mozilla.org/en/SVG
热门 参考：http://www.chinasvg.com/
官方文档：http://www.w3.org/TR/SVG11/
SVGアニメーション画技术：http://msdn.microsoft.com/zh-cn/library/gg589525(v=vs.85).aspx
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。