웹 애니메이션 API를 사용하여 입자를 사용하여 재생합니다

웹 애니메이션 API를 사용하여 멋진 입자 효과를 만듭니다. 버튼을 클릭하여 불꽃 놀이를 개화하십시오!

애니메이션의 매력을 입자 효과보다 더 잘 보여줄 수있는 것은 없습니다! 새로운 기술을 탐색 할 때마다 가능한 한 많은 입자를 사용하여 프리젠 테이션을 할 수 없습니다. 이 기사는 웹 애니메이션 API를 사용하여 버튼을 클릭하여 더 놀라운 입자 매직을 만들어 불꽃 놀이를 트리거합니다.

브라우저 지원

글을 쓰는시기에 Safari 및 Internet Explorer를 제외한 모든 주요 브라우저는 적어도 부분적으로 웹 애니메이션 API를 지원합니다. "경험 기능"개발자 메뉴에서 Safari 지원을 활성화 할 수 있습니다.

브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 숫자는 브라우저 가이 버전 에서이 기능을 지원하고 나중에이 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일/태블릿

Twitter Love Animation을 재현하려면 Ana Tudor 의이 멋진 기사를 참조 할 수도 있습니다.이 기사는 버튼 폭발 입자의 효과의 훌륭한 예이기도합니다.

HTML 구조

이 데모에는 많은 HTML 코드가 필요하지 않습니다. 우리는 하나를 사용할 것입니다<button></button> 요소이지만 다른 유형의 태그 요소 일 수도 있습니다. 필요한 경우 페이지의 클릭 이벤트를 듣고 입자가 어디에서나 나타날 수 있습니다.

 <button id="button">나를 클릭하십시오</button>

CSS 스타일

각 입자에는 몇 가지 공통 CSS 특성이 있으므로 페이지의 전역 CSS에 설정할 수 있습니다. HTML과 같은 맞춤형 태그 요소를 만들 수 있습니다.<particle></particle> 시맨틱 태그를 사용하지 않도록 태그 이름. 그러나 사실, 당신은 애니메이션을 할 수 있습니다<div> ,,,<code><span></span> 또는 선택한 라벨.

 입자 {
  국경-라디우스 : 50%;
  왼쪽 : 0;
  포인터 이벤트 : 없음;
  위치 : 고정;
  상단 : 0;
  불투명도 : 0; /*초기 투명성은 0이므로 애니메이션이 시작되기 전에 입자가 보이지 않도록*/
}

주목해야 할 것은 다음과 같습니다.

• 입자는 페이지의 레이아웃과 상호 작용해서는 안되므로 position fixed , top 및 left 0px로 설정합니다.
• 또한 화면에 나타날 때 HTML 입자와의 사용자 상호 작용을 피하기 위해 pointer-events 제거했습니다.

버튼과 페이지 레이아웃의 스타일 디자인은이 기사의 초점이 아니기 때문에이 섹션을 건너 뛸 것입니다.

자바 스크립트 코드

다음은 JavaScript에서 다음과 같은 6 단계입니다.

1. 버튼의 클릭 이벤트를 들으십시오
2. 30을 만듭니다<particle></particle> 요소를 DOM에 추가하십시오
3. 각 입자에 대한 임의의 폭, 높이 및 배경색 설정
4. 각 입자를 애니메이션하여 마우스 위치에서 임의 위치로 이동하여 점차적으로 사라집니다.
5. 애니메이션이 완료되면 DOM에서 제거하십시오.<particle></particle> 요소

1 단계 : 이벤트를 클릭하십시오

 // 먼저 브라우저가 웹 애니메이션 API를 지원하는지 확인합니다.
if (document.body.animate) {
  // 지원되는 경우 클릭 리스너 문서를 추가합니다. QuerySelector ( '#button'). addEventListener ( 'Click', POP);
}

2 단계 : 입자 생성

 // pop () 함수는 함수라고합니다. pop (e) {
  // 30 입자를 원형으로 생성합니다 (i = 0; i <h4 id="단계-입자-너비-높이-및-배경"> 3 단계 : 입자 너비, 높이 및 배경</h4><pre class="brush:php;toolbar:false"> 함수 createParticle (x, y) {
  // ... (이전 코드)
  // 5px와 25px 사이의 임의의 크기를 계산합니다. const size = math.floor (math.random () * 20 5);
  // 각 입자에 크기를 적용합니다 .Style.width =`$ {size} px`;
  partial.style.height =`$ {size} px`;
  // 파란색/자주색 팔레트에서 임의의 색상을 생성하십시오.
  // ... (다음 단계)
}

4 단계 : 각 입자를 애니메이션합니다

 함수 createParticle (x, y) {
  // ... (이전 코드)
  // 마우스 위치 범위에서 랜덤 x 및 y 대상 위치를 생성합니다. 75px const destinationx = x (math.random () -0.5) * 2 * 75;
  const destinationy = y (math.random () -0.5) * 2 * 75;

  // 나중에 필요하기 때문에 애니메이션을 변수에 저장합니다. 나중에 const animation = particle.animate ([
    {
      // 입자의 초기 위치를 설정 // 우리는 입자의 절반을 사용하여 입자가 마우스를 중심하도록 입자를 이동시킵니다.`translate ($ {x- (size/ 2)} px, $ {y- (size/ 2)} px)`,
      불투명도 : 1
    },
    {
      // 최종 좌표를 두 번째 키 프레임 변환으로 정의합니다.`Translate ($ {retentixx} px, $ {destinationy} px)`,
      불투명도 : 0
    }
  ], {
    // 500ms에서 1500ms 사이의 임의의 지속 시간을 설정 : 500 Math.random () * 1000,
    완화 : 'Cubic-Bezier (0, .9, .57, 1)',
    // 각 입자를 지연시키기 위해 0ms에서 200ms 사이의 임의 값을 사용하십시오 : Math.random () * 200
  });
  // ... (다음 단계)
}

5 단계 : 애니메이션이 완료된 후 입자 제거

 함수 createParticle (x, y) {
  // ... (이전 코드)
  // 애니메이션이 완료되면 요소 애니메이션을 제거합니다.
    입자 .remove ();
  };
}

최종 효과

모든 코드를 함께 통합하여 원하는 효과를 얻을 수 있습니다 : 화려한 입자 폭발 효과.

데모에 애니메이션이 표시되지 않으면 브라우저가 웹 애니메이션 API를 지원하는지 확인하십시오. 자세한 내용은 기사의 시작 부분에서 브라우저 지원 양식을 참조하십시오.

무제한 창의성

이 모든 것이 CSS를 사용하기 때문에 입자 스타일을 수정하는 것은 매우 간단합니다. 다음은 다양한 모양 (문자조차도)을 사용하는 몇 가지 예입니다.

또는 Zach Saucier 가이 게시물에서했던 것처럼 버튼 자체가 폭발하게 할 수도 있습니다.

(다른 모양 및 문자 및 Zach Saucier 기사 링크에 대한 두 번째 추가 샘플 코드)