アニメーションの使い方 (animate) [SVG]

導入

参考：

SVG で CSS アニメーション | sumi

SVG アニメーション作成 – Qiita

SVG を動かす CSS アニメーション／クリッピングマスク／波／線を描く | BRISK

使い方

参考：

SVG アニメーションの基礎 | ＠IT

アニメーション | defghi1977

アニメーションで SVG のキャラ画像を動かそう！ | webico

線や塗りなど描画が美しい SVG アニメーションの作り方 | BOEL Inc.

アニメーション要素を組み込んで、SVG に活気を与える | IBM Developer 日本語版

A Guide to SVG Animations / SMIL | CSS-Tricks

SVG Animation | Ryan Brownhill

概要

参考：

SVG アニメーションの現状 | POSTD

SVG のアニメーション手段とその選び方 – Qiita

Three Ways to Animate SVG | CSS-Tricks

ドキュメント

参考：

アニメーション | SVG 1.1 第２版 (triple-underscore.github.io)

SMIL アニメーション (triple-underscore.github.io)

Animation | SVG 1.1 Second Edition (w3.org)

SVG Animations Level 2 (svgwg.org)

Can I use

参考：

SVG SMIL animation | Can I use… Support tables

repeatCount

アニメーションの繰り返し回数を指定する。

repeatCount="indefinite"

参考：

repeatCount | MDN

begin

参考：

SVG の animate における begin 属性 | hokaccha memo

begin | MDN

アニメーションのタイミングを制御する属性 | SVG 1.1 第２版 (triple-underscore.github.io)

アニメーション関数のタイミング | SMIL アニメーション (triple-underscore.github.io)

Attributes to control the timing of the animation | SVG 1.1 Second Edition

Animation function timing | SMIL Animation

how to start an animation on the end of another animation? – Stack Overflow

How to loop SVG animation sequence? – Stack Overflow

SVG animation opacity on loop – Stack Overflow

SVG animation delay on each repetition – Stack Overflow

色を変化させる

参考：

塗り／色遷移を CSS3 でね | イナヅマ TV ログ

Creating an SVG Fill animation | Inaudible Discssion

How to fade in and out color of svg – Stack Overflow

How to animate the fill color of SVG with CSS? – Stack Overflow

stroke-dasharray / stroke-dashoffset

参考：

SVG で円をアニメーションさせたい時の MEMO – Qiita

How SVG Line Animation Works | CSS-Tricks

animate

参考：

animate | MDN

animateMotion

参考：

SVG の path を使ったモーションパスアニメーションの実装方法 | LIG

Svg animation for curved path – Stack Overflow

animateTransform

参考：

animateTransform | MDN

attributeName

参考：

attributeName | MDN

attributeType

参考：

attributeType | MDN

パスをアニメーションさせる

参考：

SVG モーフィングで、図形を徐々に変化させてみよう | Webクリエイターボックス

SVG アニメーション作成 – Qiita

SVG で犬のしっぽをフリフリする | wadackel.me

SVG Morphing | codeburst

spline

パラメータを区分多項式曲線で補間する。

calcMode="spline" keySplines="0.42 0 0.58 1"

keySplines の例：

mode	keySplines
ease-in	0.42 0 1 1
ease-out	0 0 0.58 1
ease	0.25 0.1 0.25 1
ease-in-out	0.42 0 0.58 1
linear	0 0 1 1

参考：

SVG アニメーション作成 – Qiita

SVG で犬のしっぽをフリフリする | wadackel.me

SVG animate – Attribute und Events | mediaevent.de

keySplines | MDN

SVG SMIL animateTransform easing – Stack Overflow

keySplines ジェネレーター

参考：

KeySplines | franzheidl.github.io

keyTimes

参考：

keyTimes | MDN

SVG animation keySplines and keyTimes not working – Stack Overflow

freeze

アニメーション終了後に塗りを保持する。

fill="freeze"

参考：

simple svg object reset at end of path – Stack Overflow

beginElement

参考：

Trigger SVG animation using button with JS | CodePen

SVG trigger animation with event – Stack Overflow

How to trigger a svg animation with Javascript? (No jQuery) – Stack Overflow

Start a svg animation onclick event – Stack Overflow

defs / use

参考：

SVG reusability & animation | iamsteve

How to reuse animation tag in SVG without JavaScript – Stack Overflow

CSS でアニメーションさせる

参考：

SVG の path を使用したアニメーション | 佐藤純平

CSS だけで SVG をアニメーションさせる | ハックノート

SVG でリアルな湯気を作ってみる | Tips Note by TAM

Beginning and pausing SVG animations on hover – Stack Overflow

requestAnimationFrame

参考：

requestAnimationFrame でフレームと再描画更新を制御する | Yomotsu net

setCurrentTime

参考：

Restart background SVG animation – Stack Overflow

組み合わせ

参考：

UI 改善にキラリと役立つ！ SVG アニメーションの作り方まとめ | ICS MEDIA

first the stroke, then the fill – Stack Overflow

フィルターを変化させる

参考：

filter 要素の基本的な使い方と filter 要素をつかったモノクロからカラーへ変化するマウスオーバー効果を作る方法 | memocarilog

js 不要！SVG の Filter で手書きアニメーションさせてみた | LIG

Animating SVG Filters applied to HTML elements | Code and Stuff

Animate/Transitions svg filter on image element – Stack Overflow

Gooey Effect

参考：

The Gooey Effect | CSS-Tricks

JavaScript でアニメーションさせる

参考：

Animating SVG with JavaScript | CSS-Tricks

Animate SVG with JavaScript | Creative Bloq

Dynamically animate an svg element – Stack Overflow

timelineBegin

参考：

SVG animation waits for DOMLoad event, timelineBegin=”onStart” is not working? – Stack Overflow

Animated SVGs don’t animate until page is loaded – Stack Overflow

vivus.js

参考：

vivus.js – svg animation [Official]

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

Adobe Capture CC で写真をベクターに変更し、vivus.js を使って SVG animation をやってみた | NIAR

jQuery DrawSVG

参考：

jQuery DrawSVG [Official]

lcdsantos/jquery-drawsvg: Lightweight, simple to use jQuery plugin to animate SVG paths – GitHub

SVG アニメーションが5分で作れる！jQuery DrawSVG の使い方 | STAND4U

SVG のパスを手軽にアニメーションを実装できる！ jQuery DrawSVG のお話 | プラカンブログ

Snap.svg

参考：

Snap.svg [Official]

adobe-webplatform/Snap.svg: The JavaScript library for modern SVG graphics – GitHub

Snap.svg を使った SVG のパスのモーフィングアニメーションデモ | DigiPress

SVG.js

参考：

SVG.js [Official]

svgdotjs/svg.js: The lightweight library for manipulating and animating SVG – GitHub

まとめ

参考：

SVG をアニメーションするライブラリまとめ | hifive 開発者ブログ

SVG にも対応！滑らかな動きを実現するモーションライブラリ 11選 | ferret

サンプル

参考：

もはや芸術！SVG アニメーションの巧みな活用方法20選 | CodeCampus

30 Awesome SVG Animation For Your Inspiration | Hongkiat

Top 30 Most Captivating Preloaders for Your Website | Muzli

LottieFiles – Free animation files build for Lottie, Bodymovin

SVG Animation (jjperezaguinaga) | CodePen

Planet SVG animation | CodePen

10 Creative Websites with Unusual Navigation | Muzli

Top 27 Examples of SVG Animations for Web Designers and Developers 2016 | Colorlib

Animated BG Pattern | CodePen

Full width menu & SVG animation | CodePen

Sunset/Sunrise Animation with CSS Variables | CodePen

SVG Animation – Search | CodePen

Spinning SVG Earth Globes | CodeCanyon

ツール

参考：

svgator – Animate and Export SVG