こんにちは。圧縮おにぎりです。
突然ですが、今日はSVGアニメーションなるものを作ってみました。
そもそもSVGってなに！？というお話になってくると思うのですが、
SVGファイルは画像の形式のひとつで、線や塗りの情報をドットではなくコードで書いています。
そのため、メモ帳などでSVGファイルを開いてみると、なんと文字化けではなくSVG画像の情報を記録したコードが出てくるのです。慣れていない人にはほぼ文字化けに見えるのが悲しいところですけれども……。
そして、今回実装するのは横手市のロゴを描画するアニメーションです。
線を描いて塗りがふわっと浮かび上がる感じのアニメーションです。
※ブログとの表示の相性の関係で、本編よりも表示速度をだいぶ遅めに指定しています。
※見逃した方はリロードしてください。
横手市のロゴの元画像は市のホームページからお借りしました。
「元画像」とあるように、市のウェブサイトにある画像そのままではなく、
SVGファイルで使えるようにトレスして使いました。
べクタ形式とかラスタ形式とか、そういう解説が必要になってくるのですが、
40代以下の方は確実に情報の授業で違いを習ったかと思われますので省略します。
ちなみにSVGファイルはベクタ形式です。
で、肝心の作り方です。
スマホだとだいぶ厳しいので、パソコンで作成することをお勧めします。
1.使いたい画像をSVGにします。
使用ソフトはAffinityです。昨年の大型アップデートで無料ソフトになりました。
このAffinityを使って横手市のロゴをいい感じにトレスします。
どう描画したかの痕跡がほしいので、画像トレース機能などは使いません。
なんか画像が暗いですがそのままいきましょう。
（以降、全体的に画像がなんか暗いです。申し訳ない）
SVGはレイヤーごとにコードを生成しますが、一番下のレイヤーから順にコードを生成していく（記述が最初の方になる）ので、順番に注意してください。
めちゃめちゃ見づらいですが、1～3のレイヤーは線、4～6のレイヤーは塗りにしました。
これをSVG形式でエクスポートして完成です。
2.SVGコードをエディタに貼る
Visual Studio Codeという無料のコードエディタを使いますが、
まずはメモ帳を開き、SVGコードを表示します。
文字化けじゃないんです。信じてください。
で、このコードの中から、<path …/>と書かれているコードを全部探して、上から1個ずつコピーして、Visual Studio Codeに貼ります。
※このコードエディタ上にすでにHTMLの基本的な記述があることが前提です。
<body>と</body>の間の任意の箇所に貼りましょう。
で、こう！
（※記述の都合上、このあたりからidの値を少しだけ改変しております。ご了承ください）
長くて見づらいですねえ！！
<svg>と</svg>の間に先ほどのpathを貼っていくのです。
混乱しないように、コメントアウトと呼ばれる表示に影響のないコードを入れて線と塗りを分けていることをメモしておきます。
3.CSSを作る
最近のCSSって、昔はJavaScriptじゃないとできなかったようなこともやってくれるんですよ。
で、このCSSもVisual Studio Codeに書いていきます。
CSSにも書く場所にはルールが存在するので、そこは遵守しましょう。
<head>と</head>の間に書かれた<style>と</style>の間に書きます。もうマトリョーシカですね。
こんな感じで書きました。
言いたいことは
「長さ4000の線（1～3枚目のレイヤー）を1秒かけてなめらかに出現させて、描画開始から1秒たった時に塗り（4～6枚目のレイヤー）が1秒かけてふわっと浮かび上がる」（早口）
を
アニメーションのキーフレームを使用して実行する
です。
書き方は少し違いますが、こちらもコメントアウトで線と塗りがごちゃごちゃにならないようにメモしておきます。
4.保存して確認する
完成！！
ここでは書きませんが、厳密な線の長さを指定したいときはJavaScriptという言語を使用します。
が、趣味の領域でそこまで緻密なSVGアニメーションを求められる機会ってそうそうあるかな……というのが正直な感想ではあります……
5.よくある失敗
なんか上手くいかないな……となったときは、ちゃんとpathの数が合っているか、<>や;や/が欠けていないか、スペルを間違えていないか、変なスペースがないかなどを確認してみてください。
このへんは 本当に よくある ミスです。
WEBの海に放流するときはローカルで擦り切れるほど確認してから放流しましょう。
HTMLとかCSSとか意味が分からんな……と思われた方もだいぶいらっしゃるかと思いますが、プログラミング言語ではめっちゃ簡単な部類に入るので、こういった簡単なアニメーションに興味を持った方は学習してみるのもいいかもしれません。興味から学び始める分野は強いですよ。
JavaScriptは……知らない子ですね……そのうち勉強します……。
というわけでお疲れさまでした！
