Path Slider - SVGをJavaScriptでアニメーション
SVGの良いところはベクターベースなので縮小、または拡大しても綺麗なまま表現できること、そして一般的に画像よりも軽量ということです。さらにJavaScriptとの親和性も高いのが開発者にとって嬉しいことです。 とはいえ、SVGに対して高度な操作を行うのは大変です。すでにある、例えば今回紹介するPath Sliderのようなライブラリを活用するのが良いでしょう。
Path Sliderの使い方
一例です。
クリックするとアイコンがアニメーションしながら動きます。
別な例です。
より実用的なデモです。スライドが滑らかです。
Path Sliderだけですべての表現ができるとは思えませんので、JavaScript側でも多少の設定は必要でしょう。しかし、こういったダイナミックな表現を行おうと思うと相当なコード量が必要なはずです。Path Sliderを使って、手軽に実装しましょう。
Path SliderはJavaScript製のオープンソース・ソフトウェア(MIT License)です。
Path Slider Basic Demo lmgonzalves/path-slider: Animating Elements Along SVG Paths with Javascript