소개

프런트 엔드 엔지니어입니다.
SVG 이미지에 「보이지 않는 펜」으로 한다~라고 쓴 것 같은 애니메이션을 붙일 수 있는 Vivus.js 를 사용해 보았습니다.

＊공식＊
ㅡㅡㅡㅜㅜㅜㅜㅜㅜㅜ 기주 b. 이오/ゔぃゔs/

＊Github＊
htps : // 기주 b. 코 m/마x우우와/ゔぃゔs/

＊Vivus Instant＊
ㅡㅡㅡㅜㅜㅜㅜㅜㅜㅜ 기주 b. 이오/ゔぃゔs-인 s단 t/

구현 방법

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 로드 및 애니메이션 옵션을 설정합니다.
공식적으로 옵션 목록이 있습니다.
htps : // 기주 b. 코 m / 마 x ぇ ぃ와 / ゔ ゔ s # ゔ ゔ sjs

<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 (@ Yuzuki Sakioka ) on CodePen .

요약

이번은 간단한 샘플이었지만, 옵션도 많이 있어, 궁리에 따라서 손쉽게 멋진 애니메이션을 할 수 있는 것 같습니다.

먼저 꼭 만져보세요

디자이너 씨에게 애니메이션을 만들지 않아도, 이런 일도 할 수 있어요라고 제안할 수 있는 엔지니어가 되고 싶다고 생각합니다.