その他メモ

動きが面白い【SVGのモーションアニメーション】スニペットまとめ

今回はSVGのモーションアニメーションについて参考スニペットをまとめてみました。

SVG Animation – Running (with light saber)

SVGモーションアニメで人型を動かすのは難しいので参考になります。
さらに武器(ライトセーバー等)を持たせることもできます。

IE11でも一応動作します。(手が伸びますが)

See the Pen SVG Animation – Running (with light saber) by Cyril Levallois (@CyrilLevallois) on CodePen.light

happy new year 2020

クリスマスのネオンのようなキレイなSVGアニメーションです。

【anime.jsが使われています。】
IE11ではテキストアニメーションのみ動きます。

See the Pen happy new year 2020 by Swarup Kumar Kuila (@uiswarup) on CodePen.light

404 error page

404エラーページ風SVGアニメーション。
イラストの質感や、ライトの動き、真ん中の0のアニメーションが面白いです。

【anime.jsが使われています。】
IE11では細かいアニメーションは動きません。

See the Pen 404 error page by Swarup Kumar Kuila (@uiswarup) on CodePen.light

#1 – Coffee Machine – SVG animation with CSS3

コーヒーメーカーのキャラクターのようなSVGアニメーション。
細かい動きまで表現されていて面白いですね。

CSSでアニメーションが実装されています。
IE11でも一応動きます。(コーヒーが入るところが動かない)

See the Pen #1 – Coffee Machine – SVG animation with CSS3 by Jonathan Silva (@jonathansilva) on CodePen.light

#codevember 2016 – 01 – SVG Animation

CSSで実装されたSVGアニメーション。
イラストからアイデアまでお洒落です。

IE11では動きません。

See the Pen #codevember 2016 – 01 – SVG Animation by Robin Delaporte (@robin-dela) on CodePen.light

City Intro Card SVG animation – Dribbble inspired

動きは大きくないですが、雲の箇所にSVGアニメーションが効果的に使われています。実際にアプリとかでありそうですね!

【jQueryが使われています。】IE11では動きません。

See the Pen City Intro Card SVG animation – Dribbble inspired by Fox (@wintr) on CodePen.light

SVG Animation with Scale, Rotation and Draggable

メインビジュアルとかでも使えそうなクオリティです。
ドラッグで動かすこともできます。

【TweenMax、Draggable.js、その他プラグインが使われています。】
IE11でも動きます。

See the Pen SVG Animation with Scale, Rotation and Draggable by Paulo Magalhães (@magalhaespaulo) on CodePen.light

Random SASS function on SVG Animation

CSS(SASS)で実装されたSVGアニメーションです。
オシャレなイラストに加えて要所のSVGアニメーションが良いですね。

IE11では動きません。

See the Pen Random SASS function on SVG Animation by Daniel Gonzalez (@dan10gc) on CodePen.light

Bow and Arrow SVG Animation with GSAP

ほんとの弓矢のような動きがいいSVGアニメーションです。

【jQuery、TweenMaxが使われています。】IE11でも動きます。

See the Pen Bow and Arrow SVG Animation with GSAP by Pete Barr (@petebarr) on CodePen.light

Code School – SVG Animation

SVGのライン描写からアニメーションがある点が参考になりますね。

【jQueryが使われています。】IE11では動きません。

See the Pen Code School – SVG Animation by Jordan Wade (@jordanwade) on CodePen.light

最後に(SVGアニメーションデモ)

自分でも、練習のためSVGのパスを使用したアニメーションを作成してみました。

SVGのパスに沿ってアニメーションします。プラグインに【anime.js】を使用しています。IE11でも動きます。

素材は unDraw から。