개요

개인 포트폴리오 사이트 을 만들고 있는 가운데, 뭔가 샤레오트한 움직임을 넣고 싶다-라고 생각 얼른 조사해 보았더니, SVG 패스를 움직일 수 있다 Snap.svg 시도했습니다.

Snap.svg란?

jQuery 라이크에서의 SVG 내의 패스 지정이 가능해, 사이즈나 색, 나아가 애니메이션까지 설정할 수가 있는 라이브러리입니다.

비슷한 svg 조작 라이브러리

Raphaël.jsSnap.svg 와 같은 제작자의 라이브러리입니다. Snap.svg 의 전신과 같은 것이므로, 지금부터 배우는 것이라면 Snap.svg 로 좋다고 생각합니다.

SVG.js
이쪽도 jQuery 라이크의 SVG 조작이 가능합니다. 이곳은 'The lightweight library for manipulating and animating SVG.

BonsaiJS
여기는 키프레임 애니메이션을 설정할 수 있는 라이브러리입니다. 또, 필터 처리나 모핑도 가능하다는 것입니다.

사용법

완성 예

이번에는 매우 간단한 다음과 같은 애니메이션을 실현해 보겠습니다.


SVG 파일은 이런 느낌입니다.

logo.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" viewBox="0 0 184.3 184.3" style="enable-background:new 0 0 184.3 184.3;" xml:space="preserve">
<g id="all">
    <g id="back">
        <polygon id="box" points="4.9,44.8 4.9,140.8 93.3,182 179.8,139 179.8,44.8 92.4,2.3         "/>
    </g>
    <g id="front">
        <g id="colors">
            <polygon id="blue" points="10.9,52.4 10.6,90.9 10.9,136.1 9.4,137 89.9,173.9 89.9,90.9          "/>
            <polygon id="green" points="174.7,50.6 95.7,90.6 95.1,90.2 94.9,90.9 94.9,173.9 174.7,135.9 174.9,90.9          "/>
            <polygon id="red" points="169.5,45.9 92.4,8.5 15.1,45.9 10.9,45.9 92.4,85.1 173.7,45.9          "/>
        </g>
    </g>
    <g id="frames">
        <path id="frame" d="M92.4,2.3L4.9,44.8v96L93.3,182l86.5-43V44.8L92.4,2.3z M53.9,157v-27.4l-5-3.1v28.2l-38-17.7V52.5l38,18.5
            v24.4l5,2.9V73.4l36,17.5v24.4l-18.8,7.4L89.9,142v31.7L53.9,157z M92.4,85.2L14.2,47L92.4,9l78,38l-18.2,8.9h-42l9.9,15.8
            L92.4,85.2z M139.9,152v-26.3l-5.5,3.7l0.4,25.1l-39,19V90.9l78-39.4v45.7l-23.5,12.1l23.5,14.2v12L139.9,152z"/>
        <polygon id="red_box_under" points="47.5,57.3 69.9,68.2 91.4,57.3 69.4,46.8         "/>
        <polygon id="red_box_over" points="91.5,35.8 113.9,46.8 135.4,35.8 113.4,25.3       "/>
        <polygon id="green_box_over" points="131.1,111.4 153.3,100.1 152.5,76.4 130.9,87.6      "/>
    </g>
</g>
</svg>

절차

다운로드

공식 에서 최신 Zip 를 다운로드합니다.

로딩

snap.svg-min.js 파일을 읽습니다.



index.html

・・・
<script type="text/javascript" src="snap.svg-min.js"></script>
・・・

흘리는 태그를 준비

다음 svg 태그에 삽입합니다.

index.html

・・・
<script type="text/javascript" src="snap.svg-min.js"></script>
・・・
<div>
  <img>
    <svg id="target"></svg>
  </img>
</div>
・・・

JavaScript 구현

결국 이런 느낌

animate.js

jQuery(document)
    .ready(
        function() 
        {
            var snap = Snap("#target"); //流し込み対象のDOMを取得
            var grop = snap.group(); //Groupの作成

            Snap.load("logo.svg", function(data) //SVGファイルを読み込んでコールバック関数で処理
                      {
              grop.append(data); //データをDOMに追加

              var all = Snap.select("#all"); //一番外側のグループを取得
              var allBbox = all.getBBox(); //描画領域の短形範囲を取得
              var box = Snap.select("#box"); //最初に表示する黒背景の6角形パスを取得(途中で縮小)
              var frames = Snap.select("#frames"); //後から表示する黒枠フレームのパスを取得(途中で拡大)
              var red = Snap.select("#red"); //赤エリアのパスを取得(途中で拡大)
              var blue = Snap.select("#blue"); //青エリアのパスを取得(途中で拡大)
              var green = Snap.select("#green"); //緑エリアのパスを取得(途中で拡大)

              box.transform("s0"); //初期非表示化
              frames.transform("s0"); //初期非表示化
              red.transform("s0"); //初期非表示化
              blue.transform("s0"); //初期非表示化
              green.transform("s0"); //初期非表示化

              var redFunc = function() //赤エリアのパスのアニメーション定義
              {
                red.animate({
                  transform: 's1',
                  fill: "#FF0000"
                }, 3000, mina.bounce)
              };

              var blueFunc = function() //青エリアのパスのアニメーション定義
              {
                blue.animate({
                  transform: 's1',
                  fill: "#0000FF"
                }, 3000, mina.bounce)
              };

              var greenFunc = function() //緑エリアのパスのアニメーション定義
              {
                green.animate({
                  transform: 's1',
                  fill: "#39B44A"
                }, 3000, mina.bounce)
              };

              var colorsFunc = function() //赤,青,緑エリアのパスのアニメーションの順番定義
              {
                redFunc();
                setTimeout(function() {
                  blueFunc();
                  setTimeout(function() {
                    greenFunc();
                  }, 500);
                }, 500);
              }

              var boxFunc = function() //全体的なアニメーションの順番定義
              {
                box.animate({　
                  transform: 's1'　
                }, 2000, mina.bounce, function() {
                  colorsFunc();
                  frames.transform("s1");
                })
              };

              boxFunc(); //実行
            }
       });
    );

모르는 것

animate 함수의 제 1 인수의 transform 에 지정하는 값의 룰이 지금부터 이해되어 있지 않다.

더 역동적으로 움직이는 방법

패스의 모핑 할 수 있을까?

이 근처는 또 기회가 있으면 다른 기사에서 정리하려고 생각합니다!