애니메이션 버블/SVG

오늘 우리는 자바스크립트나 캔버스 없이 이와 같은 것을 만드는 방법을 배울 것입니다.



거품 그리기.

figma.com으로 이동하여 새 파일을 만듭니다.

펜을 선택하거나 P를 누릅니다.

직사각형 그리기 - 완료를 누릅니다.



획을 제거하고 사각형을 재미있는 색상으로 채웁니다.



마침내 광장에서 우리가 원하는 것을 만들어 봅시다.

객체 편집 버튼을 눌러봅시다.



다음으로 구부리기 도구를 클릭합니다.



사각형의 측면을 클릭합니다. 다음과 같은 점이 표시되어야 합니다.



그중 하나를 위로 당깁니다.



보시다시피 모양이 곡선입니다. 여기에서 figma 및 벡터 그래픽에 대한 깊은 지식이 끝납니다. 그래서 우리는 네 점 모두에 대해 동일한 트릭을 수행합니다.



거품이 준비되었습니다. 그것은 우리의 "시작"위치가 될 것입니다.
복사해서 옆에 두자.



다시 개체 편집 - 구부리기 도구를 누르고 오른쪽의 거품을 약간 변경합니다.

What you get is the state of the shape that the original one will aspire to:

start → finish → start → finish → ∞

우리가 가지고 있는 것을 다운로드합시다:

벡터 선택;

확장자로 svg를 선택합니다.

내보내기를 클릭합니다.

두 개의 SVG를 하나의 애니메이션으로 결합

다운로드한 svg를 열고 새 svg를 만듭니다.



시작 내용을 결과에 복사합니다.



result.svg에서 경로 태그를 쌍으로 만듭니다.



방해가 되지 않도록 너비 및 높이 속성을 제거하겠습니다.

viewBox에서 가능한 최대 높이와 ​​너비를 설정했습니다.

start.svg 너비 = 363, finish.svg 너비 = 364. 저는 364를 사용합니다.

start.svg 높이 = 302, finish.svg = 311. 저는 311을 사용합니다.

요점: animate tag을 사용하여 애니메이션을 만듭니다.

Pay attention to browser support!

경로 안에 넣으십시오.



속성에 대해 간단히:

repeatCount - 애니메이션이 발생하는 횟수입니다. 반복 횟수를 무한대로 설정하려면 indefinite를 설정합니다.

attributeName - 애니메이션을 적용할 속성의 이름입니다. 이 예에서는 그림의 좌표가 유지되는 d입니다.

dur - 애니메이션 기간입니다.

값을 하나 더 추가해 보겠습니다. 현재 경로 태그에서 속성 d의 값을 여기에 복사해 보겠습니다.



여기에 finish.svg 파일의 d 속성 값을 추가합니다.



세 번째 줄은 애니메이션을 닫기 위해 첫 번째 줄에서 복사됩니다.

<animate repeatCount="indefinite" attributeName="d" dur="10s"
  values="M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z;
  M302.348 71.5969C209 -48 69.1956 6.19389 41.3478 71.5969C13.5 137 -35.5 223 41.3478 273.597C118.196 324.194 233.195 322.694 302.348 273.597C371.5 224.5 395.695 191.194 302.348 71.5969Z;
  M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z;"></animate>

결과:

기사 시작 부분에서 어떻게 보이는지 볼 수 있습니다.

또한 여기에 svg 자체를 넣을 것입니다.

<svg viewBox="0 0 364 311" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z" fill="#FFCC00">
    <animate repeatCount="indefinite" attributeName="d" dur="10s"
      values="M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z;
        M302.348 71.5969C209 -48 69.1956 6.19389 41.3478 71.5969C13.5 137 -35.5 223 41.3478 273.597C118.196 324.194 233.195 322.694 302.348 273.597C371.5 224.5 395.695 191.194 302.348 71.5969Z;
        M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z;"></animate>
  </path>
</svg>

그리고 codepen 에서 더 잘 볼 수 있습니다.