アニメーションの使い方

参考:

SVG でアニメーション 中編 | YUIDEA WEB

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

アニメーション | defghi1977

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

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

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

A Guide to SVG Animations (SMIL) | CSS-Tricks

SVG Animation | Ryan Brownhill

導入

参考:

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

SVG を動かす css アニメーション / クリッピングマスク / 波 / 線を描く | WEB 制作会社 BRISK

概要

参考:

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

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

Three Ways to Animate SVG | CSS-Tricks

ドキュメント

参考:

アニメーション | SVG 1.1 第2版 (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 第2版 (triple-underscore.github.io)

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

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

Animation function timing | SMIL Animation (W3C)

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

色を変化させる

参考:

SVG Animation, fill (塗り) 色 (color) 遷移を 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 を使ったモーションパスアニメーションの実装方法 | 東京上野の Web 制作会社 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 (the easy way and the hard way) | 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 を使用したアニメーション | 佐藤純平 Jumpei Sato

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 で手書きアニメーションさせてみた | 東京上野の Web 制作会社 LIG

Animating SVG Filters applied to HTML elements | Code and Stuff (satreth)

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 をやってみた | WEB制作事務所 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 (yuBdq) by 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 – CodePen Search

Spinning SVG Earth Globes | CodeCanyon

ツール

参考:

svgator – Animate and Export SVG

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です