소개

이번, 선을 그리는 svg 애니메이션 이외로 범용성이 있는 사용법이 없을까 생각해, 클릭했을 때에 변형하는 버튼을 작성해 보았습니다!
그 수단으로 Snap.svg를 이용합니다.

완성판은 이쪽
하지만


목차

Snap.svg란?

준비편

실장편

결론

Snap.svg란?

svg를 다루는 JavaScript 라이브러리입니다. jQuery로 DOM 검색에서 크기, 색상, 애니메이션을 제어 할 수 있습니다.

준비편

Snap.svg

svg 데이터 (버튼의 이불이되는 부분)

Snap.svg 소개

공식 사이트에서 파일을 다운로드.
snap.svg-min.js를 사용합니다.
htp //s psvg. 이오/

Snap.svg-0.5.1/
├─ ***
└─ dist/
  └─ snap.svg-min.js

npm에서도 다운로드할 수 있습니다.
htps : // 기주 b. 코 m/아도베우 bpぁt후 rm/S인 p. svg

svg 데이터 작성(버튼의 이불이 되는 부분)

방석이란 빨간 베타의 부분입니다.
버튼의 애니메이션 전과 애니메이션 후의 2개의 데이터를 준비합니다!

애니메이션 전 svg 만들기

① 일러스트레이터로 구형을 작성. 이번 사이즈는 400*60으로 했습니다.
② 툴바에 있는 オブジェクト > アートボード > オブジェクト全体に合わせる 로 아트보드를 직사각형에 맞춥니다.

③Cmd+Shift+S(내보내기 형식)로 svg를 저장



④아래 사이트에서 svg 데이터 경량화
htps : // 쟈케아 r치바 ld. 기주 b. 이오/sv mg/
svg를 형성하는 d 속성을 얻고 싶기 때문에 여기에서 최적화합니다.

애니메이션 후 svg 만들기

①애니메이션 전 ①②와 같은 공정이 끝나고 있는 직사각형을 좋아하는 형태로 바꾸어 주십시오.
이때 아트보드에서 튀어나오는 편집을 하면 오브젝트가 끊어진 것 같은 표시가 되므로,
아트보드에 맞도록 편집하세요.
DEMO 버전에서는 다음과 같이 작성하고 있습니다.効果 > ワープ > でこぼこ > 垂直方向、カーブ-20%
②Cmd+Shift+S(내보내기 형식)로 svg를 저장

③svg를 에디터에서 열 때 d속성이 없는 경우에는
애니메이션 전 ④의 공정과 마찬가지로 svg를 최적화해 주세요.

실장편

준비가 끝난 곳에서 드디어 구현입니다!
HTML, SCSS, Javascript 각각 해설해 갑니다.

HTML

<div class="active-button">
  <a class="active-area" href="#">
    <span class="text">CLICK ME!<i class="fas fa-angle-right"></i></span>
    <span class="box-wrap">
      // svgデータをコピペ
      <svg class="box"　xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 400 60">
      </svg>
    </span>
  </a>
</div>

.box-wrap 의 내용은 방금전의 통상시 svg 데이터를 copipe 해, 클래스를 줍니다.
또한 버튼은 가변하고 싶기 때문에 width와 height에 100%를 지정합니다.
path 태그는 일단 여기에서 삭제됩니다. (Javascript 때 해설)

SCSS

.active-button {
  width: 400px; //ボタンの幅はここで変更できます
  margin: auto;
  @media screen and(max-width: 768px) {
    width: 300px;
  }
  .active-area {
    display: block;
    position: relative;
    color: #ffffff;
  }
  .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 100;
    width: 100%;
    text-align: center;
    i {
      display: inline-block;
      position: absolute;
      font-size: 18px;
      margin-left: 15px;
    }
  }
  .box-wrap {
    position: relative;
    width: 100%;
    display: inline-block;
  }
  .box {
    width: 100%;
    height: 100%;
    fill: #e81e25; //ボタンの背景色はfillから変更できます
    display: inline-block;
  }
}

.active-button 의 width가 버튼의 폭이 됩니다만 400 이외의 수치에서도 조정할 수 있습니다👌
확대해도 열화하지 않는 것은 svg만이군요! 고맙습니다!
다만 높이도 바뀌므로 주의해 주세요.

자바스크립트

먼저 jQuery 과 방금 다운로드한 snap.svg-min.js 를 로드하십시오.

// アニメーション前のパス
var pathFrom = 'M0 0h400v60H0z';
// アニメーション後のパス
var pathTo = 'M0,0c133.333,0,266.667,0,400,0c-6.335,19.498-6.335,40.502,0,60c-133.333,0-266.667,0-400,0C6.335,40.502,6.335,19.498,0,0';
var duration = 100; // アニメーション時間
var easing = mina.easein; // Snap.svgで定義されているイージング関数
var svg = Snap('.box'); // Snap.svgを定義
var active = $('.active-area'); // クリックされるエリアを取得
var path = svg.path(pathFrom); // svgのpathの初期値をpathFromにする

// イベント発火
active.on('mousedown touchstart',function(){
  path.animate({path: pathTo}, duration, easing);
}).on('mouseup touchend',function(){
  path.animate({path: pathFrom}, duration, easing);
});

pathFrom에는 애니메이션 전 svg의 d 속성,
pathTo에는 애니메이션 후 svg의 d 속성이 포함됩니다.
duration과 easing은 원하는대로 설정하십시오.
path 에 초기값이 되는 애니메이션 전의 패스를 정의합니다. 이것을 설정하면 HTML에서도 자동으로 d 속성이 부여됩니다.

완성판은 이쪽
하지만

결론

형만 만들면 나머지는 js로 값을 바꿀 뿐이므로 즐거움입니다!
이번에는 탄력성이 있는 버튼을 만들었습니다만, 패스의 값이나 이징 함수를 변경하면 더 푸르푸르고구냐구니가 만들 수 있을 것 같습니다.
아이디어에 따라 재미있는 것을 할 수 있는 것은 아닐까요?