JS烟花案例优化版
不明白为什么是烟花优化版本的先参考作者的烟花基础版本
烟花优化版本主要实在优化爆炸的范围和运动上做了优化，爆炸范围我们采用已圆的爆炸方式，以鼠标点击的位置为圆形爆炸的烟花效果
<!DOCTYPE html>
<!--
* @Descripttion:
* @version:
* @Author: 小小荧
* @Date: 2020-03-18 19:15:15
* @LastEditors: 小小荧
* @LastEditTime: 2020-03-18 20:31:12
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
width: 80%;
height: 600px;
border: 2px solid red;
background: #000;
margin: 20px auto;
cursor: pointer;
position: relative;
left: 0;
top: 0;
overflow: hidden;
}
.fire {
width: 10px;
height: 10px;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="container"></div>
<script src="./js/animate.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
<script>
let container_ele = document.querySelector(".container");
container_ele.addEventListener("click", function(evt){
var e = evt || event;
new FireWork(e.offsetX, e.offsetY, ".container", "circular");
})
</script>
</body>
</html>
运动函数部分
/*
* @Descripttion:
* @version:
* @Author: 小小荧
* @Date: 2020-03-17 18:01:21
* @LastEditors: 小小荧
* @LastEditTime: 2020-03-18 20:49:13
*/
/**
* 多属性的动画函数
* @param {*} ele 需要运动的节点
* @param {*} attr_options 传入的是一个需要运动的属性包括运动的目标值，操作的节点属性
* @param {*} timefn 运动的形式，默认是缓冲运动
* @param {*} speed 运动的速度
*/
function animate(ele, attr_options, callback, timefn = "swing", speed = 5) {
// 我们需要把传入的options处理成
/*
{“width : {
target : 200,
iNow : 100
}}这个形式
*/
for (var attr in attr_options) {
attr_options[attr] = {
target: attr === "opacity" ? parseInt(attr_options[attr] * 100) : attr_options[attr],
// 需要计算得到
iNow: attr === "opacity" ? parseInt(getComputedStyle(ele)[attr] * 100) : parseInt(getComputedStyle(ele)[attr])
}
}
// 为了防止每个节点的定时器冲突，每次进入的时候我们需要先清理下节点的定时器
clearInterval(ele.timer);
// 然后再去设置定时器
ele.timer = setInterval(function () {
// 因为是多属性运动，我们首先循环遍历每一个属性
for (var attr in attr_options) {
var target = attr_options[attr].target;
var iNow = attr_options[attr].iNow;
// 计算speed 判断是不是缓冲运动
if (timefn === "swing") {
speed = (target - iNow) / 20;
// 为了防止速度无法达到一个整数
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
}
// 判断是不是匀速运动
else if (timefn === "liner") {
speed = attr_options[attr].iNow < attr_options[attr].target ? Math.abs(speed) : -Math.abs(speed);
}
// 运动之中条件的判断
if (Math.abs(target - iNow) <= Math.abs(speed)) {
console.log(1);
if (attr === "opacity") {
ele.style[attr] = target / 100;
} else {
ele.style[attr] = target + "px";
}
// 每次一个属性运动完成之后我们就直接将它删除
delete attr_options[attr];
// 每次都去循环看一下还有没有属性需要操作
for (var num in attr_options) {
return false;
}
// 清理定时器 因为我们是一个定时器绑定多个属性操作所以我们需要保证所有的属性都完成之后我们才可以将定时器清除
clearInterval(ele.timer);
// 等结束之后我们需要判断这个回到函数是函数我们就回调
typeof callback === "function" ? callback() : ""
} else {
attr_options[attr].iNow += speed;
if (attr === "opacity") {
ele.style[attr] = attr_options[attr].iNow / 100;
} else {
ele.style[attr] = attr_options[attr].iNow + "px";
}
}
}
}, 30);
}
工具类
let res = "#";
for (let i = 0; i < 6; i++) {
res += parseInt(Math.random() * 10).toString(16);
}
return res;
核心烟花JS代码
/*
* @Descripttion:
* @version:
* @Author: 小小荧
* @Date: 2020-03-18 19:16:48
* @LastEditors: 小小荧
* @LastEditTime: 2020-03-21 13:51:37
*/
class FireWork {
// 构造器
/**
*
* @param {*} x x轴坐标
* @param {*} y y轴坐标
* @param {*} seletor 选择器名
*/
constructor(x, y, seletor, blastType) {
// 父容器的节点 单例模式，因为这个父盒子只有一个随意每次创建烟花的时候我们需要判断一下，如果存在了这个父盒子我们就不需要再去冲去获取节点元素了
if(FireWork.main && FireWork.main.seletor === seletor){
this.main = FireWork.main.ele;
console.log("dasd");
}else {
FireWork.main = {
ele : document.querySelector(seletor),
seletor : seletor,
}
this.main = FireWork.main.ele;
}
this.blastType = blastType;
// 初始化
this.init(x, y);
}
/**
* 初始化方法
* @param {*} x x的坐标
* @param {*} y y的坐标
*/
init(x, y) {
this.x = x;
this.y = y;
// 创建的烟花的节点
this.ele = this.createFireWorkEle();
// 运动的最大left值
this.left_max = this.main.offsetWidth - this.ele.offsetWidth;
// 运动的最大的top值
this.top_max = this.main.offsetHeight - this.ele.offsetHeight;
// 设置烟花的开始颜色
this.randomColor(this.ele);
// 烟花开始运动
this.fireworkUp(this.ele);
}
/**
* 创建烟花的元素
*/
createFireWorkEle() {
// 创建节点
let ele = document.createElement("div");
// 设置类名
ele.className = "fire";
// 在父容器追加节点
this.main.appendChild(ele);
return ele;
}
/**
*
* 烟花运动的方法
* @param {*} ele 运动的这个烟花
*/
fireworkUp(ele) {
// 设置left
ele.style.left = this.x + "px";
// 烟花向上的运动我们使用animate动画
animate(ele, {
top: this.y,
}, () => {
// 等到这个烟花运动结束之后呢我们需要将这个烟花给删除了
ele.parentNode.removeChild(ele);
// 结束之后烟花开始爆炸
this.fireworkBlast();
});
}
/**
* 烟花爆炸的方法
*/
fireworkBlast() {
// 我们设置爆炸的数量为20
for (let i = 0; i < 20; i++) {
// 我们需要重新创建烟花的元素
let ele = this.createFireWorkEle();
// 给元素设置随机背景颜色和left，top，圆角属性值
this.randomColor(ele);
ele.style.left = this.x + "px";
ele.style.top = this.y + "px";
ele.style.borderRadius = "50%";
// 然后我们需要让这些元素开始运动,先获取随机坐标带你
animate(ele, this.blastType === "circular" ? this.circularBlast(i, 20) : this.randomPos(), () => {
// 删除烟花
ele.parentNode.removeChild(ele)
});
}
}
/**
* 原型烟花爆炸状态
* @param {*} now_index 当前的元素下标
* @param {*} total 总共的下标
*/
circularBlast(now_index, total) {
// 设定圆的半径为100
let r = 100;
// 我们需要计算圆的角度
let deg = now_index / total * 360;
// 在计算弧度
let reg = Math.PI / 180 * deg;
// 返回结果
return {
left: parseInt(Math.cos(reg) * r) + this.x,
top: parseInt(Math.sin(reg) * r) + this.y,
}
}
/**
* 随机获取坐标点
*/
randomPos() {
return {
left: Math.round(Math.random() * this.left_max),
top: Math.round(Math.random() * this.top_max)
}
}
/**
*
* 随机背景颜色
* @param {*} ele 小烟花的元素
*/
randomColor(ele) {
return ele.style.backgroundColor = utils.randomColor();
}
}
JS烟花案例优化版的更多相关文章
- JS烟花案例
html代码部分 <!DOCTYPE html> <!-- * @Descripttion: * @version: * @Author: 小小荧 * @Date: 2020-03- ...
- Atiti attilax主要成果与解决方案与案例rsm版 v4
Atiti attilax主要成果与解决方案与案例rsm版 v4 版本历史记录1 1. ##----------主要成果与解决方案与 参与项目1 ###开发流程与培训系列1 #-----组织运营与文 ...
- Atiti attilax主要成果与解决方案与案例rsm版 v2
Atiti attilax主要成果与解决方案与案例rsm版 v2 1. ##----------主要成果与解决方案与 参与项目1 ###开发流程与培训系列1 #-----组织运营与文化建设系列1 # ...
- Atiti attilax主要成果与解决方案与案例rsm版
Atiti attilax主要成果与解决方案与案例rsm版 1. ##----------主要成果与解决方案与 参与项目1 ###开发流程系列1 ###架构系列 (au1 ###编程语言系列与架构系 ...
- 通用PE工具箱 4.0精简优化版
通用PE工具箱 4.0精简优化版 经用过不少 WinPE 系统,都不是很满意,普遍存在篡改主页.添加广告链接至收藏夹.未经允许安装推广软件等流氓行为,还集成了诸多不常用的工具,令人头疼不已.那么今天给 ...
- GHOST WIN7系统64位经典优化版 V2016年
来自系统妈:http://www.xitongma.com 深度技术GHOST win7系统32,64位经典优化版 V2016年3月 系统概述 深度技术ghost win7系统64位经典优化版适用于笔 ...
- Chrome 扩展程序 CrxMouse 优化版 v3.0.1
说明 CrxMouse 原版更新至 v2.7.8,跟进升级优化版至 v3.0.1. 改动说明: 1. 去除可能存在的后台数据上传隐患: 2. 解决鼠标右键拖动时的轨迹漂移问题. 3. 加入部分默认设置 ...
- POJ-2533最长上升子序列(DP+二分）（优化版）
Longest Ordered Subsequence Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 41944 Acc ...
- js加载优化三
Javascript性能优化之异步加载和执行 Author:小欧2013-09-17 随着科技的发展,如今的网站和五六年前相比,现在的人们对web的要求越来越高了,用户体验,交互效果,视觉效果等等都有 ...
随机推荐
- 后端工程师必知必会的前端 css 知识
后端工程师虽然大部分工作都是跟服务器缓存数据库打交道,但有时也需要写一些前端代码. 有些公司的OAM后台基本是由后端工程师承包的,所以前端基础知识是必须要掌握的:就算开发中不直接写前段代码,了解前端知 ...
- js判断PC端还是移动端的代码小坑
我在写官网的时候做了pc和移动端两个,在通过网上查找了这样的代码,看着完全没问题,等放进去页面中后,PC端页面一直刷新,根本停不下来,找了类似js还是同样的问题.通过不断尝试后才发现,问题就是多了一行 ...
- 单片机基础——使用GPIO输出点亮一个LED灯
1. 准备工作 硬件准备 开发板首先需要准备一个小熊派IoT开发板,并通过USB线与电脑连接. 软件准备 需要安装好Keil - MDK及芯片对应的包,以便编译和下载生成的代码,可参考MDK安装教程 ...
- flask 模型之间的关系 操作注意点
在创建模型时使用 # 关联表与表 添加以下参数 lazy='dynamic' 在两个表之间使用关联字段可以再次进行操作,筛选,分页 具体操作请看 https://www.bilibili.com/ ...
- golang的sync.WaitGroup使用示例
下面一段代码 len(m) 不一定会打印为 10,为什么?.如果想要 len(m) 打印为 10,应该怎么修改代码? func main() { const N = 10 m := make(map[ ...
- jupyternotebook安装
本篇阅读目录 一.Jupyter notebook环境安装 二.爬虫介绍 回到顶部 一.Jupyter notebook环境安装 1.Anaconda 以及 安装步骤 Anaconda指的是一个开源的 ...
- python基础学习day4
列表的初识 why:int bool str str: 存储少量的数据. str:切片还是对其进行任何操作,获取的内容全都是str类型.存储的数据单一. what:list list = [66, ' ...
- 【python】提取sql语句中的表名
前言 最近刚学python,写一个小工具时需要提取sql语句中表名,查询一番后找到一篇文章挺不错的,mark一下 PS.那篇文章是转载的,且没有标注转载自哪里 正文 import ply.lex as ...
- 10.xadmin后台使用管理
目录 xadmin后台管理 xadmin后台管理 安装:luffy虚拟环境下 >: pip install https://codeload.github.com/sshwsfc/xadmin/ ...
- oracle中plsql练习-----在控制台输出1到100以内的素数。
一.思路:首先需要知道素数的概念即质数定义为在大于1的自然数中,除了1和它本身以外不再有其他因数. 中心思想是,外循环所有的自然数,内循环折半查询,增加代码的速度,注意:从1开始,需要大于1,但是pl ...