这篇文章将为大家详细讲解有关原生JS怎么实现爆炸的动态效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
通过原生JS代码,实现粒子爆炸效果组件
组件开发过程中,使用到了公司内部十分高效的工程化环境,特此打个广告:新浪移动诚招各种技术大大!可以私聊投简历哦!
效果预览
<>强效果分析
点击作为动画开始的起点,自动结束
每次效果产生多个抛物线粒子运动的元素,方向随机,展示内容不一样,有空间Z轴上的大小变化
需求上可以无间隔点击,即第一组动画未结束可播放第二组动画
动画基本执行时长一致
由以上四点分析后,动画实现有哪些实现方案呢?
css操作态变换(如聚焦)使子元素执行动画
不可取,效果可多次连点,css状态变换与需求不符
JS控制动画开始,事先写好css动画预置,通过类包含选择器切换动画例如:.active . items{动画:xxx…;}
不可取,单次执行动画没有问题,但是存在效果的固定,以及无法连续执行动画
事先写好大量动画,隐藏大量dom元素,动画开始随机选取dom元素执行自己唯一的动画关键帧
实现层面来说,行得通,但是评论列表长的时候,dom数量巨大,且css大量动画造成代码量沉重,无随机性
抛弃css动画,使用帆布绘制动画
可行,但是帆布维护成本略高,且自定义功能难设计,屏幕适配也有一定成本
JS做dom创建,生成随机css @keyframes
可行,但是创建风格样式表,引发css重新渲染页面,会导致页面的性能下降,且抛物线css的复杂度不低,暂不作为首选
JS刷帧做dom渲染
可行,但是刷帧操作会造成性能压力
<强>结论
帆布虽说可行,但由于其开发弊端本次分享不以帆布为分享内容,而是使用最后一种JS刷帧的dom操作
组件结构
由截图分享,动画可以分为两个模块,首先,随机发散的粒子具有共性:抛物线动画,淡出,渲染表情
而例子数量变多之后则为截图中的效果
但是,由于性能原因,我们需要做到粒子的掌控,实现资源再利用,那么还需要第二个模块,作为粒子的管控组件
所以:此功能可使用两个模块进行开发:质点。js粒子功能与繁荣。js粒子管理
<强>实现Partical.js
前置资源:抛物线运动的物理曲线需要使用Tween.js提供的速度函数
若不想引入渐变。js可以使用以下代码
粒子实现
实现思路:
希望在粒子管控组件时,使用新质点的方式创建粒子,每个粒子存在自己的动画开始方法,动画结束回调。
由于评论列表可能存在数量巨大的情况,我们希望只全局创建有限个数的粒子,那么则提供呢容器移除粒子功能以及容器添加粒子的功能,实现粒子的复用
partical_style。css
导入“partical_style.css";
类质点{//dom为装载动画元素的容器用于设置位置等样式
dom=零;//动画开始时间
开始时间=1;//当前粒子的动画方向,区别上抛运动与下抛运动
方向=癠P";//动画延迟
延迟=0;//三方向位移值
targetZ=0;
targetY=0;
targetX=0;//缩放倍率
scaleNum=1;//是否正在执行动画
动画=false;//粒子的父容器,标识此粒子被渲染到那个元素内
父母=零;//动画结束的回调函数列表
animEndCBList=[];//粒子渲染的内容容器槽
反对=零;
构造函数(){//创建动画粒子dom
这一点。dom=document.createElement (“p");
this.dom.classList.add (“Boom-Partical_Holder");
this.dom。innerHTML='
类& lt; p=癇oom-Partical_con"祝辞
繁荣
& lt;/p>
”;
}//在哪里渲染
renderIn(父){//dom判断此处省略
parent.appendChild (this.dom);
这一点。父母=父母;//此处为初始化槽容器
!这。反对,,(这一点。反对=this.dom.querySelector (“.Boom-Partical_con"));
}//用于父容器移除当前粒子
deleteEl () {//dom判断此处省略
this.parent.removeChild (this.dom);
}//执行动画,需要此粒子执行动画的角度,动画的力度,以及延迟时间
动画({度、战俘、延迟}={}){//后续补全
}//动画结束回调存储
李> 原生JS怎么实现爆炸的动态效果
