SVG 애니메이션을 학습하여 GitHub 프로필 강화

TLDR: I created an animated SVG for my GitHub profile, check it out here.

따라서 이 모든 것은 GitHub에서 발표한 기능으로 당신의 개인 자료에 자술을 추가하여 당신이 하고 있는/하고 있는 모든 할 수 없는 일을 보여 줍니다.봐라, 사람들은 GIF를 그들의 개인 자료에 추가할 수 있다는 것을 발견했다.🥳
하지만 GIF는 2010년의 일이고 SVG는 새로운💩. 단 한 가지 문제가 있습니다. 저는 SVG에 대해 아무것도 모릅니다.내 말은, 그래, 나는 그것으로 아이콘과 삽화를 만들었다.때때로 일부 실용 프로그램에서 하나를 만들어서 페이지에 캡처합니다.그러나 나는 어떻게 처음부터 애니메이션을 만들고 애니메이션을 추가하는지 깊이 연구한 적이 없다.
더 좋은 일이 없어서 구글에서 검색을 시작했는데 놀랍게도 MDN이 SVG 요소에 대해 상세하게 설명documentation하였다.기본 모양을 추가하는 것이 매우 간단하다는 사실이 증명되었다.rect, circle, polygon, line, polyline, path 등의 태그가 있습니다. 그리고 간단하게 CSS를 작성하여 애니메이션을 설정합니다.
깔끔했어👍
그래서 지금 나는 화면에서 로고를 이동해서 베이비붐 세대들이 몇 시간 동안 볼 수 있도록 할 수 있다.💪

근데 주제에서 벗어났어요.설정 SVG 애니메이션으로 돌아갑니다.위에서 언급한 형상은 창조적인 사람으로 하여금 진정으로 멋진 삽화를 생각하게 할 수 있을 것이다.그러나 나는 창조력이 상당히 제한되어 있어서 이동파를 하기로 결정했다.나의 창조력 부족을 보완하기 위해 나는 또 다른 d라는 라벨을 배웠다. 이것은 내가 이 물결을 창조하는 데 도움을 줄 것이다.🌊

생각🤓

이 생각은 매우 간단하다.여러 개의 이동된 파를 만들어서 각각 다른 속도로 통과시킵니다.투명도는 물결이 교차하는 영역을 더욱 어둡게 하기 때문에 색상에 여러 가지 그림자가 있습니다.
현수막의 크기에 대해 나는 1440 x 320을 선택했다. 왜냐하면 나는 종횡비례를 좋아하기 때문이다.그것은 그다지 크지 않지만, 상하문을 추가하기에는 충분하다.GitHub에서 작은 영역에 나타날 수 있다는 것을 감안하면 내가 추가하고 싶은 다른 내용에 사용할 공간이 충분하다고 확신할 수 있다.

<경로/>

그래서 나는 어떻게 경로를 만드는지 배우기 시작했다.이것은 매우 간단하다.경로 태그에는 M 속성이 있습니다.이것은 결코 어렵지 않다😉. 6가지 종류의 명령이 있습니다.

이동

~

Bézier 커브 3회

2차 베지어 곡선

타원 호 커브

닫힌 경로

우리는 단지 앞의 세 가지만 공부할 수 있다.각 명령은 다음 속성과 함께 알파벳으로 표시됩니다.
점(x-y 좌표).

MoveTo 명령은 문자m 또는 M10,10 뒤꿈치로 표시됩니다.따라서 10,10 현재 위치를 점L으로 이동합니다.

이와 유사하게 LineTo에는 세 개의 명령이 있습니다.l 또는 L10,10 현재 위치에서 지정된 점까지의 선을 생성합니다.예를 들어, 10,10 은 현재 위치에서 H 까지의 선을 생성합니다.h 또는 V 는 주어진 x 좌표의 수평선에 생성됩니다.마지막으로 v 또는 C 는 지정된 y 좌표에 수직선을 생성합니다.
세 번의 Bézier 곡선은 약간 복잡하다.이것은 알파벳 c 또는 x1 으로 표시되며 3개의 점을 매개 변수로 한다.

따라서 현재 위치가 시작점입니다.현재 위치에서 y1x2점까지의 선은 시작 위치에서 커브와의 탄젠트를 정의합니다.y2x3부터y3x3까지의 선은 종점 위치의 탄젠트를 정의합니다.y30,0가 결승점이다.세 차례의 Bézier 곡선에 대한 더 많은 정보를 얻으려면 이것blog post을 참고하십시오. 나는 그것이 매우 짧지만 묘사성이 있다는 것을 발견했습니다.자세한 내용은 MDN Tutorial on the SVG path 를 참조하십시오.
지금 우리가 배우고 있는 내용을 공고히 하기 위해서 아래의 SVG를 디코딩해 봅시다.

<svg
  viewbox="0 0 100 100"
  width="100" height="100" 
  xmlns="http://www.w3.org/2000/svg">
  <path
    d="M10,10 V50 C10,90,90,90,90,50 V10 H10 V50"
  />
</svg>

위의 코드는 다음과 같이 SVG를 생성합니다.선명하게 보기 위해서 나는 그림 주위에 녹색 테두리를 하나 넣었다.

우리의 경로는 M10,10부터 시작되며, 첫 번째 명령10,10은 우리의 점을 V50로 이동합니다.그리고 두 번째 명령 10,50 은 C10,90,90,90,90,50 에 대한 수직 경로를 생성합니다.다음으로 10,90 커브를 생성합니다. 여기에서 90,90 및 90,50 은 참조점으로 사용됩니다. V10 는 종점입니다.그리고 90,10 에 생성된 경로입니다.다음으로 H10 에서 10,10 까지의 경로를 만들고 마지막으로 V50 이 경로를 닫으면 최종 이미지를 얻을 수 있습니다.간단하죠?👌

실시✍️

나는 그림을 네 개의 상한으로 나누어 두 번째와 세 번째 상한에서 곡선을 그릴 계획이다. 위의 그림 1절과 같다.그리고 나는 곡선을 억제하기 위해 절선을 약간 안쪽으로 이동할 수 있다.마지막으로 나는 선을 사용하여 경로를 닫았다.나는 곡선을 약간 다르게 하기 위해 중심점을 약간 옮겼다.그러나 탄젠트가 수직 축과 같은 각도인지 확인합니다.이렇게 하면 커브 애니메이션을 설정할 때 커브가 연속적으로 보일 수 있습니다.마지막으로 나는 아래와 같은 경로를 얻었다.

<path d="M0,160 C320,300,420,300,740,160 C1060,20,1120,20,1440,160 V0 H0" />

위의 경로를 이해할 수 없으면 위 그림의 마지막 부분을 보십시오.나는 경로의 모든 부분을 더욱 명확하게 하기 위해 색 인코딩을 했다.당신은 또한 그것을 위의 부분과 비교하여 요점을 이해할 수 있습니다.만약 네가 지금까지 나를 계속 따라올 수 있다면, 우리는 이미 난관을 넘겼다.😁

<defs/> 및 <use/>

그럼에도 불구하고, 우리는 지금 상술한 경로를 복사해서 붙여넣고, 약간의 변화가 있는 다른 파도를 만들어서 그것을 하루라고 부른다.defs과use 표시를 소개하고 싶습니다. 이것은 우리가 더욱 읽을 수 있는 방식으로 이 모든 것을 완성하는 데 도움을 줄 것입니다.defs 그래픽 요소(예: path를 저장하고 나중에 use 태그를 사용할 수 있습니다.
우리가 해야 할 일은 우리의 id 하나path를 주고 defs 표시에 넣은 다음 href 표시의 use 속성을 사용하여 그것을 사용하는 것이다. 아래와 같다.

<svg
  viewbox="0 0 1440 320"
  width="1440" height="320" 
  xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id='sineWave'
      d="M0,160 C320,300,420,300,740,160 C1060,20,1120,20,1440,160 V0 H0"
    />
  </defs>
  <use href="#sineWave" />
</svg>

지금 흑파를 렌더링하고 있습니다.이 문제를 해결하기 위해 우리는 fill 중 fill-opacity 과 path 속성을 사용했다.따라서 우리의 업데이트 경로는 다음과 같다.

<path
  fill="#0099ff" fill-opacity="0.2"
  id='sineWave'
  d="M0,160 C320,300,420,300,740,160 C1060,20,1120,20,1440,160 V0 H0"
/>

애니메이션🤤

만약 당신이 CSS 애니메이션에 익숙하다면, 이 절은 당신의 식은 죽 먹기가 될 것입니다.그래서 이 생각은 간단하다.두 개의 파 (위에서 만든) 를 수평으로 겹쳐서 0%에서 100%로 간단하게 옮깁니다.씻고 반복하다.아래와 유사하다.

여기서 검정 상자는 사용자의 뷰포트를 나타냅니다.
이를 위해 다른 use 태그를 추가했지만 x 속성을 -100% 로 설정했습니다.wave 클래스를 이 두 가지 use 태그에 적용합니다.x를 0% 에서 100% 로 변환하고 wave 클래스에 적용하는 애니메이션을 만듭니다.

<svg
  viewbox="0 0 1440 320"
  width="1440" height="320" 
  xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css">
      .wave {
        animation: wave 8s linear infinite;
      }
      @keyframes wave {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(100%);
        }
      }
    </style>
    <path
      fill="#0099ff" fill-opacity="0.2"
      id='sineWave'
      d="M0,160 C320,300,420,300,740,160 C1060,20,1120,20,1440,160 V0 H0"
    />
  </defs>
  <use class="wave" href="#sineWave"/>
  <use class="wave" x="-100%" href="#sineWave"/>
</svg>

마지막으로 나는 두 개의 더 비슷한 파를 추가했다. 유일한 차이점은 내가transform CSS 속성에서 scaleY을 사용하여 서로 다른 파 진폭을 얻었다는 것이다.CodePen에서 최종 SVG를 확인할 수 있습니다.

보너스 힌트🤗

나는 또 현수막에 약간의 문자를 추가했다.SVG는 Google 글꼴을 지원하지만 GitHubcontent security policy는 외부 소스에서 글꼴을 다운로드할 수 없기 때문에 간단할 수 있습니다.그래서 저는 this utility를 사용하여 SVG 경로를 만들고 최종 SVG로 복사했습니다.내 GitHub Profile 에서 확인하십시오.

결론👨‍💻

나는 SVG 애니메이션의 표면에 거의 닿지 않았지만, 내가 매우 멋있다고 생각하는 것들을 만들 수 있었다.더 좋은 방법이 있나요?또 무슨 재미있는 일이 있으면 제가 탐색해야 하나요?아래에 댓글을 달거나 트위터에 알려 주세요.
현대화하다
나에게 SVG Path Visualizer를 보여 주었는데, 나는 그것이 가시화 변경 경로에 매우 유용하다는 것을 발견했다.
또한 온라인 상에는 defs 및 use 태그를 사용하여 쉽게 조정할 수 있는 많은 SVG 예가 있습니다.이 점을 검증하기 위해서 나는 this codepen 예시를 조정하고 그를 위해 현수막을 만들었습니다. 당신은 그의 GitHub profile 에 서명할 수 있습니다.