こんにちは、おじいちゃんです
今回はSVGのpathを使ったモーションパスアニメーションの実装方法について書きたいと思います。
path要素を使うことで、好きな図形を描くことができます。
Illustratorを使っている方はよく使ってますよね。Illustratorで描いたパスからSVGを書き出して使うこともできるのですが、今回は直接SVGタグのpath要素に描いて作ってみましょう。
SVGでpathを描く場合は、上のように各コマンドにパラメータをいれることでpathを描画できます。少しクセがありますが、自分で好きなpathを描いてみると慣れてきますので、遊んでみてください。
pathを描画するためのコマンドは下記があります。
SVGとpathについては下記サイトでまとめられているので、ぜひ読んでみてください。
参考:10分でわかるSVG 基礎編
http://www.atmarkit.co.jp/ait/articles/1206/01/news143.html
それでは、アニメーションさせたい軌道をpathで描いてみましょう。
まずは直線から。
<svg id="svg" width="500" height="500"> <path id="target_path" d=" M 10,250 L 490,250 Z" stroke="#000" fill="none" /> </svg>
描けましたね。
線です。
次に動かしたいSVG要素を配置しましょう。
<svg id="svg" width="500" height="500"> <path id="target_path" d=" M 10,250 L 490,250 Z" stroke="#000" fill="none" /> <circle id="move_circle" cx="0" cy="0" r="5" fill="red"></circle> </svg>
半径5pxの赤丸をSVG要素の左上に配置しました。
cxやxyで座標位置をずらせるのですが、今は気にしないでください。
SVGでアニメーションさせる方法はいくつかあるのですが、今回は、
この2つについて書きたいと思います。
先ほど作ったcircleの中にanimateMotionタグを配置し、下記プロパティを設定します。
mpath要素で動かしたいpathのセレクタを指定してください。
<svg id="svg" width="500" height="500"> <path id="target_path" d=" M 10,250 L 490,250 Z" stroke="#000" fill="none" /> <circle id="move_circle" cx="0" cy="0" r="5" fill="red"> <animateMotion dur="3s" repeatCount="indefinite"> <mpath xlink:href="#target_path"></mpath> </animateMotion> </circle> </svg>
記事内で使われている画像は参考のgifです。
animateMotionメソッドを使うことで、モーションパスに沿ったアニメーションを実装することができます。
SVGDOMのアニメーションについては、下記サイトでまとめられているので参考にしてみてください。
参考:SVGで図形やアニメを描画してみよう
http://www.atmarkit.co.jp/ait/articles/1207/02/news142.html
animateMotionメソッドは、簡単にモーションパスアニメーションを実装できるのですが、残念ながら一部のIEとAndroidが対応していません。
使いどころを選ぶ必要があります。
次にJavaScriptを使ったアニメーション方法です。
//pathを取得 var $targetPath = document.getElementById('target_path'); //動かしたいsvg要素を取得 var $moveCircle = document.getElementById('move_circle'); //動かす値を取得 var counter = 0; //再生方向反転用フラグ var state = true; //pathの長さを取得 var leng = $targetPath.getTotalLength(); //アニメーション関数 function moveCircle(){ //終点についたら反転させる判定 if( parseInt(counter,10) === 1 ){ state = false; } else if ( parseInt(counter,10) &lt; 0 ){ state = true; } //アニメーション用のcounter if(state){ counter += 0.003; } else { counter -= 0.003; } //現在の座標位置を取得 var point = $targetPath.getPointAtLength(counter * leng); //動かしたいSVG要素のtranslateを変更 $moveCircle.setAttribute(&quot;transform&quot;,&quot;translate(&quot;+ point.x + &quot;,&quot;+ point.y +&quot;)&quot;); //再帰 window.requestAnimationFrame(moveCircle); } var timer = window.requestAnimationFrame(moveCircle);
pathに関するメソッドは下記サイトにまとめられているので参考にしてみてください。
参考:MDN SVGPathElement(英語)
https://msdn.microsoft.com/en-us/library/ie/ff972086(v=vs.85).aspx
今までは直線でしたが、今度は好きなpathを描いてみてください。
直線のpathを複数つないでみたり、
<path id="target_path" d=" M 10,250 L 490,250 490,490 10,490 Z" stroke="#000" fill="none"/>
2次ベジェ曲線を描いてみたり、
<path id="target_path" d=" M 10,250 Q 130,100 250,250&" stroke="#000" fill="none" />
2次ベジェ曲線を複数描いてみたり。
<path id="target_path" d=" M 10,250 Q 130,100 250,250 370,400 490,250" stroke="#000" fill="none" />
pathに沿ってアニメーションしていますね。
この動きを応用することでjQueryのanimateでは実現が難しい曲線を描く軌道でも、好きなようにアニメーションさせることができます。
いかがだったでしょうか。
SVGを使えば表現できるアニメーションの幅が広がるので、興味のある方はぜひ勉強してみてください。
上京して早2年。「おじいちゃん」と呼ばれ早2年。
名前で呼んでくれる人がいても、
いいのではないだろうかと、
思ったりしてます。
ほんでは!
【アニメーション表現の幅を広げる!】
※ CSS3とjQueryでオリジナル画像のスプライトアニメーションを実装する方法
※ animateとjQuery.Deferredで動きのある「トップへ戻る」ボタンを作ってみよう
※ p5.jsでProcessingのようにリッチなWeb表現を作るチュートリアル