애니메이션 버블/SVG
8668 단어 programmingsvgfrontendwebdev

거품 그리기.

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

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

마침내 광장에서 우리가 원하는 것을 만들어 봅시다.
객체 편집 버튼을 눌러봅시다.

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

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

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

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

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

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

What you get is the state of the shape that the original one will aspire to:
start → finish → start → finish → ∞
우리가 가지고 있는 것을 다운로드합시다:

두 개의 SVG를 하나의 애니메이션으로 결합
다운로드한 svg를 열고 새 svg를 만듭니다.

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

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

방해가 되지 않도록 너비 및 높이 속성을 제거하겠습니다.
viewBox에서 가능한 최대 높이와 너비를 설정했습니다.

요점: animate tag을 사용하여 애니메이션을 만듭니다.
Pay attention to browser support!
경로 안에 넣으십시오.

속성에 대해 간단히:
값을 하나 더 추가해 보겠습니다. 현재 경로 태그에서 속성 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 에서 더 잘 볼 수 있습니다.
Reference
이 문제에 관하여(애니메이션 버블/SVG), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vadimfilimonov/animated-bubble-svg-2k57텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)