![ブッ君](http://webookmark.net/wp-content/uploads/2021/03/6972A07B-9E1D-4B0A-8E55-2DC18C2FC432-150x150.png)
今回はSVGを利用した様々なアニメーションやクリッピングマスクの方法を説明して行くよ!!
![マー君](http://webookmark.net/wp-content/uploads/2021/03/D9A8D3D4-C551-430F-85BC-65871A31977C-150x150.png)
SVG??
![ブッ君](http://webookmark.net/wp-content/uploads/2021/03/10AD4DE2-7F91-4524-98BE-E739C73333BF-150x150.png)
SVGが何なのかは、この記事で確認して!!
![マー君](http://webookmark.net/wp-content/uploads/2021/03/D9A8D3D4-C551-430F-85BC-65871A31977C-150x150.png)
ありがとう!画像形式の1つなんだね・・・
でも、画像でアニメーション?クリッピングマスク???
いまいちイメージがわかないなぁ・・・
![ブッ君](http://webookmark.net/wp-content/uploads/2021/03/10AD4DE2-7F91-4524-98BE-E739C73333BF-150x150.png)
ふふふ・・・
SVGとCSSやJSを組み合わせて使用する事で、とても簡単にアニメーションや複雑な図形でクリッピングマスクをかけることもできるんだ!!
SVGをコードで読み解こう
![ブッ君](http://webookmark.net/wp-content/uploads/2021/03/6972A07B-9E1D-4B0A-8E55-2DC18C2FC432-150x150.png)
SVGは画像ファイルとして、○○.svgや○○.svgzとして使用する事も出来ますが、アニメーションやクリッピングマスクを行うにはSVGをコードで扱う必要があるから、その内容をしっかりと理解しよう!!
図形の形状ごとに使用される要素を理解しよう
SVGタグに使用する属性や、図形の形状で使用されるタグは形状毎に違うので、こちらでしっかりと理解しよう!
その他の要素一覧
SVGで使用する要素はこちらで確認できます。
SVGで行うクリッピングマスク
SVGで行うクリッピングマスクの基本がこちらのサイトでわかります!
CSSのclip-pathで図形を自動作成する便利なジェネレーター
SVGで行うアニメーション
![ブッ君](http://webookmark.net/wp-content/uploads/2021/03/6972A07B-9E1D-4B0A-8E55-2DC18C2FC432-150x150.png)
SVGでアニメーションを行う方法は大きく分けて3つあるよ!
SMILでアニメーションを行う
animate要素などを使用して、HTMLにアニメーションの記述を行っていく方法が詳しく説明されています!
![ブッ君](http://webookmark.net/wp-content/uploads/2021/03/6972A07B-9E1D-4B0A-8E55-2DC18C2FC432-150x150.png)
SMILはIEとEdgeにはサポートしていないことと、一度chromeに非推奨警告が出されたことがあり、今後に不安があるから、SVGのアニメーションはCSSやJSを使用した方がいいね!!
CSSでアニメーションを行う
こちらではSVGにかかわる基本的なCSSプロパティがわかりやすく説明されています!
基本的なアニメーションの方法をこちらで理解していきましょう!
こちらでは様々なアニメーションを丁寧な説明と共に紹介してくれています!かなり応用されているアニメーションもありますが、実際に自分で作成しながら学ぶと技術向上になると思います!
JSでアニメーションを行う
vivus.jsというライブラリを使用したSVGアニメーションを行う方法です。
SVGモーフィングアニメーション
JSやCSSで行うモーフィングアニメーションの作成方法です!
![ブッ君](http://webookmark.net/wp-content/uploads/2021/03/10AD4DE2-7F91-4524-98BE-E739C73333BF-150x150.png)
モーフィングとは、「図形から図形に滑らかに変形」させるアニメーションのことだよ!
SVGアニメーションの便利なジェネレーター
SVG画像をアップロードするだけで、アニメーションを自動作成してくれる、便利なジェネレーターです!
デザインソフトでSVGファイルを作成しよう
イラストレーターとフォトショップでSVGファイルを作成する方法です!
SVGファイルを作成するツール
jpgやpng画像をアップロードするだけでSVGファイルを作成することが出来るオンラインツールです!
SVGのレスポンシブ
SVGの応用。レスポンシブなど描画領域について詳しく説明されています!
コメント