Skip to content

Commit dcf15ea

Browse files
actions-useractions-user
committed
2 parents f1e303d + 97563a5 commit dcf15ea

16 files changed

+446
-459
lines changed

‎.env.local

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
2-
NEXT_PUBLIC_VERSION=4.5.0
2+
NEXT_PUBLIC_VERSION=4.5.1
33

44

55
# 可在此添加环境变量，去掉最左边的（# ）注释即可

‎components/Fireworks.js

+10-205
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,14 @@ const Fireworks = () => {
2121
'https://cdn.bootcdn.net/ajax/libs/animejs/3.2.1/anime.min.js',
2222
'js'
2323
).then(() => {
24-
if (window.anime) {
25-
createFireworks({
26-
config: { colors: fireworksColor },
27-
anime: window.anime
28-
})
29-
}
24+
loadExternalResource('/js/fireworks.js', 'js').then(() => {
25+
if (window.anime && window.createFireworks) {
26+
window.createFireworks({
27+
config: { colors: fireworksColor },
28+
anime: window.anime
29+
})
30+
}
31+
})
3032
})
3133
}
3234

@@ -37,204 +39,7 @@ const Fireworks = () => {
3739
}
3840
}, [])
3941

40-
return <canvas id='fireworks' className='fireworks'></canvas>
42+
return <></>
4143
}
42-
export default Fireworks
43-
44-
/**
45-
* 创建烟花
46-
* @param config
47-
*/
48-
function createFireworks({ config, anime }) {
49-
const defaultConfig = {
50-
colors: config?.colors,
51-
numberOfParticules: 20,
52-
orbitRadius: {
53-
min: 50,
54-
max: 100
55-
},
56-
circleRadius: {
57-
min: 10,
58-
max: 20
59-
},
60-
diffuseRadius: {
61-
min: 50,
62-
max: 100
63-
},
64-
animeDuration: {
65-
min: 900,
66-
max: 1500
67-
}
68-
}
69-
config = Object.assign(defaultConfig, config)
70-
71-
let pointerX = 0
72-
let pointerY = 0
73-
74-
// sky blue
75-
const colors = config.colors
76-
77-
const canvasEl = document.querySelector('.fireworks')
78-
const ctx = canvasEl.getContext('2d')
79-
80-
/**
81-
* 设置画布尺寸
82-
*/
83-
function setCanvasSize(canvasEl) {
84-
canvasEl.width = window.innerWidth
85-
canvasEl.height = window.innerHeight
86-
canvasEl.style.width = `${window.innerWidth}px`
87-
canvasEl.style.height = `${window.innerHeight}px`
88-
}
89-
90-
/**
91-
* update pointer
92-
* @param {TouchEvent} e
93-
*/
94-
function updateCoords(e) {
95-
pointerX =
96-
e.clientX ||
97-
(e.touches[0] ? e.touches[0].clientX : e.changedTouches[0].clientX)
98-
pointerY =
99-
e.clientY ||
100-
(e.touches[0] ? e.touches[0].clientY : e.changedTouches[0].clientY)
101-
}
102-
103-
function setParticuleDirection(p) {
104-
const angle = (anime.random(0, 360) * Math.PI) / 180
105-
const value = anime.random(
106-
config.diffuseRadius.min,
107-
config.diffuseRadius.max
108-
)
109-
const radius = [-1, 1][anime.random(0, 1)] * value
110-
return {
111-
x: p.x + radius * Math.cos(angle),
112-
y: p.y + radius * Math.sin(angle)
113-
}
114-
}
115-
116-
/**
117-
* 在指定位置创建粒子
118-
* @param {number} x
119-
* @param {number} y
120-
* @returns
121-
*/
122-
function createParticule(x, y) {
123-
const p = {
124-
x,
125-
y,
126-
color: `rgba(${colors[anime.random(0, colors.length - 1)]},${anime.random(
127-
0.2,
128-
0.8
129-
)})`,
130-
radius: anime.random(config.circleRadius.min, config.circleRadius.max),
131-
endPos: null,
132-
draw() {}
133-
}
134-
p.endPos = setParticuleDirection(p)
135-
p.draw = function () {
136-
ctx.beginPath()
137-
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
138-
ctx.fillStyle = p.color
139-
ctx.fill()
140-
}
141-
return p
142-
}
14344

144-
function createCircle(x, y) {
145-
const p = {
146-
x,
147-
y,
148-
color: '#000',
149-
radius: 0.1,
150-
alpha: 0.5,
151-
lineWidth: 6,
152-
draw() {}
153-
}
154-
p.draw = function () {
155-
ctx.globalAlpha = p.alpha
156-
ctx.beginPath()
157-
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
158-
ctx.lineWidth = p.lineWidth
159-
ctx.strokeStyle = p.color
160-
ctx.stroke()
161-
ctx.globalAlpha = 1
162-
}
163-
return p
164-
}
165-
166-
function renderParticule(anim) {
167-
for (let i = 0; i < anim.animatables.length; i++) {
168-
anim.animatables[i].target.draw()
169-
}
170-
}
171-
172-
function animateParticules(x, y) {
173-
const circle = createCircle(x, y)
174-
const particules = []
175-
for (let i = 0; i < config.numberOfParticules; i++) {
176-
particules.push(createParticule(x, y))
177-
}
178-
179-
anime
180-
.timeline()
181-
.add({
182-
targets: particules,
183-
x(p) {
184-
return p.endPos.x
185-
},
186-
y(p) {
187-
return p.endPos.y
188-
},
189-
radius: 0.1,
190-
duration: anime.random(
191-
config.animeDuration.min,
192-
config.animeDuration.max
193-
),
194-
easing: 'easeOutExpo',
195-
update: renderParticule
196-
})
197-
.add(
198-
{
199-
targets: circle,
200-
radius: anime.random(config.orbitRadius.min, config.orbitRadius.max),
201-
lineWidth: 0,
202-
alpha: {
203-
value: 0,
204-
easing: 'linear',
205-
duration: anime.random(600, 800)
206-
},
207-
duration: anime.random(1200, 1800),
208-
easing: 'easeOutExpo',
209-
update: renderParticule
210-
},
211-
0
212-
)
213-
}
214-
215-
const render = anime({
216-
duration: Infinity,
217-
update: () => {
218-
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
219-
}
220-
})
221-
222-
document.addEventListener(
223-
'mousedown',
224-
e => {
225-
render.play()
226-
updateCoords(e)
227-
animateParticules(pointerX, pointerY)
228-
},
229-
false
230-
)
231-
232-
setCanvasSize(canvasEl)
233-
window.addEventListener(
234-
'resize',
235-
() => {
236-
setCanvasSize(canvasEl)
237-
},
238-
false
239-
)
240-
}
45+
export default Fireworks

‎components/MouseFollow.js

+1-6
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,7 @@ const MOUSE_FOLLOW = () => {
1313

1414
useEffect(() => {
1515
loadExternalResource('/js/mouse-follow.js', 'js').then(url => {
16-
if (window.createMouseCanvas) {
17-
window.createMouseCanvas()({
18-
type,
19-
color
20-
})
21-
}
16+
window.createMouseCanvas && window.createMouseCanvas()({ type, color })
2217
})
2318
}, [])
2419

‎components/Nest.js

+6-116
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,14 @@
1-
/* eslint-disable */
21
import { useEffect } from 'react'
3-
const id = 'canvasNestCreated'
4-
const Nest = () => {
5-
const destroyNest = ()=>{
6-
const nest = document.getElementById(id)
7-
if(nest && nest.parentNode){
8-
nest.parentNode.removeChild(nest)
9-
}
10-
}
2+
import { loadExternalResource } from '@/lib/utils'
113

4+
const Nest = () => {
125
useEffect(() => {
13-
createNest()
14-
return () => destroyNest()
6+
loadExternalResource('/js/nest.js', 'js').then(url => {
7+
window.createNest && window.createNest()
8+
})
9+
return () => window.destroyNest && window.destroyNest()
1510
}, [])
1611
return <></>
1712
}
1813

1914
export default Nest
20-
21-
/**
22-
* 创建连接点
23-
* @param config
24-
*/
25-
function createNest() {
26-
const e = document.getElementById('__next')
27-
if(!e) return
28-
function n(e, n, t) {
29-
return e.getAttribute(n) || t
30-
}
31-
function t() {
32-
;(u = i.width =
33-
window.innerWidth ||
34-
document.documentElement.clientWidth ||
35-
document.body.clientWidth),
36-
(d = i.height =
37-
window.innerHeight ||
38-
document.documentElement.clientHeight ||
39-
document.body.clientHeight)
40-
}
41-
function o() {
42-
c.clearRect(0, 0, u, d)
43-
const e = [s].concat(x)
44-
let n, t, i, l, r, w
45-
x.forEach(function (o) {
46-
for (
47-
o.x += o.xa,
48-
o.y += o.ya,
49-
o.xa *= o.x > u || o.x < 0 ? -1 : 1,
50-
o.ya *= o.y > d || o.y < 0 ? -1 : 1,
51-
c.fillRect(o.x - 0.5, o.y - 0.5, 1, 1),
52-
t = 0;
53-
t < e.length;
54-
t++
55-
)
56-
(n = e[t]),
57-
o !== n &&
58-
null !== n.x &&
59-
null !== n.y &&
60-
((l = o.x - n.x),
61-
(r = o.y - n.y),
62-
(w = l * l + r * r),
63-
w < n.max &&
64-
(n === s &&
65-
w >= n.max / 2 &&
66-
((o.x -= 0.03 * l), (o.y -= 0.03 * r)),
67-
(i = (n.max - w) / n.max),
68-
c.beginPath(),
69-
(c.lineWidth = i / 2),
70-
(c.strokeStyle = 'rgba(' + a.c + ',' + (i + 0.2) + ')'),
71-
c.moveTo(o.x, o.y),
72-
c.lineTo(n.x, n.y),
73-
c.stroke()))
74-
e.splice(e.indexOf(o), 1)
75-
}),
76-
m(o)
77-
}
78-
var i = document.createElement('canvas')
79-
i.id = id
80-
var a = (function () {
81-
const t = e
82-
return {
83-
z: n(t, 'zIndex', 0),
84-
o: n(t, 'opacity', 0.7),
85-
c: n(t, 'color', '0,0,0'),
86-
n: n(t, 'count', 99)
87-
}
88-
})(),
89-
c = i.getContext('2d')
90-
let u, d
91-
var m =
92-
window.requestAnimationFrame ||
93-
window.webkitRequestAnimationFrame ||
94-
window.mozRequestAnimationFrame ||
95-
window.oRequestAnimationFrame ||
96-
window.msRequestAnimationFrame ||
97-
function (e) {
98-
window.setTimeout(e, 1e3 / 45)
99-
}
100-
const l = Math.random
101-
var r,
102-
s = { x: null, y: null, max: 2e4 }
103-
;(i.style.cssText =
104-
'position:fixed;top:0;left:0;pointer-events:none;z-index:' + a.z + ';opacity:' + a.o),
105-
(r = 'body'), e.appendChild(i),
106-
t(),
107-
(window.onresize = t),
108-
(window.onmousemove = function (e) {
109-
;(e = e || window.event), (s.x = e.clientX), (s.y = e.clientY)
110-
}),
111-
(window.onmouseout = function () {
112-
;(s.x = null), (s.y = null)
113-
})
114-
for (var x = [], w = 0; a.n > w; w++) {
115-
const e = l() * u,
116-
n = l() * d,
117-
t = 2 * l() - 1,
118-
o = 2 * l() - 1
119-
x.push({ x: e, y: n, xa: t, ya: o, max: 6e3 })
120-
}
121-
setTimeout(function () {
122-
o()
123-
}, 100)
124-
}

0 commit comments

Comments
 (0)