noseblog

menu

2019.6.23

SVGでアニメーションを作成する

こんにちは、のせです。

今回はSVGでアニメーションを作成する方法を解説します。

作成するアニメーションはこんな感じのものです。

よく見たことのあるアニメーションですよね。

手順はこの通りです。

  • Illustratorでsvgファイルを作る
  • svgファイルをhtmlにコピペ
  • cssでアニメーションを定義

では詳しく見ていきましょう

Illustratorでsvgファイルを作る

こんな感じで文字ツールを使ってカンバスに好きな文字を書いていきます。

レイヤーの名前は”sample”にしておきます。

次にプロパティから「アウトラインを作成」をします。

これをアセット書き出しでsvgファイルで書き出します。

これで準備は完了です。

svgファイルをhtmlにコピペ

作成したsvgファイルをエディタで開いてみましょう。するとこんな感じのコードが書いてあると思います。

これをまるっとhtmlファイルにコピペします。

一度htmlファイルをwebサイトに読み込ませるとこのような表示になっていることがわかります。

次にcssを定義してアニメーションを付け加えていきましょう。

cssでアニメーションを定義

以下のcssを記述してください

このcssを記述し、webサイトにこのようなアニメーションが起動すれば成功です。

cssを簡単に説明します。主にこの4つのcssの値をいじりながらアニメーション作っていきます。

パラメーターの種類 用途
stroke-width 縁の太さを指定する
stroke 縁の色を指定する
stroke-dasharray 縁の間隔(速さ)を指定する
animation 使用するアニメーションの指定、アニメーション時間、エフェクトの指定

 

また、@keyframes actionでアニメーションを詳細に定義しています。

0%や100%とありますが、これはアニメーションの初め(0%)を終わり(100%)を示しています。

これを応用して、アニメーションが半分(50%)進んだところで縁の速さを徐々に遅くし、80%のところで一気に速くするcssはこんな感じでかけます。また、色は80%までは透明にします。

このアニメーションはこちらになります。

パラメーターはいろいろ自分で調節しながら感覚を掴んでいくと良いと思います。

今回は以上になります。