主要想法:
鼠标点击事件触发圆点出现在鼠标处
圆点大小,颜色,数量随机
有一个小白圈做为轨迹,不断改变半径变大变淡消失
圆点向外移动,自身变小,消失。随着移动的距离远,移动速度跟着变
需要处理的是,从鼠标点击处可以确定圆点的x,y轴,但是动去哪,怎么动是一个问题,
所以先确定圆点的目标坐标,再从圆点的原始坐标(即鼠标点击处)向目标坐标移动,并且x,y 成比例 去移动才不会在x,y移动距离不相等的情况下 不平衡
随机生成圆点目标坐标的函数代码:
let endpos = (x, y) => {
let angle = random(0, 360) * Math.PI / 180,
value = random(20, 150),
radius = [-1, 1][random(0, 1)] * value;
return {
x: x + radius * Math.cos(angle),
y: y + radius * Math.sin(angle)
}
}
因为需要大量的随机数,所以封装一个生成随机数函数
let random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
圆点的移动函数,我们需要的移动是从原始坐标向目标坐标由快而慢。
生成比例分成3段。那就是原始坐标到第一段坐标为第一段,第一段坐标到第二段坐标为第二段,第二段坐标到目标坐标为第三段。如果当前坐标是处于第一段内,则速度越快,以此类推
现在两种情况,一种是目标坐标大于原始坐标,那么,第一段就为最接近原始坐标的那一段(Math.max(current, ff) == current ? (Math.max(current, mm) == current ? s : m) : f)
,第二种情况是目标坐标小于原始坐标,那么就反过来,第一段为离原始坐标最远的那一段。
//根据不同距离段设置前行的步伐,分为3个阶段,离出发点近的那一段为速度最快,中间为速度一般,最远为速度最慢
//区分目标点小于出发点的情况
//ratio为两点之间的距离的行走比例,比例数值越大,行走越慢
moveFun(start, end, current) {
let s = random(26, 35),
m = random(20, 25),
f = random(15, 20),
ff = start.x + ~~((end.x - start.x) / 3),
mm = ff + ~~((end.x - start.x) / 3),
ratio = end.x >= start.x ? (Math.max(current, ff) == current ? (Math.max(current, mm) == current ? s : m) : f) : (Math.max(current, ff) == current ? f : (Math.max(current, mm) == current ? m : s)),
mp = {
x: end.x - start.x,
y: end.y - start.y
};
return {
x: Math.abs(mp.x / ratio),
y: Math.abs(mp.y / ratio)
}
}
每一个小圆点做为一个个体,自带移动函数,和移动的目标坐标。每次Animation时,圆点进行重绘更新最新的坐标
小圆点的代码:
class Circle {
constructor(x, y) {
this.r = random(9, 13)
this.opos = {}
this.x = this.opos.x = x
this.y = this.opos.y = y
this.colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']
this.color = this.colors[random(0, this.colors.length)];
this.tpos = endpos(x, y)
}
creatCircle(ctx) {
ctx.beginPath()
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
ctx.closePath()
ctx.fillStyle = this.color
ctx.fill()
}
//根据不同距离段设置前行的步伐,分为3个阶段,离出发点近的那一段为速度最快,中间为速度一般,最远为速度最慢
//区分目标点小于出发点的情况
//ratio为两点之间的距离的行走比例,比例数值越大,行走越慢
moveFun(start, end, current) {
let s = random(26, 35),
m = random(20, 25),
f = random(15, 20),
ff = start.x + ~~((end.x - start.x) / 3),
mm = ff + ~~((end.x - start.x) / 3),
ratio = end.x >= start.x ? (Math.max(current, ff) == current ? (Math.max(current, mm) == current ? s : m) : f) : (Math.max(current, ff) == current ? f : (Math.max(current, mm) == current ? m : s)),
mp = {
x: end.x - start.x,
y: end.y - start.y
};
return {
x: Math.abs(mp.x / ratio),
y: Math.abs(mp.y / ratio)
}
}
//根据计算出来的移动值去移动
//如果目标坐标大于原始坐标则向右移动,最大不能超过目标坐标,反之向左移动最小不能小于目标坐标
move() {
var movepos = this.moveFun(this.opos, this.tpos, this.x);
this.x = (this.opos.x > this.tpos.x) ? Math.max(this.x - movepos.x, this.tpos.x) : Math.min(this.x + movepos.x, this.tpos.x)
this.y = this.opos.y > this.tpos.y ? Math.max(this.y - movepos.y, this.tpos.y) : Math.min(this.y + movepos.y, this.tpos.y)
this.r = Math.max(Math.abs((this.r - Math.random() / 1.2).toFixed(2)), 0)
}
}
大圆则是从鼠标点击处创建的一个圆,并不断改变其半径向外扩展,并且越来越透明,当它已经很大并且很透明时意味着我们的动画要结束了,所以以这个为标准,停止动画,并且清空屏幕
大圆代码:
class BigCircle {
constructor(x, y) {
this.bR = random(16, 32)
this.overR = random(60, 100)
this.x = x
this.y = y
this.op = 1
}
creatBigCircle(ctx) {
ctx.beginPath()
ctx.arc(this.x, this.y, this.bR, 0, 2 * Math.PI)
ctx.closePath()
ctx.strokeStyle = 'rgba(128, 128, 128, ' + this.op + ')'
ctx.stroke()
}
changeR() {
this.bR = Math.min(this.bR += random(1, 4), this.overR);
this.op = Math.max((this.op - Math.random() / 12).toFixed(2), 0)
}
//检查是否运行完毕,以大圆为标准清空屏幕
complete() {
return this.bR >= this.overR && this.op <= 0;
}
}
全部代码:
//canvas鼠标点击烟花特效
let endpos = (x, y) => {
let angle = random(0, 360) * Math.PI / 180,
value = random(20, 150),
radius = [-1, 1][random(0, 1)] * value;
return {
x: x + radius * Math.cos(angle),
y: y + radius * Math.sin(angle)
}
}
let random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
class Circle {
constructor(x, y) {
this.r = random(9, 13)
this.opos = {}
this.x = this.opos.x = x
this.y = this.opos.y = y
this.colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']
this.color = this.colors[random(0, this.colors.length)];
this.tpos = endpos(x, y)
}
creatCircle(ctx) {
ctx.beginPath()
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
ctx.closePath()
ctx.fillStyle = this.color
ctx.fill()
}
//根据不同距离段设置前行的步伐,分为3个阶段,离出发点近的那一段为速度最快,中间为速度一般,最远为速度最慢
//区分目标点小于出发点的情况
//ratio为两点之间的距离的行走比例,比例数值越大,行走越慢
moveFun(start, end, current) {
let s = random(26, 35),
m = random(20, 25),
f = random(15, 20),
ff = start.x + ~~((end.x - start.x) / 3),
mm = ff + ~~((end.x - start.x) / 3),
ratio = end.x >= start.x ? (Math.max(current, ff) == current ? (Math.max(current, mm) == current ? s : m) : f) : (Math.max(current, ff) == current ? f : (Math.max(current, mm) == current ? m : s)),
mp = {
x: end.x - start.x,
y: end.y - start.y
};
return {
x: Math.abs(mp.x / ratio),
y: Math.abs(mp.y / ratio)
}
}
//根据计算出来的移动值去移动
//如果目标坐标大于原始坐标则向右移动,最大不能超过目标坐标,反之向左移动最小不能小于目标坐标
move() {
var movepos = this.moveFun(this.opos, this.tpos, this.x);
this.x = (this.opos.x > this.tpos.x) ? Math.max(this.x - movepos.x, this.tpos.x) : Math.min(this.x + movepos.x, this.tpos.x)
this.y = this.opos.y > this.tpos.y ? Math.max(this.y - movepos.y, this.tpos.y) : Math.min(this.y + movepos.y, this.tpos.y)
this.r = Math.max(Math.abs((this.r - Math.random() / 1.2).toFixed(2)), 0)
}
}
class BigCircle {
constructor(x, y) {
this.bR = random(16, 32)
this.overR = random(60, 100)
this.x = x
this.y = y
this.op = 1
}
creatBigCircle(ctx) {
ctx.beginPath()
ctx.arc(this.x, this.y, this.bR, 0, 2 * Math.PI)
ctx.closePath()
ctx.strokeStyle = 'rgba(128, 128, 128, ' + this.op + ')'
ctx.stroke()
}
changeR() {
this.bR = Math.min(this.bR += random(1, 4), this.overR);
this.op = Math.max((this.op - Math.random() / 12).toFixed(2), 0)
}
//检查是否运行完毕,以大圆为标准清空屏幕
complete() {
return this.bR >= this.overR && this.op <= 0;
}
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.clearRequestTimeout = window.cancelAnimationFrame || window.mozCancelRequestAnimationFrame || window.webkitCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame;
let c = document.getElementById("fireworks"),
w = c.width = c.offsetWidth,
h = c.height = c.offsetHeight,
ctx = c.getContext("2d"),
nums = 40,
circles = [],
bCircle = null,
animationId = false;
let int = function(x, y) {
circles = []
if (animationId) clearRequestTimeout(animationId)
for (let i = nums; i-- > 0;) {
circles.push(new Circle(x, y))
}
bCircle = new BigCircle(x, y)
creat()
}
let creat = function() {
ctx.clearRect(0, 0, w, h);
circles.forEach(function(v) {
v.move();
v.creatCircle(ctx)
})
bCircle.changeR()
bCircle.creatBigCircle(ctx)
animationId = requestAnimationFrame(creat)
if (bCircle.complete()) {
//以大圆为标准,清空屏幕停止动画
ctx.clearRect(0, 0, w, h);
clearRequestTimeout(animationId)
}
}
c.onclick = function(e) {
e = e || window.event;
int(e.clientX, e.clientY)
}
html为
<canvas id="fireworks" width="500px" height="500px"></canvas>