Native JS realizes the dynamic effect of explosion (code example)

The content of this article is about the dynamic effect of explosion achieved by native JS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

This sharing is a summary of my own component development. There are still many shortcomings. I hope you can provide valuable opinions and learn from each other.

Introduction to sharing content

Particle explosion effect components are realized through native js code
During the component development process, a very efficient engineering environment within the company was used. Hereby advertise: Sina Mobile is recruiting Various technologies are great! You can send your resume via private chat!

Effect preview

Effect analysis

Click as the starting point for the animation to start and it will end automatically

Each effect produces multiple parabolic particle motion elements, with random directions and different display content. There are changes in the size of the Z-axis in space.

You can click without intervals if required, that is, the first group The second set of animations can be played before the animation ends

The basic animation execution duration is the same

After analyzing the above four points, what are the implementation solutions for animation implementation?

css operation state transformation (such as focus) causes child elements to perform animation

It is not advisable, the effect can be connected multiple times, css state transformation does not meet the requirements

Js control animation To start, write the css animation preset in advance, and use the class to include the selector to switch the animation. For example: .active .items{animation:xxx ...;}

is not advisable. There is no problem in executing the animation in a single time, but there is The effect is fixed, and the animation cannot be executed continuously

Write a large number of animations in advance, hide a large number of dom elements, and the animation starts to randomly select dom elements to execute its own unique animation keyframes

At the implementation level, it works It works, but when the comment list is long, the number of DOM is huge, and a large number of css animations cause a heavy code volume and no randomness

Abandon css animation and use canvas to draw animation

It is feasible, but canvas The maintenance cost is slightly high, and custom functions are difficult to design, and screen adaptation also has a certain cost.

js does DOM creation and generates random css @keyframes

It is feasible, but creating a style style sheet will cause css Re-rendering the page will cause the performance of the page to decrease, and the complexity of parabolic css is not low, so it is not the first choice for the time being.

js brushing the frame for dom rendering

is feasible, but the brushing frame operation will cause Performance pressure

Conclusion

Although canvas is feasible, due to its development shortcomings, this sharing does not use canvas as the shared content, but uses the last js to refresh the frame. DOM operation

Component structure

Shared by screenshots, animation can be divided into two modules. First, randomly divergent particles have common characteristics: parabolic animation, fade out, rendering expression

When the number of examples increases, it will be the effect in the screenshot

However, due to performance reasons, we need to control the particles and realize resource reuse, so a second module is needed as a particle management and control component.

So: This function can be developed using two modules: partial.js particle function and boom.js particle management

Implementing Partial.js

Pre-resource: The physical curve of parabolic motion needs to use the speed function provided by Tween.js

If you do not want to introduce Tween.js, you can use the following code

 
      * 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>Particle implementation<br>Implementation ideas: <br> I hope to use the new partial method to create particles when controlling particle components. Each particle has its own animation start method and animation end callback. <br> Since the comment list may have a huge number, we hope to create only a limited number of particles globally, so we provide the function of removing particles from the container and adding particles to the container to realize the reuse of particles</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);
     }
 }

To this end, we first created a constructor for the particle object. Now consider whether we have implemented our design idea?

• Use the constructor new Partical() particle

• The particle strength object exists animate execution animation method

• Storage and execution of the animation end callback function

• Set the parent element of the particle: renderIn method

• Delete the particle from the parent element: deleteEl method

In order to better display the particle content, we specially created a Boom-Partical_con element in the constructor to simulate the slot function: insertChild method, used for users to display different content. explode

The above is the detailed content of Native JS realizes the dynamic effect of explosion (code example). For more information, please follow other related articles on the PHP Chinese website!