カテゴリ:デジタル覚え書き > web関係 »

SVGアニメーション

cssにanimationってプロパティがあって、@keyframesプロパティも使えば結構細かく設定したアニメーションが作れます。
けど、イラストみたいなのをアニメーションさせるとなると、htmlの要素だけでは難しいと思うんです。
そこでSVGの出番ですよ。
今回作るのはこんな感じのやつです。

クリックすると動きます。

例によってIEはSVGアニメーションをサポートしていないので動きません。

  1. SVGの説明ちょこっと
  2. SVG画像を用意
  3. 基本図形をPath要素に書き換える
  4. animate要素
  5. ひとコマの持続時間を変える
  6. javascriptで制御する
  7. 部分的にタイミングをずらす
  8. 変形アニメーション
  9. ソースコード

SVGの説明ちょこっと

SVGはベクター画像なので、jpegとかpngみたいに、拡大縮小で画像がぼやけるとかいうこともないやつです。
例えば、以下は全く同じ画像のwidth属性とheight属性を変えただけのやつ。

以前の記事「SVGのviewBoxについて」でviewBoxの使い方? 書いたけど、それを使うと一部分を拡大することもできるので例として。
上のはimg要素でSVGを表示してるけど、こっちはsvg要素で表示してます。

ついでにstyle="fill:red;"と書き加えて、色を赤くしてみました。
こうやってhtmlから書き換えられるのもSVGの面白いところだと思います。

SVG画像を用意

とりあえずこれらをIllustratorなどを使って作ります。

え、SVGを書き換えてアニメーションさせるんじゃないの? って思われるかもしれませんが……
はい、書き換えるんですけど、SVGファイルの中身ってこんななんです。






path要素d属性が意味不明ですね。
これを自力で書き換えるのはかなり難しいと思うので、書き換わった状態をそれぞれ見比べて、その変化をコピペする感じです。

ここで大事なことが。
SVGで形を作る要素の種類っていろいろあるんです。
矩形や楕円や直線などの基本図形や、いろんな曲線も描画できるパスなど。
アニメーションとして滑らかに変形させるには、この要素が同じでないとつながらないんです。
上のSVGの内一番左のは真円ですが、これは普通に書くとcircle要素を使うのが簡単です。
でも3番目の形はpath要素を使わないといけないので、真円の方をこっちに合わせる必要があります。
IllustratorでSVGを書き出すとcircle要素が作られるので、書き換えないといけません。

基本図形をPath要素に書き換える

書き換えるときの基準にするのは、一番変な形の2番目の図形にします。
これのソースを見てみると





path要素d属性でパスを描いてるんですが、これをちょっと分解して整理してみます。


M 234, 181
c 0, 63, -52.38, 93, -117, 93
S 0, 244, 0, 181
c 0, -53, 68, -19, 117, -19
S 234, 128, 234, 181
Z

パスの書き方は、まずアルファベット一文字の命令を指定して、そのあとに座標(x,y)って感じです。
ソースに無かった「,」とか追加されてるんだけど? って思われるかもしれません。
なんかこれがSVGの仕様で、省略できるスペースとか「,」は省略しちゃっていいみたいなんです。
全部書くと「,」が必要なところでも、「-(マイナス)」が次に来ていたりすると、そこで次の数字になったんだなって分かるから書かなくていいそうです。
軽量化のためだと思います。軽いは正義。

それぞれのアルファベットの意味は……
mまたはM = 座標の位置に「移動」(moveto)
cまたはC = 2つの制御点を指定して、次の座標までの三次ベジェ曲線を描く(curveto)
sまたはS = 1つの制御点を指定して、次の座標までの三次ベジェ曲線を描く(shorthand/smooth curveto)
zまたはZ = 最初の位置に戻ってパスを閉じる(closepath)
です。
それぞれ小文字が、今いる座標からの相対位置指定で、大文字が絶対位置指定です。
流れを図にするとこんな感じ。

SVGでパスを描く流れ1
x座標234、y座標181に移動。
SVGでパスを描く流れ2
始端側の制御点が、開始位置から見てx座標0,y座標63、終端側の制御点が、開始位置から見てx座標-52.38,y座標93、終端の座標が、開始位置から見てx座標-117,y座標93で三次ベジェ曲線を描く。
SVGでパスを描く流れ3
始端側の制御点は、同じポイントから出ているもう1つの制御点と点対称なので省略、終端側の制御点が、絶対位置でx座標0,y座標244、終端の座標が、絶対位置でx座標0,y座標181で三次ベジェ曲線を描く。
SVGでパスを描く流れ4
始端側の制御点が、開始位置から見てx座標0,y座標-53、終端側の制御点が、開始位置から見てx座標68,y座標-19、終端の座標が、開始位置から見てx座標117,y座標-19で三次ベジェ曲線を描く。
SVGでパスを描く流れ5
始端側の制御点は、同じポイントから出ているもう1つの制御点と点対称なので省略、終端側の制御点が、絶対位置でx座標234,y座標128、終端の座標が、絶対位置でx座標234,y座標181で三次ベジェ曲線を描く。→パスを閉じる。

面倒くさいように見えて、実はそんなに意味不明でもありませんでしたね。

で、最初の真円とか途中の楕円はcircle要素ellipse要素なので、これを上の説明のようにpathで書けばいいわけです。
なんかそういうwebツールないかなって探したんですが、全部Cで書くのでいいならこういうページがありました。
SVG の <circle> を <path> で描く

animate要素

SVGのanimate要素は基本的に、アニメーションさせたいパスなどの子要素として配置します。
animate要素href属性を使うと、他の場所にあるパスなどに対してアニメーションを指定できますが、それがない場合、animate要素親要素がアニメーションの対象になります。
animate要素g要素などで囲っていた場合、親要素がg要素要素になってしまうので、href属性で対象を明示しないといけません。
対象の要素にはid属性で名前をつけておきます。



  
    
    
  

アニメーションに関する記述は色々な属性に書いていきます。
大体こんな感じ。




	<animate attributeName="d"
		values="
			M217,174c0,55.23-44.77,100,-100,100S17,229.23,17,174c0-55.23,55.23-100,100-100s100,44.77,100,100Z;
			M206,137c0,75.66-39.85,137,-89,137s-89,-61.34,-89,-137c0-75.66,39.85-137,89-137s89,61.34,89,137Z;
			M217,174c0,55.23-44.77,100,-100,100S17,229.23,17,174c0-55.23,55.23-100,100-100s100,44.77,100,100Z
		"
		dur="1s"
		repeatCount="indefinite">


これの結果が↓

attributeName属性で、アニメーションの対象となる要素の、どの属性を変化させるかを指定します。
上の例ではd属性です。
「d」ってなんでしょうね、「data」でしょうか。
さっき書いたように、d属性の中にパスの内容が入っているので、これを変化させてアニメーションにしています。

values属性には、実際にどう変化していくかの値を書いていきます。
真円→楕円→真円と繰り返しているので、値は3つです。
それぞれの値は;(セミコロン)で区切ります。
最後の値のあとにもつけちゃうと動かなくなるので注意です。

dur属性は、アニメーション1回にかかる時間を指定する属性です。
内容は1sとか00:01などと書く時間の長さか、「不定」であることを表すキーワードindefinite、またはmediaというキーワードのようです。
ただ、SVGにおいてmediaが使われた場合、これは無視されるそうです。
長さが「不定」ってどういうことなんでしょうか。

repeatCountは、何回アニメーションを繰り返すかを指定する属性です。
indefiniteキーワードが「不定」となってますが、まあ「無限」って考えて問題ないと思います。
あとは0より大きい数値です。
小数点も使えるそうで、その場合はdurで決めた時間を途中まで進めるようになるみたいです。
durの値が2sで、repeatCount1.5だったら、1周半で3秒になるってことですね。
上の例で1周半すると、縦長になるところまでってことになります。

ひとコマの持続時間を変える

さっき用意した6つのSVGを、「1→2→3→4→5→1→6→1」の順番で繰り返しますが、そのままだとこんな感じになっちゃいます。

別にいいっちゃぁいいんですが、もっと溜めが欲しいところ。
そういうときはkeyTimes属性を使います。
アニメーション1周を1として、valuesのそれぞれの値がいつ始まるかを比率で表します。
今回は一番初めの動きを長めにしたいので、こんな感じにしました。
keyTimes="0;.5;.58;.66;.74;.82;.90;1"
グラフっぽく書くとこうかな?

12345161

0.5.58.66.74.82.901

そうするとこうなります。

javascriptで制御する

せっかくなので、クリックしたら1回動くようにします。

アニメーションを開始するタイミングを指定するbegin属性を使います。
この値をindefiniteにすると、他から呼び出されない限り、アニメーションが開始されません。
javascriptから呼び出すときはbeginElement()メソッドを使います。
ただ、MDNのページにはexperimental(実験的)と書かれているので、対応してないブラウザがあるかもしれません。
このメソッドは、SVGのアニメーション要素で使えます。
アニメーション要素には、animate要素の他にset要素animateTransform要素などがあります。
さっきのSVGのpath要素onclick属性を指定して、そこから関数を呼び出してみます。


<path d="M217,174c0,55.23-44.77,100,-100,100S17,229.23,17,174c0-55.23,55.23-100,100-100s100,44.77,100,100Z"
	onclick="this.firstElementChild.beginElement();">
	<animate attributeName="d"
		values="
			M217,174c0,55.23-44.77,100,-100,100S17,229.23,17,174c0-55.23,55.23-100,100-100s100,44.77,100,100Z;
			M206,137c0,75.66-39.85,137,-89,137s-89,-61.34,-89,-137c0-75.66,39.85-137,89-137s89,61.34,89,137Z;
			M234,181c0,63-52.38,93-117,93S0,244,0,181c0-53,68-19,117-19S234,128,234,181Z;
			M212,164c0,60.75-42.53,110,-95,110s-95,-49.25,-95,-110c0-60.75,42.53-110,95-110s95,49.25,95,110Z;
			M222,185c0,49.15-47.01,89,-105,89s-105,-39.85,-105,-89c0-64,47.01-78,105-78s105,14,105,78Z;
			M217,174c0,55.23-44.77,100,-100,100S17,229.23,17,174c0-55.23,55.23-100,100-100s100,44.77,100,100Z;
			M217,182.5c0,50.53-44.77,91.5-99.5,91.5s-100.5-40.97-100.5-91.5c0-50.53,44.77-91.5,100.5-91.5s99.5,40.97,99.5,91.5Z;
			M217,174c0,55.23-44.77,100,-100,100S17,229.23,17,174c0-55.23,55.23-100,100-100s100,44.77,100,100Z
		"
		dur="2s"
		keyTimes="0;.5;.58;.66;.74;.82;.90;1"
		repeatCount="1"
		begin="indefinite"></animate>

animate要素に直接onclickを指定できればいいんですが、animate要素には実体が無いっぽいので、クリックできないってことなんじゃないかな。
なのでpath要素に指定して、this.firstElementChildanimate要素を取得しています。
script要素に関数を定義して呼び出すときでも同じです。
色も変えたいので、こういう関数を作りました。


function startAnim(parent) {
	const ANIMATE_LIST = parent.getElementsByClassName('runAnim');
	for (let i = 0, l = ANIMATE_LIST.length; i < l; i++) {
		let animateElem = ANIMATE_LIST[i].children;
		for (let j = 0, m = animateElem.length; j < m; j++) {
			animateElem[j].beginElement();
		}
	}
}

SVG要素から呼び出したかったので、アニメーション要素にクラス名をつけることにしました。 で、SVG要素から<svg onclick="startAnim(this);">って感じで呼び出します。

あ、色の方はattributeName="fill"で指定します。

部分的にタイミングをずらす

一番作りたかったのは、初めに置いたひよこのアニメーションです。
つつくと起きて、しばらくするとまた目を閉じるようにしたかったので、他のアニメーションをきっかけに開始するようにします。
さっきjavascriptきっかけで開始するために指定したbegin属性に、別のアニメーションにつけたidを指定します。
そこに追加でプラス何秒とかマイナス何秒というのもつけられるので、「あのアニメーションが終わってから○秒後」とかにもできます。
「始まり」きっかけはきっかけアニメーションのID.beginで、「終わり」きっかけはきっかけアニメーションのID.endです。
このひよこでは、目を開くまでのアニメーションをg要素で囲ってクラス名をつけて、その中のひとつに目印のidをつけました。
g要素で囲ったアニメーション(目が開く部分)だけクリックで動くようにして、それが終わったら目を閉じるアニメーションを開始するってことです。

目を開くアニメーションが終わったときにfill属性freezeにしておかないと、アニメーションが始まる前の状態に戻ってしまいます。
fill属性は、アニメーションが終わったときにその状態を維持するかどうかを決めるもので、freezeで維持、removeで戻します(規定値はremove)。

ここでものすごくはまったところがあります。
目を開くアニメーションと目を閉じるアニメーションはそれぞれ同じattributeNameを変化させていて、どちらでもfill属性freezeにしています。
アニメーションが1周してからもう1度クリックしたとき、目のアニメーションが位置以外動かなかったんです。
おっかしいなーと思って、アニメーションが1周するのを待たずに連続でクリックすると、目を開くアニメーションが終わった後、目を閉じるアニメーションがクリックした分だけ繰り返されました。
それからもう一度クリックしてみると、今度はちゃんと動くようになったんです。
ページをリロードするとまた動かないところに戻ります。
多分、同じ属性に2つのアニメーションを指定して、両方ともfreezeにしてるので、freezeの効果が消えずに競合しているんだと思います。
ただこの競合、WindowsのGoogleChromeでしか起きないんですよ……。
FireFoxとOperaでは確認できませんでしたし、AndroidのChrome、Edgeでも起きませんでした(WindowsのEdgeは持っていないので分かりません)。
目のアニメーションを開くのと閉じるので分けずに、1周を長くしてみたり、XHRオブジェクトを使ってSVG要素だけ再読み込みしようとしたんですが上手くいきませんでした。
ものすごく時間をかけて色々調べて試したところ、SVG要素setCurrentTime()というメソッドがあることが分かりました。
あまり説明してるページが無いので詳しい効果は分からないんですが、これの引数に0を指定することでアニメーションをリセットできるみたいです。
「CurrentTime」だから現在時刻をセットするってことだと思うんですが、これ1にしても20にしても特に変わりないんですよね。
とにかくSVG要素.setCurrentTime(0);を追加しておくと希望通りの動作になることが分かりました。

ざっくりとこんな感じになります。

スクリプト

	function startAnim(parent) {
		parent.setCurrentTime(0);
		const ANIMATE_LIST = parent.getElementsByClassName('runAnim');
		⋮
		⋮
	}
html

<svg onclick="startAnim(this);">
	<g class="runAnim">
		<animate attributeName="cy" id="wakeupAnim"
			begin="indefinite" 
			fill="freeze" 
			⋮
			⋮></animate>
		<animate attributeName="rx"
			begin="indefinite" 
			fill="freeze" 
			⋮
			⋮></animate>
	</g>
	⋮
	⋮
	<animate attributeName="rx"
		begin="wakeupAnim.end+3s" 
		fill="freeze" 
		⋮
		⋮></animate>
<svg>

変形アニメーション

ひよこのSVGをIllustratorで書き出したら、目の部分がこうなってたんです。
<ellipse cx="48.19" cy="54.08" rx="7.58" ry="1.53" transform="rotate(-9.71,48.19,54.08)" id="chickEyeLeft">
transform属性が指定されてますね。
この間の記事「【CSS】台形のタブ(transform)」で書いた、cssのtransformプロパティと書き方がちょっと違います。
rotateの値は回転の角度,回転の基準点のX座標,回転の基準点のY座標って感じになります。
cssにあるtransform-originプロパティも一緒に指定してるってことですね。
これが付いてるのは、楕円で作った目を斜めに回転させてるからなんですが、このtransform属性animate要素では扱えません。
これをアニメーションさせるにはanimateTransform要素を使います。 type属性に変形の種類を指定して、frombyto属性に実際変形する値を入れます。
animate要素と同じようにvalue属性も使えるみたいですが、色んなサイトとかSVG 1.1 仕様 (第2版) 日本語訳なんかでは使われているのを見ません。なんでだろう?
目の回転を変化させるアニメーションの部分はこんな感じです。


		<animateTransform attributeName="transform"
			type="rotate"
			from="-9.71,48.19,54.08" to="0,48.19,54.08"
			dur="0.1s"
			begin="indefinite"
			fill="freeze"
			repeatCount="1"></animateTransform>

ソースコード

楕円のアニメーションとひよこのアニメーション、使ってるスクリプトは同じです。
一応それぞれのソースコードを載せておきます。

スクリプト

	function startAnim(parent) {
		parent.setCurrentTime(0);
		const ANIMATE_LIST = parent.getElementsByClassName('runAnim');
		for (let i = 0, l = ANIMATE_LIST.length; i < l; i++) {
			let animateElem = ANIMATE_LIST[i].children;
			for (let j = 0, m = animateElem.length; j < m; j++) {
				animateElem[j].beginElement();
			}
		}
	}
楕円のSVG

<svg onclick="startAnim(this);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234 274" width="200px" height="200px">
<path d="M217,174c0,55.23-44.77,100,-100,100S17,229.23,17,174c0-55.23,55.23-100,100-100s100,44.77,100,100Z" fill="#73E5FF" id="svg1">
<g class="runAnim">
	<animate attributeName="d" href="#svg1"
		values="
			M217,174c0,55.23-44.77,100,-100,100S17,229.23,17,174c0-55.23,55.23-100,100-100s100,44.77,100,100Z;
			M206,137c0,75.66-39.85,137,-89,137s-89,-61.34,-89,-137c0-75.66,39.85-137,89-137s89,61.34,89,137Z;
			M234,181c0,63-52.38,93-117,93S0,244,0,181c0-53,68-19,117-19S234,128,234,181Z;
			M212,164c0,60.75-42.53,110,-95,110s-95,-49.25,-95,-110c0-60.75,42.53-110,95-110s95,49.25,95,110Z;
			M222,185c0,49.15-47.01,89,-105,89s-105,-39.85,-105,-89c0-64,47.01-78,105-78s105,14,105,78Z;
			M217,174c0,55.23-44.77,100,-100,100S17,229.23,17,174c0-55.23,55.23-100,100-100s100,44.77,100,100Z;
			M217,182.5c0,50.53-44.77,91.5-99.5,91.5s-100.5-40.97-100.5-91.5c0-50.53,44.77-91.5,100.5-91.5s99.5,40.97,99.5,91.5Z;
			M217,174c0,55.23-44.77,100,-100,100S17,229.23,17,174c0-55.23,55.23-100,100-100s100,44.77,100,100Z
				"
		dur="2.5s"
		keyTimes="0;.5;.58;.66;.74;.82;.90;1"
		repeatCount="1"
		begin="indefinite"></animate>
	<animate attributeName="fill" href="#svg1"
		values="#73E5FF;#FFB9B9;#FFB9B9;#73E5FF;#73E5FF"
		dur="2.5s"
		keyTimes="0;.5;.55;.7;1"
		repeatCount="1"
		begin="indefinite"></animate>
</g>
</path>
</svg>
ひよこのSVG

<svg onclick="startAnim(this);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135 135" width="200px" height="200px">
<defs><style>
.cls-1,.cls-4,.cls-6{fill:none;}.cls-1{stroke:#e88b00;stroke-width:5px;}
.cls-1,.cls-4{stroke-linecap:round;}.cls-2,.cls-3{fill:#ffe04a;}
.cls-3,.cls-4,.cls-5{stroke:#000;stroke-width:2px;}.cls-5{fill:#f90;}
</style></defs>

<g id="chickLegs">
<line class="cls-1" x1="46.43" y1="110.59" x2="44.36" y2="121.24"/>
<path class="cls-1" d="M31.22,124.64c7.9-4.1,20-4.83,24.28-.59"/>
<line class="cls-1" x1="88.57" y1="110.59" x2="90.64" y2="121.24"/>
<path class="cls-1" d="M103.78,124.64c-7.9-4.1-20-4.83-24.28-.59"/>
</g>

<path id="chickBottom" class="cls-2" d="M22.69,59.23,21.17,87.79c4,26.79,26.42,30.12,46.33,30.12s42.37-3.33,46.33-30.12l-1.52-28.56Z">
<g class="runAnim">
	<animate attributeName="d" href="#chickBottom"
		values="
		M22.69,59.23,21.17,87.79c4,26.79,26.42,30.12,46.33,30.12s42.37-3.33,46.33-30.12l-1.52-28.56Z;
		M22.69,59.23,21.17,87.79c4,26.79,26.42,30.12,46.33,30.12s42.37-3.33,46.33-30.12l-1.52-28.56Z;
		M22.69,68.31,21.17,96.87c4,26.79,26.42,21,46.33,21s42.37,5.75,46.33-21l-1.52-28.56Z;
		M22.69,54.82,21.17,83.39c4,26.79,26.42,34.73,46.33,34.73s42.37-7.94,46.33-34.73l-1.52-28.57Z;
		M22.69,63.69,21.17,92.26c4,26.79,26.42,25.65,46.33,25.65s42.37,1.14,46.33-25.65l-1.52-28.57Z;
		M22.69,59.43,21.17,88c4,26.79,26.42,30.12,46.33,30.12s42.37-3.33,46.33-30.12l-1.52-28.57Z
		"
		dur="1s"
		begin="indefinite"
		repeatCount="1"></animate>
</g>
</path>

<path id="chickTop" class="cls-3" d="M110.2,99.75c14.06-4.66,14.06-24.85,2.1-40.53h0c-5-23.43-20.72-42.55-44.81-42.55S27.66,35.8,22.69,59.23h0c-12,15.68-12,35.87,2.1,40.53">
<g class="runAnim">
	<animate attributeName="d" href="#chickTop"
		values="
		M110.2,99.75c14.06-4.66,14.06-24.85,2.1-40.53h0c-5-23.43-20.72-42.55-44.81-42.55S27.66,35.8,22.69,59.23h0c-12,15.68-12,35.87,2.1,40.53;
		M110.2,99.75c14.06-4.66,14.06-39.85,2.1-55.53h0C107.34,20.8,91.59,1.68,67.5,1.68S27.66,20.8,22.69,44.23h0c-12,15.68-12,50.87,2.1,55.53;
		M110.2,108.83c14.06-4.66,14.06-24.85,2.1-40.53h0c-5-23.43-20.72-42.55-44.81-42.55S27.66,44.88,22.69,68.31h0c-12,15.68-12,35.87,2.1,40.53;
		M110.2,95.35c14.06-4.67,14.06-24.85,2.1-40.53h0c-5-23.42-20.72-42.55-44.81-42.55S27.66,31.4,22.69,54.82h0c-12,15.68-12,35.86,2.1,40.53;
		M110.2,104.22c14.06-4.66,14.06-24.85,2.1-40.53h0c-5-23.42-20.72-42.54-44.81-42.54S27.66,40.27,22.69,63.69h0c-12,15.68-12,35.87,2.1,40.53;
		M110.2,100c14.06-4.67,14.06-24.85,2.1-40.53h0C107.34,36,91.59,16.88,67.5,16.88S27.66,36,22.69,59.43h0c-12,15.68-12,35.86,2.1,40.53
		"
		dur="1s"
		begin="indefinite"
		repeatCount="1"></animate>
</g>
</path>

<path id="chickBottomLine" class="cls-4" d="M21.17,87.79c4,26.79,26.42,30.12,46.33,30.12s42.37-3.33,46.33-30.12">
<g class="runAnim">
	<animate attributeName="d" href="#chickBottomLine"
		values="
		M21.17,87.79c4,26.79,26.42,30.12,46.33,30.12s42.37-3.33,46.33-30.12;
		M21.17,87.79c4,26.79,26.42,30.12,46.33,30.12s42.37-3.33,46.33-30.12;
		M21.17,96.87c4,26.79,26.42,21,46.33,21s42.37,5.75,46.33-21;
		M21.17,83.39c4,26.79,26.42,34.73,46.33,34.73s42.37-7.94,46.33-34.73;
		M21.17,92.26c4,26.79,26.42,25.65,46.33,25.65s42.37,1.14,46.33-25.65;
		M21.17,88c4,26.79,26.42,30.12,46.33,30.12s42.37-3.33,46.33-30.12
		"
		dur="1s"
		begin="indefinite"
		repeatCount="1"></animate>
</g>
</path>

<g id="chickBeak">
<ellipse class="cls-5" cx="67.5" cy="67.29" rx="21.07" ry="8.48" id="chickBeakFill">
<g class="runAnim">
	<animate attributeName="cy" href="#chickBeakFill"
		values="67.29;52.29;76.37;62.89;71.76;67.5"
		dur="1s"
		begin="indefinite"
		repeatCount="1"></animate>
</g>
</ellipse>
<line class="cls-4" x1="46.43" y1="67.29" x2="88.57" y2="67.29" id="chickBeakLine">
<g class="runAnim">
	<animate attributeName="y1" href="#chickBeakLine"
		values="67.29;52.29;76.37;62.89;71.76;67.5"
		dur="1s"
		begin="indefinite"
		repeatCount="1"></animate>
	<animate attributeName="y2" href="#chickBeakLine"
		values="67.29;52.29;76.37;62.89;71.76;67.5"
		dur="1s"
		begin="indefinite"
		repeatCount="1"></animate>
</g>
</line>
</g>

<g id="chickEyes">
	<ellipse cx="48.19" cy="54.08" rx="7.58" ry="1.53" transform="rotate(-9.71,48.19,54.08)" id="chickEyeLeft">
	<g class="runAnim">
		<animate attributeName="cy" id="wakeupAnim" href="#chickEyeLeft"
			values="54.08;36.85;63.16;49.67;58.55;54.29"
			dur="1s"
			begin="indefinite"
			fill="freeze"
			repeatCount="1"></animate>
		<animate attributeName="rx" href="#chickEyeLeft"
			values="7.58;3.25;2.38;2.38;2.38;2.38"
			dur="1s"
			begin="indefinite"
			fill="freeze"
			repeatCount="1"></animate>
		<animate attributeName="ry" href="#chickEyeLeft"
			values="1.53;6.95;4.13;4.13;4.13;4.13"
			dur="1s"
			begin="indefinite"
			fill="freeze"
			repeatCount="1"></animate>
		<animateTransform attributeName="transform" href="#chickEyeLeft"
			type="rotate"
			from="-9.71,48.19,54.08" to="0,48.19,54.08"
			dur="0.1s"
			begin="indefinite"
			fill="freeze"
			repeatCount="1"></animateTransform>
	</g>
	<animate attributeName="rx" href="#chickEyeLeft"
		values="2.38;7.58"
		dur="1.5s"
		fill="freeze"
		begin="wakeupAnim.end+3s"
		repeatCount="1"></animate>
	<animate attributeName="ry" href="#chickEyeLeft"
		values="4.13;1.53"
		dur="1.5s"
		fill="freeze"
		begin="wakeupAnim.end+3s"
		repeatCount="1"></animate>
	<animateTransform attributeName="transform" href="#chickEyeLeft"
		type="rotate"
		from="0,48.19,54.08" to="-9.71,48.19,54.08"
		dur="1.5s"
		begin="wakeupAnim.end+3s"
		fill="freeze"
		repeatCount="1"></animateTransform>
	</ellipse>
		
	<ellipse cx="86.81" cy="54.08" rx="7.58" ry="1.53" transform="rotate(9.71,86.81,54.08)" id="chickEyeRight">
	<g class="runAnim">
		<animate attributeName="cy" href="#chickEyeRight"
			values="54.08;36.85;63.16;49.67;58.55;54.29;"
			dur="1s"
			begin="indefinite"
			fill="freeze"
			repeatCount="1"></animate>
		<animate attributeName="rx" href="#chickEyeRight"
			values="7.58;3.25;2.38;2.38;2.38;2.38;"
			dur="1s"
			begin="indefinite"
			fill="freeze"
			repeatCount="1"></animate>
		<animate attributeName="ry" href="#chickEyeRight"
			values="1.53;6.95;4.13;4.13;4.13;4.13;"
			dur="1s"
			begin="indefinite"
			fill="freeze"
			repeatCount="1"></animate>
		<animateTransform attributeName="transform" href="#chickEyeRight"
			type="rotate"
			from="9.71,86.81,54.08" to="0,86.81,54.08"
			dur="0.1s"
			begin="indefinite"
			fill="freeze"
			repeatCount="1"></animateTransform>
	</g>
	<animate attributeName="rx" href="#chickEyeRight"
		values="2.38;7.58"
		dur="1.5s"
		fill="freeze"
		begin="wakeupAnim.end+3s"
		repeatCount="1"></animate>
	<animate attributeName="ry" href="#chickEyeRight"
		values="4.13;1.53"
		dur="1.5s"
		fill="freeze"
		begin="wakeupAnim.end+3s"
		repeatCount="1"></animate>
	<animateTransform attributeName="transform" href="#chickEyeRight"
		type="rotate"
		from="0,86.81,54.08" to="9.71,86.81,54.08"
		dur="1.5s"
		begin="wakeupAnim.end+3s"
		fill="freeze"
		repeatCount="1"></animateTransform>
	</ellipse>
</g>
</svg>

一番苦労したのはSVG要素.setCurrentTime(0);を見つけるところでした……。
これを上手く活用して何かできたら面白いなぁとは思いますが、活用先が思いつきません。
でも覚えておいて損は無い……はずなので書いておきました!



ジャンル : コンピュータ
テーマ : ホームページ・ブログ制作

コメントの投稿

非公開コメント

ステータス
細野ゆとり
あそびにん
せいべつおんな
レベル
ちから
すばやさ
こうげき力
しゅび力
EX
最新記事
カテゴリー
月別アーカイブ
全記事表示リンク

全ての記事を表示する

おえかき
ブログ内ページランキング
その他SNS
検索フォーム
オンラインカウンター
現在の閲覧者数:
カレンダー
11 | 2019/12 | 01
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
リンク
カウンター
RSSリンクの表示
QRコード
QR