Blog

SVGの属性をjQueryで操作してアニメーションさせる(数値の値のみ)

nino-eye

インラインSVGの要素をアニメーションさせる方法は様々あります。

一つはSMILというXMLの言語をSVGで設定する方法。
SVGの規格に含まれているため、自然で無理のないアニメーションを実装できます。
ただ、これはIE、Edgeでサポートされておらず、現状では実用で使うのは難しいのが現実です。

もう1つはCSSでアニメーションさせる方法。
CSSの滑らかなアニメーションを、HTMLの通常の要素と同じようなアニメーションの指定方法でSVGにアニメーションを指定できるため、利用しやすいのがメリットです。
ただ、こちらもIE、Edgeでサポートされておらず、他のブラウザでも一部動作したりしなかったりします。

最後の1つはJavaScriptでSVGの属性を直接操作して、アニメーションさせる方法。
直接SVGを操作するため、インラインSVGをサポートしているブラウザであれば、どのブラウザでも同じようにアニメーションさせることができます。
ただ、SMILやCSSと比べると、若干、実装の難易度が高くなります。

jQuery3系では、インラインSVG内の要素を選択できるようにサポートされましたが、
残念ながら、アニメーションはサポートされていません。
ただ、属性の変更はサポートされているため、JavaScriptで直接操作するよりは簡単にアニメーションを実装できます。

そこで、jQueryを通じてSVGをアニメーションさせる方法を考えてみました。
ただし、今回は、xやwidthのような単独の数値の値を取る属性が対象で、pathのd属性やfillの色など、複雑な値を取るものには対応していません。

↓jQueryでSVGをアニメーションさせてみたもの
DEMO

jQueryでSVGをアニメーションさせるまで

  • アニメーションにはrequestAnimationFrameを使う
  • イージングをつけられるようにする
  • jQueryのanimate()のように手軽に使えるようにする

今回は、以上の3つを実現できる方法を考えてみました。

まず、アニメーションにはHTML5で推奨されているrequestAnimationFrameを使いました。

このときポイントになるのは、経過時間をアニメーションのループ毎に取得して、
duration(アニメーション全体の時間)の中のどのくらいの割合まで経過時間が進んだかによって、属性の変更中の値を決めることです。
requestAnimationFrameでは、アニメーションのフレーム単位の時間を指定できないため、
経過時間の計測が必須になります。

DEMO

続いて、現状だとアニメーションが直線的で不自然なので、イージングに対応させます。
イージングの関数は、以下で紹介いただいていたものをそのまま使わせていただきました。

Simple Easing Functions in Javascript – see https://github.com/gre/bezier-easing · GitHub

こちらを前もって読み込んでおいて、
先程のコードの属性変更部分を以下のように書き換えます。

こうすることで、イージングが実装され、アニメーションがより自然なものになります。

DEMO

最後に、ここまでのコードをjQueryの関数として追加し、
使い勝手の良いものにします。

こうすることで、以下のような指定でアニメーションを実装できるようになりました。

プラグインにしたコードは、以下からダウンロードできます。

jQuery Animate Attr

応用することで、色やもっと複雑な属性値のアニメーションも可能になると思います。

参考にさせていただいたサイト

Animating with Robert Penner’s Easing Functions | kirupa.com

Simple Easing Functions in Javascript – see https://github.com/gre/bezier-easing · GitHub

SVG animation with SMIL – SVG | MDN

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ