네이티브 JS는 폭발의 동적 효과를 구현합니다(코드 예)-JS 튜토리얼-php.cn

본 글의 내용은 네이티브 JS가 구현하는 폭발의 역동적인 효과에 관한 내용입니다. 참고가 필요한 친구들이 참고하시면 좋을 것 같습니다.

이번 공유는 제가 직접 개발한 컴포넌트를 요약한 것입니다. 아직 부족한 점이 많으니, 서로 소중한 의견을 공유해 주시길 바랍니다.

콘텐츠 공유 소개

기본 js 코드를 사용하여 입자 폭발 효과 구성 요소 구현
구성 요소 개발 과정에서 회사 내 매우 효율적인 엔지니어링 환경이 사용되었습니다. 다음은 광고입니다. Sina Mobile은 모든 종류의 기술 전문가를 모집합니다! 비공개 채팅을 통해 이력서를 보내실 수 있습니다!

효과 미리보기

네이티브 JS는 폭발의 동적 효과를 구현합니다(코드 예)

효과 분석

애니메이션의 시작점을 클릭하면 자동으로 종료됩니다.

각 효과는 무작위 방향, 다양한 표시 내용과 함께 포물선 입자 이동의 여러 요소를 생성합니다. 그리고 스페이스의 Z축 크기 변경은

간격 없이 클릭할 수 있습니다. 즉, 첫 번째 애니메이션 세트가 끝나기 전에 두 번째 애니메이션 세트를 재생할 수 있습니다.

애니메이션의 기본 실행 시간은 same

위의 4가지 사항을 분석한 후 애니메이션 구현을 위한 구현 솔루션은 무엇입니까?

Css 작업 상태 변환(예: 포커스)으로 인해 하위 요소가 애니메이션을 수행하게 됩니다

권장되지 않습니다. 효과는 여러 번 연결될 수 있으며 CSS 상태 변환은 요구 사항을 충족하지 않습니다.

Js는 애니메이션 시작을 제어하고 CSS를 작성합니다. 애니메이션을 미리 설정하고 클래스를 전달합니다. .active .items{animation:xxx ...;}

애니메이션을 한 번에 실행하는 데는 문제가 없지만 권장되지 않습니다. 고정된 효과가 있고 애니메이션을 연속적으로 실행할 수 없습니다

미리 많은 애니메이션을 작성하고 많은 돔 요소를 숨기면 애니메이션이 돔 요소를 무작위로 선택하여 고유한 애니메이션 키프레임을 실행하기 시작합니다

구현 수준에서는 작동하지만 댓글 목록이 길고 DOM 수가 많고 CSS 애니메이션 수가 많으면 코드가 무겁고 다루기 힘들게 됩니다. Randomness

Css 애니메이션을 버리고 캔버스를 사용하여 애니메이션을 그립니다

가능하지만 캔버스 유지 비용이 약간 더 높고 사용자 정의 기능은 디자인하기 어렵고 화면 적응에도 일정한 비용이 있습니다

js는 DOM 생성을 수행하고 임의의 CSS @keyframes를 생성합니다

가능하지만 스타일을 생성합니다. 시트를 사용하고 CSS로 인해 페이지가 다시 렌더링되면 페이지 성능이 저하되며 포물선형 CSS의 복잡성이 낮지 않습니다. 당분간은

dom 렌더링을 위한 js 브러시 프레임

입니다. 가능하지만 프레임 브러시 작업으로 인해 성능 압박이 발생합니다

결론

캔버스가 가능하지만 개발 단점으로 인해 이번 공유에서는 캔버스를 공유 콘텐츠로 사용하지 않고 마지막 JS 프레임 브러싱 돔 작업을 사용합니다.

컴포넌트 구조

스크린샷 공유, 애니메이션은 두 개의 모듈로 나눌 수 있습니다. 첫째, 무작위로 발산하는 입자는 포물선형 애니메이션, 페이드 아웃, 렌더링 표현이라는 공통 특성을 가지고 있습니다.

그리고 예제 수가 증가하면 효과가 나타납니다. 스크린샷

그러나 성능상의 이유로 파티클을 제어하고 리소스 재사용을 실현하려면 파티클 관리 및 제어 구성 요소로 두 번째 모듈이 필요합니다

So: 이 함수는 두 개의 모듈을 사용하여 개발할 수 있습니다: Partial.js 파티클 function and boom.js 파티클 관리

Partial.js 구현

사전 리소스: 포물선 운동의 물리적 곡선은 Tween.js에서 제공하는 속도 함수를 사용해야 합니다

Tween을 도입하고 싶지 않다면. Node.js에서는 다음 코드를 사용할 수 있습니다

 
      * Tween.js
      * t: current time（当前时间）；
      * b: beginning value（初始值）；
      * c: change in value（变化量）；
      * d: duration（持续时间）。
      * you can visit 'http://easings.net/zh-cn' to get effect

로그인 후 복사

        *
    
        const Quad = {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t + b;
            },
            easeOut: function(t, b, c, d) {
                return -c *(t /= d)*(t-2) + b;  
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) <p>파티클 구현<br>구현 아이디어:<br> 희망 파티클 구성 요소를 제어할 때 새로운 부분 메서드를 사용하여 파티클을 생성하세요. 각 파티클에는 고유한 애니메이션 시작 메서드와 애니메이션 종료 콜백이 있습니다. <br> 목록에 엄청난 수의 댓글이 있을 수 있으므로 전역적으로 제한된 수의 파티클만 생성하기를 희망하므로 파티클 재사용을 실현하기 위해 컨테이너에서 파티클을 제거하고 컨테이너에 파티클을 추가하는 기능을 제공합니다</p> <p>partical_style.css</p><pre class="brush:php;toolbar:false">     
     //粒子充满粒子容器，需要容器存在尺寸以及relative定位
     .Boom-Partical_Holder{
         position: absolute;
         left:0;
         right:0;
         top:0;
         bottom:0;
         margin:auto;
     }

로그인 후 복사

particle.js

 
 import "partical_style.css";
 
 class Partical{
     // dom为装载动画元素的容器 用于设置位置等样式
     dom = null;
     // 动画开始时间
     StartTime = -1;
     // 当前粒子的动画方向，区别上抛运动与下抛运动
     direction = "UP";
     // 动画延迟
     delay = 0;
     // 三方向位移值
     targetZ = 0;
     targetY = 0;
     targetX = 0;
     // 缩放倍率
     scaleNum = 1;
     // 是否正在执行动画
     animating = false;
     // 粒子的父容器，标识此粒子被渲染到那个元素内
     parent = null;
     // 动画结束的回调函数列表
     animEndCBList = [];
     // 粒子渲染的内容容器 slot
     con = null;
     
     constructor(){
         //创建动画粒子dom
         this.dom = document.createElement("p");
         this.dom.classList.add("Boom-Partical_Holder");
         this.dom.innerHTML = `
             <p>
                 Boom
             </p>
         `;
     }
     
     // 在哪里渲染
     renderIn(parent) {
         // dom判断此处省略
         parent.appendChild(this.dom);
         this.parent = parent;
         // 此处为初始化 slot 容器
         !this.con && ( this.con = this.dom.querySelector(".Boom-Partical_con"));
     }
     
     // 用于父容器移除当前粒子
     deleteEl(){
         // dom判断此处省略
         this.parent.removeChild(this.dom);
     }
     
     // 执行动画，需要此粒子执行动画的角度，动画的力度，以及延迟时间
     animate({ deg, pow, delay } = {}){
         // 后续补全
     }
     
     // 动画结束回调存储
     onAnimationEnd(cb) {
         if (typeof cb !== 'function') return;
         this.animEndCBList.push(cb);
     }
     
     // 动画结束回调执行
     emitEndCB() {
         this.dom.style.cssText += `;-webkit-transform:translate3d(0,0,0);opacity:1;`;
         this.animating = false;
         try {
             for (let cb  of this.animEndCBList) {
                 cb();
             }
         } catch (error) {
             console.warn("回调报错:",cb);
         }
     }
     
     // 简易实现slot功能，向粒子容器内添加元素
     insertChild(child){
         this.con.innerHTML = '';
         this.con.appendChild(child);
     }
 }

로그인 후 복사

축하합니다. 먼저 입자 개체에 대한 생성자를 만들었습니다. 이제 디자인 아이디어를 구현했는지 생각해 보세요.