伸び縮みマークアップ言語 XML
■ アニメーションを作成する animate要素

■ animate要素

SVGの「animate」要素を使用して、画像にアニメーションの効果を設定する事ができます。 これにより、画像を変形させたり、色が変化する等の事ができるようになります。 「animate」要素の図形要素への設定方法は以下をご覧下さい。

<設定する図形>
<animate attributeType="対象の属性のタイプ"
 attributeName="対象の属性名"; begin="開始時間"
 dur="変化する時間" values="変化する値"
 repeatCount="リピート回数"/>
</設定する図形>

(※言うまでもないですが、設定方法のソースは、表示の都合で改行していますが実際は改行させないで下さい。)

attributeType 変化させる属性のタイプを指定。XML、CSS、auto(デフォルト)のいずれか。
attributeName 変化させる属性の名前を指定。
begin 変化の開始時間。値には時間を記述。(秒:s 分:min 等)
dur 変化する時間。値には時間を記述。(秒:s 分:min 等)
values 変化する値。「;(セミコロン)」で区切って変化する値を記述。
repeatCount 繰り返す回数。「indefinite」で無限に繰り返し。

ではまず、今回は図形の変形する簡単なアニメーションを作成してみる事にします。 以下に簡単なanimate要素を使用した例をあげます。 ファイル名は「svg04.svg」とします。

■ svg04.svg

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<g id="ki" style="fill:#ffcc33;stroke:#000066;stroke-width:3">
 <circle cx="250" cy="250" r="30">
 <animate attributeType="XML" attributeName="r" begin="1s"
 dur="5s" values="30;100;30" repeatCount="indefinite"/>
 </circle>
</g>
</svg>

<animate attributeType="XML" attributeName="r" begin="1s" dur="5s" values="30;100;30" repeatCount="indefinite"/>

attributeType」で変化させる属性が「XML」に属している事を記述

attributeName」で変化させる属性名「r」を指定

begin」はアニメーションの開始時間「1s(画像を読み込んで1秒後)」を指定

dur」は値の変化(アニメーションが続く時間)にかかる時間「5s(5秒間)」を指定

values」は変化する値「30→100→30」を指定

repeatCount」には「indefinite」を指定してアニメーションが無限に続くように設定

svg04.svg」のサンプルは以下から見る事ができます。 (※Adobe SVG Viewerが必要) 円が大きくなったり縮んだりするアニメーションを見る事ができるはずです。

svg04.svgのサンプルページ


■ アニメーションを作成する animate要素2

■ animate要素2

前回は円を伸縮させるアニメーションを作成しました。 今回は画像の透明度を変化させるアニメーションを作成してみます。 変形させるアニメーションの「attributeType」 に「XML」を指定したのに対し、今回は「attributeType」に 「CSS」を指定します。

ではまず、今回は図形の変形する簡単なアニメーションを作成してみる事にします。 以下に画像の透明度を変化させる、animate要素を使用した簡単な例をあげます。 ファイル名は「svg05.svg」とします。

■ svg05.svg

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<g id="ki" style="fill:#ffcc33;stroke:#000066;stroke-width:3">
 <circle cx="120" cy="120" r="100"/>
</g>
<g id="moji">
 <text x="68" y="130" style="font-size:70px">XML
 <animate attributeType="CSS" attributeName="opacity"
 dur="5s" values="1;0;1" repeatCount="2"/>
 </text>
</g>
</svg>

<animate attributeType="CSS" attributeName="opacity" dur="5s" values="1;0;1" repeatCount="2"/>

attributeType」で変化させる属性が「CSS」に属している事を記述

attributeName」で透過度を設定する属性「opacity」を指定

dur」は値の変化(アニメーションが続く時間)にかかる時間「5s(5秒間)」を指定

values」は変化する値「1→0→1」を指定

repeatCount」には「2」を指定してアニメーションを2回だけ繰り返すように。

svg05.svg」のサンプルは以下から見る事ができます。 (※Adobe SVG Viewerが必要) 円の中のテキストの透明度が変化するのが見られるはずです。

svg05.svgのサンプルページ


■ イベントを使用する

■ イベント

イベント属性をアニメーションの属性で使用して、マウスをクリックしたりした時などに アニメーションが始まる等のイベントを起こす事ができます。 今回は画像にマウスを乗せた時・画像からマウスを放したときにイベントが起こるように設定してみます。 なお、イベントには様々なものがあり、その種類については以下をご参照下さい。

サポートされているイベントの一覧  (SVG 1.1 勧告 日本語版)

では簡単なファイルを作成してみましょう。 以下の記述ではマウスが要素の上に乗ったとき、又離れた時にイベントが発生します。 ファイル名は「svg06.svg」とします。

■ svg06.svg

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<g id="ki" style="stroke:#000066;stroke-width:3">
 <circle cx="120" cy="120" r="100">
 <animate attributeName="fill" dur="1ms" begin="mouseover" 
from="#000000" to="#ffcc33" fill="freeze"/>
 <animate attributeName="fill" dur="1ms" begin="mouseout" 
from="#ffcc33" to="#000000" fill="freeze"/>
 </circle>
</g>
<g id="moji">
 <text x="68" y="130" style="font-size:70px">
 XML
 </text>
</g>
</svg>

<animate attributeName="fill" dur="1ms" begin="mouseover" from="#000000" to="#ffcc33" fill="freeze"/> <animate attributeName="fill" dur="1ms" begin="mouseout" from="#ffcc33" to="#000000" fill="freeze"/>

begin="mouseover"」でイベント「mouseover」(画像にマウスが乗った時)を指定。

begin="mouseout"」でイベント「mouseout」(画像からマウスが離れた時)を指定

attributeName」で「fill」を指定して塗りつぶしを設定する属性を指定

dur」は値の変化(アニメーションが続く時間)にかかる時間「1ms(1m秒間)」を指定

from="#000000" to="#ffcc33"」は変化する値(色)「#000000→#ffcc33」を指定

from="#ffcc33" to="#000000"」は変化する値「#ffcc33→#000000」を指定

fill」はアニメーションが終了したときに変化した値をどうするかの設定で、「freeze」を指定すると変化したままの値で止まる。

svg06.svg」のサンプルは以下から見る事ができます。 (※Adobe SVG Viewerが必要) 画像にマウスが乗ると色が変わるイベントが見られるはずです。

svg06.svgのサンプルページ


■ DOMとJavaScriptを使用したイベント処理

■ DOMとJavaScript

前回作成した、アニメーション属性を使用して、マウスをクリックしたりした時などに アニメーションが始まる等のイベントを、今回はDOMとJavaScriptを利用して作成してみましょう。 DOMのsetAttribute()(属性値を変更)を使用し、 直接JavaScriptのイベント属性をSVG要素の中に記述して、 再び画像にマウスを乗せた時・画像からマウスを放したときにイベントが起こるように設定してみます。

では簡単なファイルを作成してみましょう。 以下の記述ではマウスが要素の上に乗ったとき、又離れた時にイベントが発生します。 ファイル名は「svg07.svg」とします。

■ svg07.svg

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<g id="ki" style="stroke:#000066;stroke-width:3;fill:#000000">
 <circle onmouseover="evt.target.setAttribute('fill','#ffff33');
evt.target.setAttribute('stroke','#000000')"
 onmouseout="evt.target.setAttribute('fill','#000000');
evt.target.setAttribute('stroke','#cccccc')"
 cx="120" cy="120" r="100"/>
</g>
<g id="moji">
 <text x="68" y="130" style="font-size:70px">
 XML
 </text>
</g>
</svg>

<circle onmouseover="evt.target.setAttribute('fill','#ffff33'); evt.target.setAttribute('stroke','#000000')" onmouseout="evt.target.setAttribute('fill','#000000'); evt.target.setAttribute('stroke','#cccccc')" cx="120" cy="120" r="100"/>

onmouseover="evt.target.setAttribute('fill','#ffff33'); evt.target.setAttribute('stroke','#000000')"

SVG画像に「onmouseoverイベント属性」を直接書きこんで、画像の上にマウスが 乗ると、「evt.target.setAttribute('fill','#ffff33')」によって、円の色が 「#ffff33(黄色)」に、「evt.target.setAttribute('stroke','#000000')」 によって、円の線の色が「#000000(黒色)」に変化します。複数のコマンドを書き込む時は 「;(セミコロン)」で区切って下さい。

onmouseout="evt.target.setAttribute('fill','#000000'); evt.target.setAttribute('stroke','#cccccc')"

SVG画像に「onmouseoutイベント属性」を直接書きこんで、画像からマウスが 離れると、「evt.target.setAttribute('fill','#000000')」によって、円の色が 「#000000(黒色)」に、「evt.target.setAttribute('stroke','#cccccc')」 によって、円の線の色が「#cccccc(グレー)」に変化します。

このようにDOMとJavaScriptを使用して、画像をダイナミックに変更する事ができます。

svg07.svg」のサンプルは以下から見る事ができます。 (※Adobe SVG Viewerが必要) 画像にマウスが乗ると色が変わるイベントが見られるはずです。

svg07.svgのサンプルページ


«««« back           next  »»»»
 
XMLとは
XML文書作成の大まかな流れ
XML文書の記述
XML文書ブラウザでの表示
XSLTスタイルシートの適用
XSLTの構造
XML文書の宣言
文字コードの設定
タグ付けのルール
要素名・属性の指定について
階層構造
実体参照・文字参照について
その他・コメントや処理
DTDの記述
名前空間の指定
情報をデータ化する
階層構造の作成
データからXML文書を作成する
会員情報の記述ルールを定義したDTD..
個々のXML文書を作成する
外部実体参照
テンプレートルール
XSLTスタイルシートを記述する 【ノード】
構造を変換する仕組み
テンプレートルールの定義
テンプレートの動作確認
XPathの仕組み  【XPathの関数】
XPathの表記方法
テキストの抽出  xsl:value-of
ノードのコピー  xsl:copy-of
テキストの生成  xsl:text
コメントの生成  xsl:comment
要素の生成  xsl:element
属性の生成  xsl:attribute
属性値の生成  【属性値テンプレート】
出力方法の指定  xsl:output
変数1  xsl:variable
変数2  xsl:param
変数3  xsl:with-param
繰り返し処理  xsl:for-each
再帰処理  xsl:if test
データの並べ替え  xsl:sort
データに番号をつけて出力  xsl:number
条件式に一致時のみ変換処理を実施 xsl:if
複数条件を設定して処理 xsl:choose
XSLTに別のXSLT.. xsl:import xsl:include
XSLT関数について
データを1件表示
データを決められた件数だけ表示
テキストと要素混在時のテキスト抽出法
データを全て表示する
表示するデータを並べ替える
条件式を設定して表示を変える
データを表にして表示する
複数件のデータを1つの表にして表示
リンクを加える  xsl:element xsl:attribute
データをCSV形式で出力する
DOM(Document Object Model)
DOMとjavascript
ノードにアクセスする
ノードにアクセスする 2
ノードにアクセスする 3
XSLTスタイルシートを読み込む
XSLTスタイルシートの切り替え
DOMとjavascriptで検索機能を作成する 1
DOMとjavascriptで検索機能を作成する 2
DOMとjavascriptで検索機能を作成する 3
DOMとjavascriptで検索機能を作成する (XSLTスタイルシート適用)
SVG(Scalable Vector Graphics)
SVG(Scalable Vector Graphics)の基本
「g」タグによるグループ化
図形の座標変換 transform属性
アニメーションを作成する animate要素
アニメーションを作成する animate要素2
イベント
DOMとJavaScriptを使用したイベント処理
XMLとXSLTからSVGを生成する
msxsl.exeのオプション
エラーメッセージの表示
LINK
XML(eXtensible Markup Language) バナーはダウ
ンロードして
お使い下さい。




Copyright © 2004 - ykr414 . All Rights Reserved.