祝Qiita初投稿！
簡単なSVGアニメーションならわざわざSVGのライブラリ入れなくても実装できるぞってことで復習がてらに書いていきます。
今回はよく使うラインアニメーションに絞りました。
ラインアニメーションって何？
文字通り線に沿って実行されるアニメーションで、よくイラレやフォトショで文字をアウトライン化しておいて！なんて言われると思いますが、アウトライン化することで文字の周りにパスが生成されます。
この「パス」がラインアニメーションに置ける「ライン」となります。
よくあるアニメーションでは、文字の外側にラインが引かれて最後に色が付くみたいなアニメーションもラインアニメーションです。
ラインアニメーションで押さえておきたいCSSプロパティ
- stroke - 線の色を変更できる
- stroke-width - 線の太さを変更できる
- stroke-opacity - 線の半透明度を変更できる
- stroke-dasharray - 線を点線などに設定できる（stroke-dasharray: 表示長さ,間隔長さ）
- stroke-dashoffset - dash地点（点線の開始位置）からいくつ移動するかを設定できる
ラインアニメーションでは特にstroke-dasharrayとstroke-dashoffsetが重要になってきます。
実際にラインアニメーションを見てみる
デモ
stroke-dashoffsetの初期値は0になっており、
0から数字が増えただけstroke-dasharrayで設定した地点からラインが移動します。
といっても主にstroke-dasharrayは破線や点線を実装するために使用するのですが、
svgの長さいっぱいに表示長さと間隔長さを設定してあげてstroke-dashoffsetでSVGの長さいっぱい移動させてあげることで上のcodepenのアニメーション1のように線が描かれるようにアニメーションができます。
設定の仕方によってはアニメーション2のように出したり戻したりもできます。
よくあるラインアニメーションを作ってみる
よくあるデモ
冒頭でも紹介した文字のラインアニメーションです。
このようにSVG用のライブラリ使わなくてもTweenMaxで事足ります。
まとめ
もっと工夫すればある程度複雑なアニメーションも可能でしょうが、あまりにも実装に時間がかかったり、SVGアニメーションの量が多いならライブラリを使った方が良いと思います。
Qiitaの月間の画像アップロード容量を増やすために投稿しましたが、書いてみると意外と楽しかったです。
参考にしたサイト様
- https://triple-underscore.github.io/SVG11/painting.html#SpecifyingPaint