Vivus.js で「見えないペン」アニメーションを付けてみる

はじめに

フロントエンドエンジニアをしています。
SVG画像に「見えないペン」でするする～と書いたようなアニメーションを付けられる Vivus.js を使ってみました。

＊公式＊
https://maxwellito.github.io/vivus/

＊Github＊
https://github.com/maxwellito/vivus/

＊Vivus Instant＊
https://maxwellito.github.io/vivus-instant/

実装方法

1. SVG画像の用意

イラレでSVG画像を作りました
テキストデータはアウトライン化します。

2. htmlの用意

htmlに、SVGのコードをいれます。
SVGにidを設定。

<svg id="my-svg">
  <path...>
  <path...>
  <path...>
</svg>

3. CSS設定

今回は簡単に色を変えたりしているだけです。

<style type="text/css">
  .st0 {
    fill: none;
    stroke: #00f4ff;
  }
# ↑fill は塗りつぶし。noneにしておく。stroke は線の色を指定しています。
  path {
    fill-opacity: 0;
    transition: fill-opacity 1s;
  }
# ↑pathの透明度を0にしておく。
  .fill path {
    fill: #ff94df;
    fill-opacity: 1;
    stroke: none;
  }
# ↑.fillがついたら、色をピンクに、pathの透明度を1に
</style>

4. アニメーション設定

vivus.jsの読み込みと、アニメーションのオプションを設定します。
公式にオプションのリストがあります。
https://github.com/maxwellito/vivus#vivusjs

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.2/vivus.js"></script>
<script>
  new Vivus('my-svg', # ここにはSVGに設定したidを入れる
    {
      duration: 120 , # アニメーションの時間
      start: 'autostart', # アニメーションの自動再生
      pathTimingFunction: Vivus.EASE_OUT # アニメーションのタイプ
    },
    function(obj){
      obj.el.classList.add('fill'); # アニメーション後、'fill'クラスを付与してアニメーションを実行
    }
  );
</script>

実装結果

See the Pen mzQdYR by Yuzuki (@yuzukisakioka) on CodePen.

まとめ

今回は簡単なサンプルでしたが、オプションもたくさんあり、工夫次第でお手軽に素敵なアニメーションができるようです。
まずはぜひ触ってみてください
デザイナーさんにアニメーションを作ってもらわなくても、こんなこともできますよと提案できるようなエンジニアになりたいなーと思います。