ITエンジニア/デザイナ向けにオープンソースを毎日紹介

これは覚えておくと良さそうですよ!

スタイルシートやJavaScriptを使ってマウスオーバーで画像を差し替えたりする操作は良くありますが、その発展版とも言えるのがAnimated SVG Iconsです。

SVGを使ったアイコンをクリックやマウスオーバー時にアニメーションしながら表示変更してくれるライブラリです。

画像だと分かりづらいですのが、例えばこちらがデモです。

時計と矢印に注目。
時計と矢印に注目。

矢印をクリックすると、

向きが反対になりました。
向きが反対になりました。

同様に時計をクリックすると、

針が回転しました。
針が回転しました。

試した動画はこちらです。

クリックの他、マウスオーバー時のイベントも指定できます。またアニメーションの速度も変更可能で、より目を引くアクションに設定も可能です。

Animated SVG IconsではSnap.svgを使ってSVGの制御をしています。実際の指定としては次のようになります。

clock : { 
  url : 'svg/clock.svg',
  animation : [
    { 
      el : 'path:nth-child(2)', 
      animProperties : { 
        from : { val : '{"transform" : "r0 32 32"}' }, 
        to : { val : '{"transform" : "r630 32 32"}' } 
      } 
    },
    { 
      el : 'path:nth-child(3)', 
      animProperties : { 
        from : { val :'{"transform" : "r0 32 32"}' }, 
        to : { val : '{"transform" : "r80 32 32"}' }
      } 
    },
  ]
}

new svgIcon( element, configuration [, options] );

アニメーション制御時の指定はそれなりに書かないといけないようですが、色が変わったりするだけでなくアニメーションするアイコンを設置すればユーザインパクトは相当大きいのではないでしょうか。効果的に使いたいライブラリですね。

Animated SVG IconsはJavaScript製のソフトウェア(個人、商用と問わず利用可能。再配布禁止)です。

Animated SVG Icons: Using Snap.svg to animate SVG icons

codrops/AnimatedSVGIcons

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2