aleks/hexo-theme-ayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨 style: code format

Browse Source
This commit is contained in:
shenyu 2021-07-23 13:45:50 +08:00
parent e0f4461fe5
commit 219bb6db37
2 changed files with 272 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
source/js/clickBoom1.js
View File

@ -18,134 +18,134 @@ let pointerX = 0;
let pointerY = 0; let pointerY = 0;
let tap = let tap =
"ontouchstart" in window || navigator.msMaxTouchPoints "ontouchstart" in window || navigator.msMaxTouchPoints
? "touchstart" ? "touchstart"
: "mousedown"; : "mousedown";
// sea blue // sea blue
let colors = ["127, 180, 226", "157, 209, 243", "204, 229, 255"]; let colors = ["127, 180, 226", "157, 209, 243", "204, 229, 255"];
function setCanvasSize() { function setCanvasSize() {
canvasEl.width = window.innerWidth; canvasEl.width = window.innerWidth;
canvasEl.height = window.innerHeight; canvasEl.height = window.innerHeight;
canvasEl.style.width = window.innerWidth + "px"; canvasEl.style.width = window.innerWidth + "px";
canvasEl.style.height = window.innerHeight + "px"; canvasEl.style.height = window.innerHeight + "px";
} }
function updateCoords(e) { function updateCoords(e) {
pointerX = e.clientX || e.touches[0].clientX; pointerX = e.clientX || e.touches[0].clientX;
pointerY = e.clientY || e.touches[0].clientY; pointerY = e.clientY || e.touches[0].clientY;
} }
function setParticuleDirection(p) { function setParticuleDirection(p) {
let angle = (anime.random(0, 360) * Math.PI) / 180; let angle = (anime.random(0, 360) * Math.PI) / 180;
let value = anime.random(minDiffuseRadius, maxDiffuseRadius); let value = anime.random(minDiffuseRadius, maxDiffuseRadius);
let radius = [-1, 1][anime.random(0, 1)] * value; let radius = [-1, 1][anime.random(0, 1)] * value;
return { return {
x: p.x + radius * Math.cos(angle), x: p.x + radius * Math.cos(angle),
y: p.y + radius * Math.sin(angle) y: p.y + radius * Math.sin(angle),
}; };
} }
function createParticule(x, y) { function createParticule(x, y) {
let p = {}; let p = {};
p.x = x; p.x = x;
p.y = y; p.y = y;
p.color = p.color =
"rgba(" + "rgba(" +
colors[anime.random(0, colors.length - 1)] + colors[anime.random(0, colors.length - 1)] +
"," + "," +
anime.random(0.2, 0.8) + anime.random(0.2, 0.8) +
")"; ")";
p.radius = anime.random(minCircleRadius, maxCircleRadius); p.radius = anime.random(minCircleRadius, maxCircleRadius);
p.endPos = setParticuleDirection(p); p.endPos = setParticuleDirection(p);
p.draw = function () { p.draw = function () {
ctx.beginPath(); ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true); ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
ctx.fillStyle = p.color; ctx.fillStyle = p.color;
ctx.fill(); ctx.fill();
}; };
return p; return p;
} }
function createCircle(x, y) { function createCircle(x, y) {
let p = {}; let p = {};
p.x = x; p.x = x;
p.y = y; p.y = y;
p.color = "#000"; p.color = "#000";
p.radius = 0.1; p.radius = 0.1;
p.alpha = 0.5; p.alpha = 0.5;
p.lineWidth = 6; p.lineWidth = 6;
p.draw = function () { p.draw = function () {
ctx.globalAlpha = p.alpha; ctx.globalAlpha = p.alpha;
ctx.beginPath(); ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true); ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
ctx.lineWidth = p.lineWidth; ctx.lineWidth = p.lineWidth;
ctx.strokeStyle = p.color; ctx.strokeStyle = p.color;
ctx.stroke(); ctx.stroke();
ctx.globalAlpha = 1; ctx.globalAlpha = 1;
}; };
return p; return p;
} }
function renderParticule(anim) { function renderParticule(anim) {
for (let i = 0; i < anim.animatables.length; i++) { for (let i = 0; i < anim.animatables.length; i++) {
anim.animatables[i].target.draw(); anim.animatables[i].target.draw();
} }
} }
function animateParticules(x, y) { function animateParticules(x, y) {
let circle = createCircle(x, y); let circle = createCircle(x, y);
let particules = []; let particules = [];
for (let i = 0; i < numberOfParticules; i++) { for (let i = 0; i < numberOfParticules; i++) {
particules.push(createParticule(x, y)); particules.push(createParticule(x, y));
} }
anime anime
.timeline() .timeline()
.add({ .add({
targets: particules, targets: particules,
x: function (p) { x: function (p) {
return p.endPos.x; return p.endPos.x;
}, },
y: function (p) { y: function (p) {
return p.endPos.y; return p.endPos.y;
}, },
radius: 0.1, radius: 0.1,
duration: anime.random(minAnimeDuration, maxAnimeDuration), duration: anime.random(minAnimeDuration, maxAnimeDuration),
easing: "easeOutExpo", easing: "easeOutExpo",
update: renderParticule update: renderParticule,
}) })
.add({ .add({
targets: circle, targets: circle,
radius: anime.random(minOrbitRadius, maxOrbitRadius), radius: anime.random(minOrbitRadius, maxOrbitRadius),
lineWidth: 0, lineWidth: 0,
alpha: { alpha: {
value: 0, value: 0,
easing: "linear", easing: "linear",
duration: anime.random(600, 800) duration: anime.random(600, 800),
}, },
duration: anime.random(1200, 1800), duration: anime.random(1200, 1800),
easing: "easeOutExpo", easing: "easeOutExpo",
update: renderParticule, update: renderParticule,
offset: 0 offset: 0,
}); });
} }
let render = anime({ let render = anime({
duration: Infinity, duration: Infinity,
update: function () { update: function () {
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height); ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
} },
}); });
document.addEventListener( document.addEventListener(
tap, tap,
function (e) { function (e) {
render.play(); render.play();
updateCoords(e); updateCoords(e);
animateParticules(pointerX, pointerY); animateParticules(pointerX, pointerY);
}, },
false false
); );
setCanvasSize(); setCanvasSize();

302
source/js/clickBoom2.js
View File

@ -1,154 +1,180 @@
class Circle { class Circle {
constructor({ origin, speed, color, angle, context }) { constructor({ origin, speed, color, angle, context }) {
this.origin = origin this.origin = origin;
this.position = { ...this.origin } this.position = { ...this.origin };
this.color = color this.color = color;
this.speed = speed this.speed = speed;
this.angle = angle this.angle = angle;
this.context = context this.context = context;
this.renderCount = 0 this.renderCount = 0;
} }
draw() { draw() {
this.context.fillStyle = this.color this.context.fillStyle = this.color;
this.context.beginPath() this.context.beginPath();
this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2) this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2);
this.context.fill() this.context.fill();
} }
move() { move() {
this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x this.position.x = Math.sin(this.angle) * this.speed + this.position.x;
this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3) this.position.y =
this.renderCount++ Math.cos(this.angle) * this.speed +
this.position.y +
this.renderCount * 0.3;
this.renderCount++;
}
}
class Boom {
constructor({ origin, context, circleCount = 10, area }) {
this.origin = origin;
this.context = context;
this.circleCount = circleCount;
this.area = area;
this.stop = false;
this.circles = [];
}
randomArray(range) {
const length = range.length;
const randomIndex = Math.floor(length * Math.random());
return range[randomIndex];
}
randomColor() {
const range = ["8", "9", "A", "B", "C", "D", "E", "F"];
return (
"#" +
this.randomArray(range) +
this.randomArray(range) +
this.randomArray(range) +
this.randomArray(range) +
this.randomArray(range) +
this.randomArray(range)
);
}
randomRange(start, end) {
return (end - start) * Math.random() + start;
}
init() {
for (let i = 0; i < this.circleCount; i++) {
const circle = new Circle({
context: this.context,
origin: this.origin,
color: this.randomColor(),
angle: this.randomRange(Math.PI - 1, Math.PI + 1),
speed: this.randomRange(1, 6),
});
this.circles.push(circle);
} }
} }
class Boom { move() {
constructor ({ origin, context, circleCount = 10, area }) { this.circles.forEach((circle, index) => {
this.origin = origin if (
this.context = context circle.position.x > this.area.width ||
this.circleCount = circleCount circle.position.y > this.area.height
this.area = area ) {
this.stop = false return this.circles.splice(index, 1);
this.circles = []
}
randomArray(range) {
const length = range.length
const randomIndex = Math.floor(length * Math.random())
return range[randomIndex]
}
randomColor() {
const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
}
randomRange(start, end) {
return (end - start) * Math.random() + start
}
init() {
for(let i = 0; i < this.circleCount; i++) {
const circle = new Circle({
context: this.context,
origin: this.origin,
color: this.randomColor(),
angle: this.randomRange(Math.PI - 1, Math.PI + 1),
speed: this.randomRange(1, 6)
})
this.circles.push(circle)
} }
} circle.move();
});
move() { if (this.circles.length == 0) {
this.circles.forEach((circle, index) => { this.stop = true;
if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
return this.circles.splice(index, 1)
}
circle.move()
})
if (this.circles.length == 0) {
this.stop = true
}
}
draw() {
this.circles.forEach(circle => circle.draw())
} }
} }
class CursorSpecialEffects { draw() {
constructor() { this.circles.forEach((circle) => circle.draw());
this.computerCanvas = document.createElement('canvas') }
this.renderCanvas = document.createElement('canvas') }
this.computerContext = this.computerCanvas.getContext('2d') class CursorSpecialEffects {
this.renderContext = this.renderCanvas.getContext('2d') constructor() {
this.computerCanvas = document.createElement("canvas");
this.renderCanvas = document.createElement("canvas");
this.globalWidth = window.innerWidth this.computerContext = this.computerCanvas.getContext("2d");
this.globalHeight = window.innerHeight this.renderContext = this.renderCanvas.getContext("2d");
this.booms = [] this.globalWidth = window.innerWidth;
this.running = false this.globalHeight = window.innerHeight;
}
handleMouseDown(e) { this.booms = [];
const boom = new Boom({ this.running = false;
origin: { x: e.clientX, y: e.clientY },
context: this.computerContext,
area: {
width: this.globalWidth,
height: this.globalHeight
}
})
boom.init()
this.booms.push(boom)
this.running || this.run()
}
handlePageHide() {
this.booms = []
this.running = false
}
init() {
const style = this.renderCanvas.style
style.position = 'fixed'
style.top = style.left = 0
style.zIndex = '99999'
style.pointerEvents = 'none'
style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight
document.body.append(this.renderCanvas)
window.addEventListener('mousedown', this.handleMouseDown.bind(this))
window.addEventListener('pagehide', this.handlePageHide.bind(this))
}
run() {
this.running = true
if (this.booms.length == 0) {
return this.running = false
}
requestAnimationFrame(this.run.bind(this))
this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
this.booms.forEach((boom, index) => {
if (boom.stop) {
return this.booms.splice(index, 1)
}
boom.move()
boom.draw()
})
this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
}
} }
const cursorSpecialEffects = new CursorSpecialEffects() handleMouseDown(e) {
cursorSpecialEffects.init() const boom = new Boom({
origin: { x: e.clientX, y: e.clientY },
context: this.computerContext,
area: {
width: this.globalWidth,
height: this.globalHeight,
},
});
boom.init();
this.booms.push(boom);
this.running || this.run();
}
handlePageHide() {
this.booms = [];
this.running = false;
}
init() {
const style = this.renderCanvas.style;
style.position = "fixed";
style.top = style.left = 0;
style.zIndex = "99999";
style.pointerEvents = "none";
style.width =
this.renderCanvas.width =
this.computerCanvas.width =
this.globalWidth;
style.height =
this.renderCanvas.height =
this.computerCanvas.height =
this.globalHeight;
document.body.append(this.renderCanvas);
window.addEventListener("mousedown", this.handleMouseDown.bind(this));
window.addEventListener("pagehide", this.handlePageHide.bind(this));
}
run() {
this.running = true;
if (this.booms.length == 0) {
return (this.running = false);
}
requestAnimationFrame(this.run.bind(this));
this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight);
this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight);
this.booms.forEach((boom, index) => {
if (boom.stop) {
return this.booms.splice(index, 1);
}
boom.move();
boom.draw();
});
this.renderContext.drawImage(
this.computerCanvas,
0,
0,
this.globalWidth,
this.globalHeight
);
}
}
const cursorSpecialEffects = new CursorSpecialEffects();
cursorSpecialEffects.init();