Snap.svg에서 간단한 애니메이션

15101 단어 Snap.svg자바스크립트SVGCSS3
SVG 애니메이션을하기 위해 Sanp.svg를 사용해 보았습니다.

Sanp.svg란?



Adobe가 오픈 소스로 제공하는 JavaScript 라이브러리
htp //s psvg. 이오/

도입·구성


npm install 가능하지만 이번에는 다운로드하여 js를 같은 디렉토리에 배치
├── sample.html
├── sample.svg
└── snap.svg.js
npm install 하고 싶은 사람은 이하를 참고로
htps : // 기주 b. 코 m/아도베우 bpぁt후 rm/S인 p. svg

사용해보기



이번에는 크기 변경, 회전, CSS 애니메이션을 실시해 봅니다.

sample.html
<!DOCTYPE html>
<html>
<head>
  <title>SVG Sample</title>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
  <script src="snap.svg.js"></script>
  <style type="text/css">
  .svg_anime {
    animation: spin 1s linear 0s 1 normal, reverse;
    transform-origin: 50% 50%;
  }
  @keyframes spin {
    from { transform: rotateX(0deg); }
    to   { transform: rotateX(720deg); }
  }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    var s = Snap("#svgArea");
    var g = s.group();
    Snap.load("sample.svg", function(loadedFragment) {
      g.append(loadedFragment);
    });

    $("#btnAnimation").click(function() {
      var bbox;

      var item01 = Snap.select("#item01");
      bbox = item01.getBBox();
      item01.transform('s1.0,1.0');
      item01.animate({transform: 's1.5,1.5,' + bbox.cx + ',' + bbox.cy}, 1000, mina.bounce);

      var item02 = Snap.select("#item02");
      bbox = item02.getBBox();
      item02.transform('r0,' + bbox.cx + ',' + bbox.cy);
      item02.animate({transform: 'r1080,' + bbox.cx + ',' + bbox.cy}, 1000, mina.linear);

      var item03 = Snap.select("#item03");
      var item03Clone = item03.clone(true);
      item03.before( item03Clone ).remove();
      item03Clone.attr({ id: "item03" });
      item03Clone.addClass("svg_anime");
    });
  });
  </script>
</head>
<body>
<div style="width: 600px;">
  <svg id="svgArea" width="100%" viewBox="0 0 400 200" preserveAspectRatio="xMaxYMax"></svg>
</div>
<input type="button" id="btnAnimation" value="Start">
</body>
</html>

sample.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   version="1.1"
   id="svgSample"
   viewBox="0 0 400 200"
   height="200"
   width="400"
   sodipodi:docname="sample.svg">
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     id="view" />
  <rect
     id="item01"
     style="opacity:1;fill:#ff0000;fill-opacity:1;stroke:#990000;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     width="90"
     height="90"
     x="32"
     y="50"
     ry="0" />
  <path
     id="item02"
     style="opacity:1;fill:#00ff00;fill-opacity:1;stroke:#009900;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     d="m 200,50 22,45 22,45 -45,0 -45,0 22,-45 z" />
  <circle
     id="item03"
     style="opacity:1;fill:#0000ff;fill-opacity:1;stroke:#000099;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     cx="322"
     cy="94"
     r="45" />
</svg>



설명



사각형, 삼각형, 원형의 세 객체를 SVG로 만들고 각각 item01, item02, item03 및 ID를 부여합니다.
SVG는 무료 소프트웨어로 만들면 Inkscape를 추천합니다
htps : // / ks ぺ. 오 rg / 그럼 /

SVG 파일 로드
대상 SVG 로드
    var s = Snap("#svgArea");
    var g = s.group();
    Snap.load("sample.svg", function(loadedFragment) {
      g.append(loadedFragment);
    });

<div style="width: 600px;">
  <svg id="svgArea" width="100%" viewBox="0 0 400 200" preserveAspectRatio="xMaxYMax"></svg>
</div>
svg 태그의 viewBox 에는 svg의 원 사이즈를 지정, 이것을 변경하는 것으로 트림해 표시할 수 있다
부모의 사이즈에 맞추어 width 이나 height 를 % 지정해, preserveAspectRatio
애니메이션
item01과 item02는 transform와 easing를 변경하고 있기 때문에 item01에 대한 설명
      var item01 = Snap.select("#item01");
      bbox = item01.getBBox();
      item01.transform('s1.0,1.0');
      item01.animate({transform: 's1.5,1.5,' + bbox.cx + ',' + bbox.cy}, 1000, mina.bounce);
Snap.select() 에서 대상의 요소를 취득, 이번은 ID로 취득하고 있지만 CSS 셀렉터로 지정할 수 있다select() 그렇다면 하나만 얻을 수 있기 때문에, 복수 취득하는 경우는 selectAll() 를 사용한다getBBox() 는 대상 엘리먼트의 위치나 사이즈의 정보를 취득할 수 있다.transform 는 2회째에 클릭했을 때의 초기화용, 애니메이션 개시시의 상태를 기술하면 되지만 1회 밖에 애니메이션 한다면 불필요cx 는 다음의 4개의 파라미터를 지정한다
  • 애니메이션 후 상태 : transform, 색상, 경로 등을 지정
  • 애니메이션 시간 : 밀리 초로 지정
  • easing(선택사항): 시작은 천천히 서서히 빨라지거나, 자작도 할 수 있지만 mina라는 함수가 준비되어 있으므로 기본적으로는 이 중에서 지정한다(htp //s psvg. 이오/도 cs/#모두)
  • 애니메이션 완료 후의 콜백 함수 (선택 사항) : 연속적으로 애니메이션하는 경우 등에 사용

    • 이어 item03의 CSS 애니메이션 설명
      .svg_anime {
    animation: spin 1s linear 0s 1 normal, reverse;
    transform-origin: 50% 50%;
  }
  @keyframes spin {
    from { transform: rotateX(0deg); }
    to   { transform: rotateX(720deg); }
  }

          var item03 = Snap.select("#item03");
      var item03Clone = item03.clone(true);
      item03.before( item03Clone ).remove();
      item03Clone.attr({ id: "item03" });
      item03Clone.addClass("svg_anime");

    사전에 css로 애니메이션을 준비해 두고, 그 스타일 클래스를 설정해 주는 것으로 애니메이션 시키고 있다
    샘플에서는 다소 어려운 일을 하고 있지만, 기본적으로는 cy 로 애니메이션 설정을 하고 있는 스타일 클래스를 추가해 주면 좋다
    왜 까다로운 일을 하고 있는가 하면, 2번째 이후에 클릭했을 때에 애니메이션을 초기화하기 위해, 단순하게 transform() 를 해, 다시 animate() 없기 때문에, 일단 엘리먼트를 삭제해 새롭게 재작성하고 있다 (이것은 Snap.svg에 한정하지 않고, css로 애니메이션 시키면 이렇게 될 것)

    결론



    정말 간단하게 만져 보았던 것만으로 전체의 기능으로서는 어떤 일을 할 수 있을까? 라는 곳까지는 보이지 않는다.
    단지 애니메이션은 센스나, 아이디어 나름으로, 간단한 동작의 조합이라도 나름대로 된다고 생각하기 때문에, 우선은 만져 보는 것도 있다고 생각한다
    그 중에서 자신이 필요한 기능이 있으면 깊이 조사하면 좋기 때문에, 이번에는 일단 만져 보는 곳까지
    IE11에서 SVG로 지정한 크기에서 튀어 나온 요소가 표시됩니다.
    SVG로 원을 애니메이션하고 싶을 때의 MEMO

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage