こんにちは、おじいちゃんです
今回はSVGのpathを使ったモーションパスアニメーションの実装方法について書きたいと思います。
【こちらもおすすめ】
☞ SVGとjQueryで絵を描いているようなアニメーションを実装する方法
SVGのpath要素
path要素を使うことで、好きな図形を描くことができます。
Illustratorを使っている方はよく使ってますよね。Illustratorで描いたパスからSVGを書き出して使うこともできるのですが、今回は直接SVGタグのpath要素に描いて作ってみましょう。
-
d=”M 50,50 L 200,50 Z”
SVGでpathを描く場合は、上のように各コマンドにパラメータをいれることでpathを描画できます。少しクセがありますが、自分で好きなpathを描いてみると慣れてきますので、遊んでみてください。
pathを描画するためのコマンドは下記があります。
- m/M : pathの始点を移動
- Z : pathを閉じる
- l/L : 直線
- h/H : 水平線・垂直線（X座標）
- v/V : 水平線・垂直線（Y座標）
- q/Q : ２次ベジェ曲線
- t/T : ２次ベジェ曲線（制御点は前の曲線から自動計算）
- c/C : ３次ベジェ曲線
- s/S : ３次ベジェ曲線（制御点は前の曲線から自動計算）
- a/A : 円弧 半径,半径
SVGとpathについては下記サイトでまとめられているので、ぜひ読んでみてください。
参考：10分でわかるSVG 基礎編
http://www.atmarkit.co.jp/ait/articles/1206/01/news143.html
さっそくpathを描いてみる
それでは、アニメーションさせたい軌道を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でアニメーションさせる方法はいくつかあるのですが、今回は、
- SVGDOMのanimateMotionタグを使ったアニメーション
- JavaScriptを使ったアニメーション
この2つについて書きたいと思います。
animateMotionタグを使ったアニメーション
先ほど作ったcircleの中にanimateMotionタグを配置し、下記プロパティを設定します。
- dur：秒数
- repeatCount：再生回数（リピートしたい場合はindefinite）
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を使ったアニメーション
次に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) < 0 ){
state = true;
}
//アニメーション用のcounter
if(state){
counter += 0.003;
} else {
counter -= 0.003;
}
//現在の座標位置を取得
var point = $targetPath.getPointAtLength(counter * leng);
//動かしたいSVG要素のtranslateを変更
$moveCircle.setAttribute("transform","translate("+ point.x + ","+ point.y +")");
//再帰
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を複数つないでみたり、
<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表現を作るチュートリアル
※ ScrollMagicを使ってスクロールに応じたアニメーションをさせてみよう
※ 小さな工夫が光る、テキストリンクのHoverアニメーション参考集
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
