今回は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 から。
