inkscapeで書いたSVGをアニメーション 文字のアウトライン・ボールが弾むアニメーション

inkscapeで書いたSVGをアニメーション 文字のアウトライン・ボールが弾むアニメーション

こんにちは!

この記事は、inkscapeで書いたSVGを使って、CSSでアニメーションを付けた記録です

HTML5 では svg 要素を HTML の中に直接記述(コードをインラインで記述)することができるので、それを利用してアニメーションをつけています。

この記事はこんな方にお勧め
  • svgを初めて触る
  • svgを動かしてみたい

  

この記事から得られること
  • 簡単なsvgアニメーション
  • ラインに沿ったsvgアニメーション

作ったものは以下↓

スマホの方は、Resultを押してみてね。

 

弾むアニメーション↓

 

 

文字のラインに沿ってアニメーション↓

 

 

 

広告

弾むボールのアニメーション

まずはボールのアニメーションから。

inkscapeで絵をかいてsvgファイルで保存する

inkscapeで絵をかきます。

弾むボールを書きます。ボールというか、泡を書いちゃいました( ^ω^)・・・

inkscapeでボールを書く

 

このオブジェクトを動かすので、svgのファイル形式で保存をします。

 

コードをHTMLに貼り付ける

自分のエディタで保存したsvgファイルを開きます。

※下記はVScodeで開いた画像です。

 

エディタで開く

 

開くと、svgのコードが出来上がっているので、2行目<svg ~からコピーをします。

少しコードを減らせるのですが、ここでは割愛します。

今度詳しく勉強して記事にしたいと思います。

 

コピーしたものを、HTMLのbodyの表示したい所に貼り付けます。

※サンプル画像では、<div class =”bubble”>の下に貼り付けました。

 

これで表示されました。

  

CSSで弾むアニメーションをつける

次に、svgにCSSでアニメーションをつけていきます。

作成されたsvgコードを見ると

10行目に id=”svg8″ とありますので、このidを使用してCSSを設定します。

ちなみにクロームのデベロッパーツール(F12)ではこんな感じで探せます。

 

 

CSS全体↓

  

id=”svg8″ にキーフレームのアニメーションを設定して、動かしました。

キーフレームについてはこちらの記事でも記載があるのでご参考までに。

書いたイラストが動いてうれしい・・・!!

 


文字のラインに沿ってアニメーションする

次はよく見る文字のラインアニメーションです。

こちらはちょっと躓きました・・・・( ;∀;)

inkscapeでかいてsvgファイルで保存する

まずはinkscapeでテキスト入力して書きます。

その後、テキストのオブジェクトを選択した状態で、パスメニュ⇒「オブジェクトをパスへ」をクリックします。

 

 

これでオブジェクトをパスにできました。

 

次に、バラバラのパスをまとめます。

左のノードツールをクリックして、Shift + クリックで文字のパスを全部選択(複数選択)した状態にします。

その状態で、パスメニュー⇒「パスの結合」をします。

 

 

次にパスにid名を設定します。(CSS操作を分かりやすくするため)

パスを選択した状態で、右クリックすると、「オブジェクトのプロパティ」がありますので、クリックします。

すると、右にID~と枠が出てきます。

ここで任意のID名を入力し、設定ボタンを押すと、パスにIDを設定できます。

※サンプルではpath_tとしました。

 

 

この状態で保存します。(svgファイル)

 

コードをHTMLに貼り付ける

さて、ボールと同じように、自分のエディタで先ほど保存したsvgファイルを開きます。

2行目の<svg~からコピーして、HTMLのbody部分、表示させたい所に貼り付けます。

ブラウザで表示させると・・・・表示されました!

CSSでアウトラインをアニメーションする

CSS全体↓

  

ここでは、先ほどパスにidを設定したので、そのidを使用していきます。

#path_tと名前を付けたので、キーフレームでアニメーションを付けます。

今回参考にさせていただいた記事は、こちら↓

https://www.design-memo.com/coding/svg-stroke-animation

stroke-dasharrayプロパティとstroke-dashoffsetプロパティ(10,11行目)を使って、文字のアウトラインにアニメーションを付けます。

stroke-dasharrayプロパティとstroke-dashoffsetプロパティって?

stroke-dasharray・・・線のパターンや間隔の指定
stroke-dashoffset・・・線の開始位置を指定する

 

ここが躓いた( ^ω^)・・・よくわからなかった(;’∀’)

stroke-dasharray属性は、 輪郭を描くために使用される、破線や間隔のある線のパターンを定義するプレゼンテーション属性です。

引用元:MDN web Docs https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/stroke-dasharray

 これはなんとなくわかりますね。

stroke-dashoffset属性は、関連する破線をレンダリングするうえで、オフセットを定義するプレゼンテーション属性です。

引用元:MDN web Docs https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/stroke-dashoffset

これが難しかった。

stroke-dashoffsetは線の開始位置を指定できるのね。
もとのパスの位置から指定した数値分、位置が移動してる。
もとのパスの位置からズレた分は見えなくなってる!

分かりにくいのでサンプルはこちらです↓

 点線(.lineクラス) は指定した数値で点線になっています

 

 点の開始位置(.line_d) で点線の間隔を300にしてみました。(これを基本として開始位置をずらしてみます。)

 点の開始位置1(.line1クラス) は点線の間隔を広げて、点の開始位置を300ずらしてみました。右側にありますね

 点の開始位置2(.line2クラス) は、点の開始位置を100にずらしてみました。今度は左にあります

 点線を動かす(.line3クラス) を見ると、間隔を広げて、点の開始位置をずらし、アニメーションでstroke-dashoffsetの位置を指定しています。

すると、動いてるように見えますね・・・・!

これを先ほどの文字に当てはめてみます。

文字のアニメーションCSSにstroke-dasharray、stroke-dashoffsetをつける

文字のCSSに戻ります。

 

 

先ほどの内容を考慮してみてみると、stroke-dasharraystroke-dashoffsetがついてアニメーションしていますね。

 

注意
ここで注意なのが、文字のアウトラインのパスの長さより、stroke-dasharraystroke-dashoffset)の長さを長くしないと、うまく動いて見えません。

これで完成です!

自分で書いた絵が動くって、楽しいですね・・・!!

引き続き、svg、CSS、Javascriptなど勉強していきたいと思います。

 

ここまで読んで下さり、ありがとうございます。

記事の修正等ありましたら、お問い合わせよりお願いします。

<あわせて読みたい>