Skip to content
Tags

SVGをアニメーションするライブラリまとめ

by : 2018/03/12

SVGはドロー系描画機能として今後、ますます高画素化の進むディスプレイに対するリソースの肥大化問題の解決策として注目が集まっていくでしょう。PNGやJPEG画像ではキャンバスサイズが大きくなるにつれてファイルサイズが肥大化しますが、SVGはベクターデータなのでファイルサイズは変わりません。

しかしSVGの魅力は静的な表示を行うだけに限りません。JavaScriptで内容を変えたり、動かしたりできます。今回はそうしたSVGアニメーションを助ける各種ライブラリを紹介します。

flubber

特定の形から別な形へ自然にモーフィングできるライブラリです。一つから一つの場合、一つから複数(またはその逆)とアニメーションが可能です。

veltman/flubber: Tools for smoother shape animations.

Shape Shifter

二つのSVGファイルを指定して、アニメーションを生成してくれるライブラリです。Web上でファイルを指定できるので、プレビューを見ながら細かく調整ができます。

Shape Shifter

zPath.js

一つのSVGファイルを描画するアニメーションを生成します。描画の方法についても数パターン用意されています。

ZetCoby/zPath.js: A jquery plugin that will animate/draw SVG

mo · js

SVGベースのモーションアニメーションを生成するライブラリです。派手なアニメーションもできますが、クリック時に光らせたり跳ねるような、ちょっとしたアニメーションも可能です。

mo · js – Motion Graphics For The Web

Primitive

指定した写真を幾何学模様で描くソフトウェアです。その描画されていく過程をSVGファイルで保存できます。

fogleman/primitive: Reproducing images with geometric primitives.

Yarrow

矢印をアニメーションで表示したり、ツールチップを表示したりします。グラフなどと連携することによって見た目にインパクトのあるプレゼンテーションが実現できます。

Yarrow — svg animated arrow pointer and tooltip

jQuery DrawSVG

jQueryのプラグインとして提供されています。SVGの内容をアニメーションしながら描画するライブラリです。

jQuery DrawSVG

Animate Plus

CSS3またはSVGでアニメーションを実現します。イージングが用意されているので、細かい動きを実装することなくアニメーションが実現できます。

bendc/animateplus: CSS and SVG animation library

SVG Morpheus

指定したアイコンが別なアイコンに変化するアニメーションを生成します。アイコンとイージング、遅延、回転などの設定だけなのですぐに使いこなせるでしょう。

alexk111/SVG-Morpheus: JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design’s Delightful Details transitions. (THIS PROJECT IS NOT MAINTAINED ANYMORE)

vivus

SVGファイルを解析し、その描画をアニメーションしながら順番に行っていきます。

maxwellito/vivus: JavaScript library to make drawing animation on SVG

Walkway

基本的に一筆書きの容量で既存のSVGファイルからアニメーションを生成します。

ConnorAtherton/walkway: An easy way to animate SVG elements.

Letterbolt

SVGで文字を描くライブラリです。スクロールなどのイベントに合わせてスムーズに文字が描かれます。

buseca/letterbolt

Loading…

SVGでローディング表示を行います。ドットやラジオなど、8種類のアニメーションが用意されています。

jxnblk/loading: This could take a while

Animated SVG Icons

20種類を超えるアニメーションするSVGアイコンを提供しています。Snap.svgというライブラリを用いています。

codrops/AnimatedSVGIcons: Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example.

Lazy Line Painter

一筆書きでアニメーションするライブラリです。SVGファイルは先頭と終端がなければならず、後はファイルを指定するだけでアニメーションしながら描画していきます。jQuery/Raphaëlが必要です。

camoconnell/lazy-line-painter: A jQuery plugin for path animation using the CSS –


SVGはマウスイベントなどが利用でき、形や色を変えたりできます。ユーザイベントに反応することでユーザビリティを高めたり、注目して欲しい情報を目立たせる効果が期待できるでしょう。

From → まとめ

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。