BLOG

lazylinepainterをつかって簡単SVGアニメーション

| HTML / CSSJavaScript

SVGアニメーションといえばCSSのみでもいけますよね?
例えばこんな感じで( -`д-´)キリッ

<style>
#cloud {
  stroke: salmon;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  stroke-width: 2;
  -webkit-animation: cloud_line 10s linear 0s infinite;
  animation: cloud_line 10s linear 0s infinite;
}
@keyframes cloud_line {
  0% { stroke-dashoffset: 2000; }
  100% { stroke-dashoffset: 0; }
}
@-webkit-keyframes cloud_line {
  0% { stroke-dashoffset: 2000; }
  100% { stroke-dashoffset: 0; }
}
</style>

この方法でも簡単にできますが、もっと簡単にする方法もあるようですね。
それが「lazylinepainter」を使った方法です。

公式
GitHub

SVGファイルの作成、コンパイル

まずはSVGファイルを作成します。※SVGの作り方はここでは省略
SVGファイルを作成したらそのデータをコンパイルしてJSファイル変換します。
それを公式サイトできるので、そちらを開いてドラッグ!

コンパイル

コンパイルするときにいろいろと設定ができるみたいなので設定します。

設定が終わったらDownload Zipを押せば、必要なファイルが落ちてきます。

  • lazy-line-painter-1.9.6.min.js
  • index.html

この2つのファイルが落ちてきました。
htmlを覗いてみましたが、上のjsファイル以外特に読み込んでいないので
lazy-line-painter-1.9.6.min.jsを読み込むことと
htmlの中にjsが書かれているのでそれをコピー。
※このjsがさっき設定したやつの記載のようですね。
なので変更したかったらこちらをいじればいいようです。
あとはSVGを表示させたい場所にコピーすればこれでOKです。

まとめ

ちょっとしたSVGアニメーションだったら、これでやるほうが簡単かもしれませんね。
コンパイルに手間もそんなにかからないですし簡単にできますね。
実際どう動くかもコンパイルするときに微調整もできるのでわかりやすかったです。

さて皆さん、アニメーションを付けるのにちょっと使ってみてはいかがですか?
以上、髭人でした!

RECENT POSTS

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

変数のタイプを調べる、変換する 【Javascript】

VS CodeでLive Serverを使ってプレビューのリロードをしてみよう

メディアクエリでhoverが使えるデバイスかどうか

markdown-wasmというすごく高速なMarkdownパーサー

SNSシェアボタンをオリジナルで設置する

CSSでマスクする

クリッカブルマップのレスポンシブ対応ができる「image-map-resizer」が優秀らしい

我が家の植物たち

CATEGORY

POPULAR POSTS

PAGE TOP