CSS Paint API : Blob 애니메이션 탐색

이 기사는 CSS Paint API를 사용하여 매혹적인 블로브 애니메이션을 만드는 것을 탐구합니다. 전통적으로 SVG로 달성되었지만 Paint API는 강력한 CSS 기반 대안을 제공하지만 현재 Chrome 및 Edge로 제한됩니다.

이것은 시리즈의 2 부입니다.

• 1 부 : 이미지 조각화 효과
• 2 부 : Blob Animation (이 기사)
• 3 부 : 다각형 테두리
• 파트 4 : 둥근 모양

얼룩을 만들어 봅시다. 이해<canvas></canvas> 접근 먼저 프로세스를 명확히합니다.

블로브는 본질적으로 왜곡 된 원입니다. 우리는 원 주위에 'n'포인트를 정의합니다. 삼각법을 사용하여 각 점의 좌표 (그림의 녹색 점)를 계산합니다. Cubic Bézier Curves는 이러한 점을 연결하여 시작점, 제어점 및 엔드 포인트 (빨간색 점)가 필요합니다. 레드 포인트는 녹색 점 사이의 중간 점입니다.

제어 지점 (녹색 점)을 조정하여 얼룩을 모양으로 만듭니다. 각 지점을 중심으로 무작위로 상쇄하면 Blob 효과가 발생합니다.

그런 다음이 모양은 CSS 페인트 API를 사용하여 이미지의 마스크가됩니다. 정사각형 요소 (너비 높이)는 이상적이며 반경은 너비/높이의 절반입니다. CSS 변수 (n)는 포인트 수를 제어합니다.

얼룩을 애니메이션에는 원활하게 이동하는 포인트 위치가 포함됩니다. 한 지점의 위치를 ​​변경하여 간단한 애니메이션은 원에서 블로브로 전환됩니다. 전환이있는 CSS 변수 ( --b )가 사용됩니다. 호버에서 --b 가 바뀌고 포인트를 움직이고 애니메이션을 만듭니다. 이것을 여러 포인트 (예를 들어, 겨울 수있는 것)로 확장하면 더 복잡한 애니메이션이 생성됩니다.

임의성 소개 : 고정점 이동 대신 임의의 오프셋은 동적 애니메이션을 만듭니다. 변수 ( T )는 균일 한 구성과 랜덤 구성 사이의 부울 스위치 역할을합니다. 제어 가능한 시드가있는 사용자 정의 random() 함수는 일관된 랜덤 시퀀스를 보장합니다.

포인트 움직임 제어 : 다양한 애니메이션에 대해 X 및 Y 좌표를 독립적으로 조작 할 수 있습니다. 예를 들어, 하나의 좌표를 0으로 설정하면 1 축 이동 (수평 또는 수직)이 생성됩니다. 방향 운동 (왼쪽 또는 오른쪽)은 각도에 따라 그룹화 점을 요구하고 오프셋에 다른 표지판을 적용해야합니다. 원의 크기를 조정하면 포인트가 마스크 영역을 초과하는 것을 방지합니다. 부정적인 여백이있는 포장지는 호버 영역이 눈에 띄는 멍청이와 일치합니다.

애니메이션 결합 : 키 프레임과 입방-베 지어 () 함수는 애니메이션을 향상시킵니다. 정현파 곡선은 흔들리는 효과를 만듭니다. 변환 슬라이딩 효과 추가.

원형 운동 : 초기 위치를 공전하여 연속 애니메이션을 만듭니다. 최대 궤도 반경은 겹치는 것을 방지합니다.

나선형 움직임 : 원형 및 중심 전환 운동을 결합하면 나선형 애니메이션이 생성됩니다. 두 개의 애니메이션 변수 ( B 및 Bo )는 각각 궤도 및 포인트 움직임을 제어합니다.

요약:

• N : 포인트 수 (컨트롤 세부 사항).
• T : 이동 유형 (균일 또는 랜덤).
• 씨앗 : 임의의 구성 용.
• NA : 움직임의 특성 (중심-수동, 1 축, 원형, 나선 등).
• B (및 BO) : 애니메이션 변수.
• V : B의 ​​최대 값 (제어 모양 영역).

코드 구조는 간단합니다. CSS 변수 제어 매개 변수 및 JavaScript 함수 ( Fx , Fy , A ) 애니메이션 로직을 정의합니다. CSS는 마스크를 적용하고 B 변수를 애니메이션합니다.

이것은 CSS Paint API를 사용한 Blob Animations의 탐색을 마무리합니다. CSS 변수를 실험하여 수많은 변형을 생성하십시오.

위 내용은 CSS Paint API : Blob 애니메이션 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!