mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-06-08 15:10:37 +00:00
@@ -245,6 +245,13 @@ const BLOG = {
|
|||||||
'251, 243, 140'
|
'251, 243, 140'
|
||||||
],
|
],
|
||||||
|
|
||||||
|
// 鼠标跟随特效
|
||||||
|
MOUSE_FOLLOW: process.env.NEXT_PUBLIC_MOUSE_FOLLOW || true, // 开关
|
||||||
|
// 这两个只有在鼠标跟随特效开启时才生效
|
||||||
|
// 鼠标类型 1:路劲散点 2:下降散点 3:上升散点 4:边缘向鼠标移动散点 5:跟踪转圈散点 6:路径线条 7:聚集散点 8:聚集网格 9:移动网格 10:上升粒子 11:转圈随机颜色粒子 12:圆锥放射跟随蓝色粒子
|
||||||
|
MOUSE_FOLLOW_EFFECT_TYPE: 11, // 1-12
|
||||||
|
MOUSE_FOLLOW_EFFECT_COLOR: '#ef672a', // 鼠标点击特效颜色 #xxxxxx 或者 rgba(r,g,b,a)
|
||||||
|
|
||||||
// 樱花飘落特效
|
// 樱花飘落特效
|
||||||
SAKURA: process.env.NEXT_PUBLIC_SAKURA || false, // 开关
|
SAKURA: process.env.NEXT_PUBLIC_SAKURA || false, // 开关
|
||||||
// 漂浮线段特效
|
// 漂浮线段特效
|
||||||
|
|||||||
@@ -23,6 +23,9 @@ const ThemeSwitch = dynamic(() => import('@/components/ThemeSwitch'), {
|
|||||||
const Fireworks = dynamic(() => import('@/components/Fireworks'), {
|
const Fireworks = dynamic(() => import('@/components/Fireworks'), {
|
||||||
ssr: false
|
ssr: false
|
||||||
})
|
})
|
||||||
|
const MouseFollow = dynamic(() => import('@/components/MouseFollow'), {
|
||||||
|
ssr: false
|
||||||
|
})
|
||||||
const Nest = dynamic(() => import('@/components/Nest'), { ssr: false })
|
const Nest = dynamic(() => import('@/components/Nest'), { ssr: false })
|
||||||
const FlutteringRibbon = dynamic(
|
const FlutteringRibbon = dynamic(
|
||||||
() => import('@/components/FlutteringRibbon'),
|
() => import('@/components/FlutteringRibbon'),
|
||||||
@@ -119,6 +122,7 @@ const ExternalPlugin = props => {
|
|||||||
const CLARITY_ID = siteConfig('CLARITY_ID')
|
const CLARITY_ID = siteConfig('CLARITY_ID')
|
||||||
const IMG_SHADOW = siteConfig('IMG_SHADOW')
|
const IMG_SHADOW = siteConfig('IMG_SHADOW')
|
||||||
const ANIMATE_CSS_URL = siteConfig('ANIMATE_CSS_URL')
|
const ANIMATE_CSS_URL = siteConfig('ANIMATE_CSS_URL')
|
||||||
|
const MOUSE_FOLLOW = siteConfig('MOUSE_FOLLOW')
|
||||||
|
|
||||||
// 自定义样式css和js引入
|
// 自定义样式css和js引入
|
||||||
if (isBrowser) {
|
if (isBrowser) {
|
||||||
@@ -172,7 +176,7 @@ const ExternalPlugin = props => {
|
|||||||
<>
|
<>
|
||||||
{/* 全局样式嵌入 */}
|
{/* 全局样式嵌入 */}
|
||||||
<GlobalStyle />
|
<GlobalStyle />
|
||||||
|
{MOUSE_FOLLOW && <MouseFollow />}
|
||||||
{THEME_SWITCH && <ThemeSwitch />}
|
{THEME_SWITCH && <ThemeSwitch />}
|
||||||
{DEBUG && <DebugPanel />}
|
{DEBUG && <DebugPanel />}
|
||||||
{ANALYTICS_ACKEE_TRACKER && <Ackee />}
|
{ANALYTICS_ACKEE_TRACKER && <Ackee />}
|
||||||
|
|||||||
27
components/MouseFollow.js
Normal file
27
components/MouseFollow.js
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import { useEffect } from 'react'
|
||||||
|
// import anime from 'animejs'
|
||||||
|
import { siteConfig } from '@/lib/config'
|
||||||
|
import { loadExternalResource } from '@/lib/utils'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 鼠标跟随特效
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
const MOUSE_FOLLOW = () => {
|
||||||
|
const type = siteConfig('MOUSE_FOLLOW_EFFECT_TYPE')
|
||||||
|
const color = siteConfig('MOUSE_FOLLOW_EFFECT_COLOR')
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadExternalResource('/js/mouse-follow.js', 'js').then(url => {
|
||||||
|
if (window.createMouseCanvas) {
|
||||||
|
window.createMouseCanvas()({
|
||||||
|
type,
|
||||||
|
color
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return <></>
|
||||||
|
}
|
||||||
|
export default MOUSE_FOLLOW
|
||||||
714
public/js/mouse-follow.js
Normal file
714
public/js/mouse-follow.js
Normal file
@@ -0,0 +1,714 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建鼠标特效
|
||||||
|
* @param options
|
||||||
|
*/
|
||||||
|
function createMouseCanvas() {
|
||||||
|
// 创建一个类
|
||||||
|
const _createClass = (function () {
|
||||||
|
function n(t, e) {
|
||||||
|
for (let i = 0; i < e.length; i++) {
|
||||||
|
const n = e[i]
|
||||||
|
;(n.enumerable = n.enumerable || !1),
|
||||||
|
(n.configurable = !0),
|
||||||
|
'value' in n && (n.writable = !0),
|
||||||
|
Object.defineProperty(t, n.key, n)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return function (t, e, i) {
|
||||||
|
return e && n(t.prototype, e), i && n(t, i), t
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
|
||||||
|
// 抛出一个类型错误(TypeError),指出类(或构造函数)不能被直接调用为函数,而应该使用 new 关键字来创建实例。
|
||||||
|
function _classCallCheck(t, e) {
|
||||||
|
if (!(t instanceof e))
|
||||||
|
throw new TypeError('Cannot call a class as a function')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 模拟 jquery 中的 offset 函数
|
||||||
|
function getOffset(element) {
|
||||||
|
const rect = element.getBoundingClientRect()
|
||||||
|
return {
|
||||||
|
top: rect.top + window.pageYOffset,
|
||||||
|
left: rect.left + window.pageXOffset
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 模拟 jquery 中的 extend 函数
|
||||||
|
function deepExtend(out) {
|
||||||
|
out = out || {}
|
||||||
|
for (let i = 1; i < arguments.length; i++) {
|
||||||
|
const obj = arguments[i]
|
||||||
|
if (!obj) continue
|
||||||
|
for (const key in obj) {
|
||||||
|
if (obj.hasOwnProperty(key)) {
|
||||||
|
if (
|
||||||
|
typeof obj[key] === 'object' &&
|
||||||
|
obj[key] !== null &&
|
||||||
|
!Array.isArray(obj[key])
|
||||||
|
) {
|
||||||
|
// 如果属性值是对象但不是数组,递归合并
|
||||||
|
out[key] = deepExtend(out[key], obj[key])
|
||||||
|
} else {
|
||||||
|
// 直接覆盖属性值
|
||||||
|
out[key] = obj[key]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return out
|
||||||
|
}
|
||||||
|
|
||||||
|
const e =
|
||||||
|
(_createClass(t, [
|
||||||
|
{
|
||||||
|
key: 'init',
|
||||||
|
value: function (t) {
|
||||||
|
// 这一段代码的目的是确保浏览器支持 requestAnimationFrame 和 cancelAnimationFrame 这两个函数
|
||||||
|
!(function () {
|
||||||
|
for (
|
||||||
|
var a = 0, t = ['webkit', 'moz'], e = 0;
|
||||||
|
e < t.length && !window.requestAnimationFrame;
|
||||||
|
++e
|
||||||
|
)
|
||||||
|
(window.requestAnimationFrame =
|
||||||
|
window[t[e] + 'RequestAnimationFrame']),
|
||||||
|
(window.cancelAnimationFrame =
|
||||||
|
window[t[e] + 'CancelAnimationFrame'] ||
|
||||||
|
window[t[e] + 'CancelRequestAnimationFrame'])
|
||||||
|
window.requestAnimationFrame ||
|
||||||
|
(window.requestAnimationFrame = function (t, e) {
|
||||||
|
const i = new Date().getTime()
|
||||||
|
const n = Math.max(0, 16.7 - (i - a))
|
||||||
|
const o = window.setTimeout(function () {
|
||||||
|
t(i + n)
|
||||||
|
}, n)
|
||||||
|
return (a = i + n), o
|
||||||
|
}),
|
||||||
|
window.cancelAnimationFrame ||
|
||||||
|
(window.cancelAnimationFrame = function (t) {
|
||||||
|
clearTimeout(t)
|
||||||
|
})
|
||||||
|
})()
|
||||||
|
|
||||||
|
// t 是要合并的对象
|
||||||
|
if (t) {
|
||||||
|
this.defaults = deepExtend(this.defaults, t)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建一个新的 canvas 元素
|
||||||
|
const canvas = document.createElement('canvas')
|
||||||
|
|
||||||
|
// 设置 canvas 的 id 和样式
|
||||||
|
canvas.id = 'vixcityCanvas'
|
||||||
|
canvas.style.position = 'fixed'
|
||||||
|
canvas.style.left = '0px'
|
||||||
|
canvas.style.top = '0px'
|
||||||
|
canvas.style.zIndex = '2147483647'
|
||||||
|
canvas.style.pointerEvents = 'none'
|
||||||
|
|
||||||
|
// 将 canvas 添加到 body 元素中
|
||||||
|
document.body.appendChild(canvas)
|
||||||
|
|
||||||
|
// 判断类型,并调用相应的绘画函数
|
||||||
|
const i = this.defaults.type
|
||||||
|
i >= 1 &&
|
||||||
|
i < 11 &&
|
||||||
|
this.mouseType1(this.defaults.type, this.defaults.color),
|
||||||
|
i == 11 && this.mouseType2(),
|
||||||
|
i == 12 && this.mouseType3()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'mouseType1',
|
||||||
|
value: function (type, color) {
|
||||||
|
let n
|
||||||
|
let o
|
||||||
|
let a
|
||||||
|
let h
|
||||||
|
const canvasDom = document.getElementById('vixcityCanvas')
|
||||||
|
// 获取 2D 渲染上下文
|
||||||
|
const ctx = canvasDom.getContext('2d')
|
||||||
|
const l = []
|
||||||
|
const c = {
|
||||||
|
n: 100,
|
||||||
|
c: 222,
|
||||||
|
bc: '#fff',
|
||||||
|
r: 0.9,
|
||||||
|
o: 0.05,
|
||||||
|
a: 1,
|
||||||
|
s: 20
|
||||||
|
}
|
||||||
|
let d = 0
|
||||||
|
let f = 0
|
||||||
|
let u = 0
|
||||||
|
let y = 0
|
||||||
|
let w = 0
|
||||||
|
let p = 0
|
||||||
|
let v = 0
|
||||||
|
g()
|
||||||
|
var getColor
|
||||||
|
let x = 360 * Math.random()
|
||||||
|
var getColor = color || 'hsl(' + x + ',100%,80%)'
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
g()
|
||||||
|
})
|
||||||
|
function g() {
|
||||||
|
;(n = window.innerWidth),
|
||||||
|
(o = window.innerHeight),
|
||||||
|
(canvasDom.width = n),
|
||||||
|
(canvasDom.height = o),
|
||||||
|
(a = n / 2),
|
||||||
|
(h = o / 2)
|
||||||
|
}
|
||||||
|
window.addEventListener('mousemove', function (t) {
|
||||||
|
;(a = t.pageX - getOffset(canvasDom).left),
|
||||||
|
(h = t.pageY - getOffset(canvasDom).top),
|
||||||
|
type == 4 &&
|
||||||
|
(Math.random() <= 0.5
|
||||||
|
? ((d = Math.random() <= 0.5 ? -10 : n + 10),
|
||||||
|
(f = Math.random() * o))
|
||||||
|
: ((f = Math.random() <= 0.5 ? -10 : o + 10),
|
||||||
|
(d = Math.random() * n)),
|
||||||
|
(u = 8 * (Math.random() - 0.5)),
|
||||||
|
(y = 8 * (Math.random() - 0.5))),
|
||||||
|
type == 1 || type == 2 || type == 3
|
||||||
|
? l.push({ x: a, y: h, r: c.r, o: 1, v: 0 })
|
||||||
|
: type == 4
|
||||||
|
? l.push({
|
||||||
|
x: a,
|
||||||
|
y: h,
|
||||||
|
r: c.r,
|
||||||
|
o: 1,
|
||||||
|
v: 0,
|
||||||
|
wx: d,
|
||||||
|
wy: f,
|
||||||
|
vx2: u,
|
||||||
|
vy2: y
|
||||||
|
})
|
||||||
|
: type == 6 &&
|
||||||
|
l.push({
|
||||||
|
x: a + 30 * (Math.random() - 0.5),
|
||||||
|
y: h + 30 * (Math.random() - 0.5),
|
||||||
|
o: 1,
|
||||||
|
wx: a,
|
||||||
|
wy: h
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
(function t() {
|
||||||
|
if (type == 1) {
|
||||||
|
ctx.clearRect(0, 0, n, o)
|
||||||
|
for (var e = 0; e < l.length; e++)
|
||||||
|
(ctx.globalAlpha = l[e].o),
|
||||||
|
(ctx.fillStyle = getColor),
|
||||||
|
ctx.beginPath(),
|
||||||
|
ctx.arc(l[e].x, l[e].y, l[e].r, 0, 2 * Math.PI),
|
||||||
|
ctx.closePath(),
|
||||||
|
ctx.fill(),
|
||||||
|
(l[e].r += c.r),
|
||||||
|
(l[e].o -= c.o),
|
||||||
|
l[e].o <= 0 && (l.splice(e, 1), e--)
|
||||||
|
} else if (type == 2)
|
||||||
|
for (ctx.clearRect(0, 0, n, o), e = 0; e < l.length; e++)
|
||||||
|
(ctx.globalAlpha = l[e].o),
|
||||||
|
(ctx.fillStyle = getColor),
|
||||||
|
ctx.beginPath(),
|
||||||
|
(l[e].r = 10),
|
||||||
|
(ctx.shadowBlur = 20),
|
||||||
|
(ctx.shadowColor = getColor),
|
||||||
|
ctx.arc(l[e].x, l[e].y, l[e].r, 0, 2 * Math.PI),
|
||||||
|
ctx.closePath(),
|
||||||
|
ctx.fill(),
|
||||||
|
(ctx.shadowBlur = 0),
|
||||||
|
(l[e].o -= c.o),
|
||||||
|
(l[e].v += c.a),
|
||||||
|
(l[e].y += l[e].v),
|
||||||
|
(l[e].y >= o + l[e].r || l[e].o <= 0) &&
|
||||||
|
(l.splice(e, 1), e--)
|
||||||
|
else if (type == 3)
|
||||||
|
for (
|
||||||
|
w += 5, ctx.clearRect(0, 0, n, o), e = 0;
|
||||||
|
e < l.length;
|
||||||
|
e++
|
||||||
|
)
|
||||||
|
(ctx.globalAlpha = l[e].o),
|
||||||
|
(ctx.fillStyle = getColor),
|
||||||
|
ctx.beginPath(),
|
||||||
|
(ctx.shadowBlur = 20),
|
||||||
|
(ctx.shadowColor = getColor),
|
||||||
|
(l[e].r = 20 * (1 - l[e].y / o)),
|
||||||
|
ctx.arc(l[e].x, l[e].y, l[e].r, 0, 2 * Math.PI),
|
||||||
|
ctx.closePath(),
|
||||||
|
ctx.fill(),
|
||||||
|
(ctx.shadowBlur = 0),
|
||||||
|
(l[e].o = l[e].y / o),
|
||||||
|
(l[e].v += c.a),
|
||||||
|
(l[e].y -= c.s),
|
||||||
|
(l[e].x += 10 * Math.cos((l[e].y + w) / 100)),
|
||||||
|
(l[e].y <= 0 - l[e].r || l[e].o <= 0) &&
|
||||||
|
(l.splice(e, 1), e--)
|
||||||
|
else if (type == 4)
|
||||||
|
for (ctx.clearRect(0, 0, n, o), e = 0; e < l.length; e++)
|
||||||
|
(ctx.globalAlpha = l[e].o),
|
||||||
|
(ctx.fillStyle = getColor),
|
||||||
|
ctx.beginPath(),
|
||||||
|
(ctx.shadowBlur = 20),
|
||||||
|
(ctx.shadowColor = getColor),
|
||||||
|
(l[e].vx2 += (a - l[e].wx) / 1e3),
|
||||||
|
(l[e].vy2 += (h - l[e].wy) / 1e3),
|
||||||
|
(l[e].wx += l[e].vx2),
|
||||||
|
(l[e].wy += l[e].vy2),
|
||||||
|
(l[e].o -= c.o / 2),
|
||||||
|
(l[e].r = 10),
|
||||||
|
ctx.arc(l[e].wx, l[e].wy, l[e].r, 0, 2 * Math.PI),
|
||||||
|
ctx.closePath(),
|
||||||
|
ctx.fill(),
|
||||||
|
(ctx.shadowBlur = 0),
|
||||||
|
l[e].o <= 0 && (l.splice(e, 1), e--)
|
||||||
|
else if (type == 5)
|
||||||
|
c.c || (m = 'hsl(' + (x += 0.1) + ',100%,80%)'),
|
||||||
|
ctx.clearRect(0, 0, n, o),
|
||||||
|
(p += 10),
|
||||||
|
(ctx.globalAlpha = 1),
|
||||||
|
(ctx.fillStyle = getColor),
|
||||||
|
(ctx.shadowBlur = 20),
|
||||||
|
(ctx.shadowColor = getColor),
|
||||||
|
ctx.beginPath(),
|
||||||
|
ctx.arc(
|
||||||
|
a + 50 * Math.cos((p * Math.PI) / 180),
|
||||||
|
h + 50 * Math.sin((p * Math.PI) / 180),
|
||||||
|
10,
|
||||||
|
0,
|
||||||
|
2 * Math.PI
|
||||||
|
),
|
||||||
|
ctx.closePath(),
|
||||||
|
ctx.fill(),
|
||||||
|
ctx.beginPath(),
|
||||||
|
ctx.arc(
|
||||||
|
a + 50 * Math.cos(((p + 180) * Math.PI) / 180),
|
||||||
|
h + 50 * Math.sin(((p + 180) * Math.PI) / 180),
|
||||||
|
10,
|
||||||
|
0,
|
||||||
|
2 * Math.PI
|
||||||
|
),
|
||||||
|
ctx.closePath(),
|
||||||
|
ctx.fill(),
|
||||||
|
ctx.beginPath(),
|
||||||
|
ctx.arc(
|
||||||
|
a + 50 * Math.cos(((p + 90) * Math.PI) / 180),
|
||||||
|
h + 50 * Math.sin(((p + 90) * Math.PI) / 180),
|
||||||
|
10,
|
||||||
|
0,
|
||||||
|
2 * Math.PI
|
||||||
|
),
|
||||||
|
ctx.closePath(),
|
||||||
|
ctx.fill(),
|
||||||
|
ctx.beginPath(),
|
||||||
|
ctx.arc(
|
||||||
|
a + 50 * Math.cos(((p + 270) * Math.PI) / 180),
|
||||||
|
h + 50 * Math.sin(((p + 270) * Math.PI) / 180),
|
||||||
|
10,
|
||||||
|
0,
|
||||||
|
2 * Math.PI
|
||||||
|
),
|
||||||
|
ctx.closePath(),
|
||||||
|
ctx.fill(),
|
||||||
|
(ctx.shadowBlur = 0)
|
||||||
|
else if (type == 6)
|
||||||
|
for (ctx.clearRect(0, 0, n, o), e = 0; e < l.length; e++)
|
||||||
|
(ctx.globalAlpha = l[e].o),
|
||||||
|
(ctx.strokeStyle = getColor),
|
||||||
|
ctx.beginPath(),
|
||||||
|
(ctx.lineWidth = 2),
|
||||||
|
ctx.moveTo(l[e].x, l[e].y),
|
||||||
|
ctx.lineTo(
|
||||||
|
(l[e].wx + l[e].x) / 2 + 20 * Math.random(),
|
||||||
|
(l[e].wy + l[e].y) / 2 + 20 * Math.random()
|
||||||
|
),
|
||||||
|
ctx.lineTo(l[e].wx, l[e].wy),
|
||||||
|
ctx.closePath(),
|
||||||
|
ctx.stroke(),
|
||||||
|
(l[e].o -= c.o),
|
||||||
|
l[e].o <= 0 && (l.splice(e, 1), e--)
|
||||||
|
else if (type == 7)
|
||||||
|
for (
|
||||||
|
ctx.clearRect(0, 0, n, o),
|
||||||
|
l.length < 2 * c.n &&
|
||||||
|
((v = 2 * Math.random() * Math.PI),
|
||||||
|
l.push({
|
||||||
|
x: a + 100 * (Math.random() - 0.5) * Math.cos(v),
|
||||||
|
y: h + 100 * (Math.random() - 0.5) * Math.cos(v),
|
||||||
|
o: 1,
|
||||||
|
h: v
|
||||||
|
})),
|
||||||
|
e = 0;
|
||||||
|
e < l.length;
|
||||||
|
e++
|
||||||
|
)
|
||||||
|
(ctx.globalAlpha = l[e].o),
|
||||||
|
(ctx.fillStyle = getColor),
|
||||||
|
ctx.beginPath(),
|
||||||
|
(l[e].x += (a - l[e].x) / 10),
|
||||||
|
(l[e].y += (h - l[e].y) / 10),
|
||||||
|
ctx.arc(l[e].x, l[e].y, 1, 0, 2 * Math.PI),
|
||||||
|
ctx.closePath(),
|
||||||
|
ctx.fill(),
|
||||||
|
(l[e].o -= c.o),
|
||||||
|
l[e].o <= 0 &&
|
||||||
|
((l[e].h = 2 * Math.random() * Math.PI),
|
||||||
|
(l[e].x =
|
||||||
|
a + 100 * (Math.random() - 0.5) * Math.cos(l[e].h)),
|
||||||
|
(l[e].y =
|
||||||
|
h + 100 * (Math.random() - 0.5) * Math.sin(l[e].h)),
|
||||||
|
(l[e].o = 1))
|
||||||
|
else if (type == 8)
|
||||||
|
for (
|
||||||
|
ctx.clearRect(0, 0, n, o),
|
||||||
|
ctx.fillStyle = getColor,
|
||||||
|
a % 4 == 0
|
||||||
|
? (a += 1)
|
||||||
|
: a % 4 == 2
|
||||||
|
? --a
|
||||||
|
: a % 4 == 3 && (a -= 2),
|
||||||
|
h % 4 == 0
|
||||||
|
? (h += 1)
|
||||||
|
: h % 4 == 2
|
||||||
|
? --h
|
||||||
|
: h % 4 == 3 && (h -= 2),
|
||||||
|
e = a - 60;
|
||||||
|
e < a + 60;
|
||||||
|
e += 4
|
||||||
|
)
|
||||||
|
for (let i = h - 60; i < h + 60; i += 4)
|
||||||
|
Math.sqrt(Math.pow(a - e, 2) + Math.pow(h - i, 2)) <= 60 &&
|
||||||
|
((ctx.globalAlpha =
|
||||||
|
1 -
|
||||||
|
Math.sqrt(Math.pow(a - e, 2) + Math.pow(h - i, 2)) /
|
||||||
|
60),
|
||||||
|
Math.random() < 0.2 && ctx.fillRect(e, i, 3, 3))
|
||||||
|
else if (type == 9)
|
||||||
|
for (
|
||||||
|
ctx.clearRect(0, 0, n, o),
|
||||||
|
ctx.fillStyle = getColor,
|
||||||
|
a % 4 == 0
|
||||||
|
? (a += 1)
|
||||||
|
: a % 4 == 2
|
||||||
|
? --a
|
||||||
|
: a % 4 == 3 && (a -= 2),
|
||||||
|
h % 4 == 0
|
||||||
|
? (h += 1)
|
||||||
|
: h % 4 == 2
|
||||||
|
? --h
|
||||||
|
: h % 4 == 3 && (h -= 2),
|
||||||
|
l.length < c.n &&
|
||||||
|
l.push({ x: a, y: h, xv: 0, yv: 0, o: 1 }),
|
||||||
|
e = 0;
|
||||||
|
e < l.length;
|
||||||
|
e++
|
||||||
|
)
|
||||||
|
l[e].xv == 0 && l[e].yv == 0
|
||||||
|
? Math.random() < 0.5
|
||||||
|
? Math.random() < 0.5
|
||||||
|
? (l[e].xv = 3)
|
||||||
|
: (l[e].xv = -3)
|
||||||
|
: Math.random() < 0.5
|
||||||
|
? (l[e].yv = 3)
|
||||||
|
: (l[e].yv = -3)
|
||||||
|
: l[e].xv == 0
|
||||||
|
? Math.random() < 0.66 &&
|
||||||
|
((l[e].yv = 0),
|
||||||
|
Math.random() < 0.5 ? (l[e].xv = 3) : (l[e].xv = -3))
|
||||||
|
: l[e].yv == 0 &&
|
||||||
|
Math.random() < 0.66 &&
|
||||||
|
((l[e].xv = 0),
|
||||||
|
Math.random() < 0.5 ? (l[e].yv = 3) : (l[e].yv = -3)),
|
||||||
|
(l[e].o -= c.o / 2),
|
||||||
|
(ctx.globalAlpha = l[e].o),
|
||||||
|
(l[e].x += l[e].xv),
|
||||||
|
(l[e].y += l[e].yv),
|
||||||
|
ctx.fillRect(l[e].x, l[e].y, 3, 3),
|
||||||
|
l[e].o <= 0 && (l.splice(e, 1), e--)
|
||||||
|
else if (type == 10)
|
||||||
|
for (
|
||||||
|
ctx.clearRect(0, 0, n, o),
|
||||||
|
ctx.fillStyle = getColor,
|
||||||
|
l.push({ x: a, y: h, xv: 2, yv: 1, o: 1 }),
|
||||||
|
e = 0;
|
||||||
|
e < l.length;
|
||||||
|
e++
|
||||||
|
)
|
||||||
|
(l[e].o -= c.o / 10),
|
||||||
|
(ctx.globalAlpha = l[e].o),
|
||||||
|
(l[e].x += 4 * (Math.random() - 0.5)),
|
||||||
|
--l[e].y,
|
||||||
|
ctx.fillRect(l[e].x, l[e].y, 2, 2),
|
||||||
|
l[e].o <= 0 && (l.splice(e, 1), e--)
|
||||||
|
window.requestAnimationFrame(t)
|
||||||
|
})()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'mouseType2',
|
||||||
|
value: function () {
|
||||||
|
let t
|
||||||
|
let o
|
||||||
|
let a
|
||||||
|
let h = window.innerWidth
|
||||||
|
let s = window.innerHeight
|
||||||
|
const i = 70
|
||||||
|
let r = 1
|
||||||
|
const l = 1
|
||||||
|
const c = 1.5
|
||||||
|
const n = 25
|
||||||
|
let d = 0.5 * h
|
||||||
|
let f = 0.5 * s
|
||||||
|
let u = !1
|
||||||
|
function e(t) {
|
||||||
|
;(d = t.clientX - 0.5 * (window.innerWidth - h)),
|
||||||
|
(f = t.clientY - 0.5 * (window.innerHeight - s))
|
||||||
|
}
|
||||||
|
function y(t) {
|
||||||
|
u = !0
|
||||||
|
}
|
||||||
|
function w(t) {
|
||||||
|
u = !1
|
||||||
|
}
|
||||||
|
function p(t) {
|
||||||
|
t.touches.length == 1 &&
|
||||||
|
(t.preventDefault(),
|
||||||
|
(d = t.touches[0].pageX - 0.5 * (window.innerWidth - h)),
|
||||||
|
(f = t.touches[0].pageY - 0.5 * (window.innerHeight - s)))
|
||||||
|
}
|
||||||
|
function v(t) {
|
||||||
|
t.touches.length == 1 &&
|
||||||
|
(t.preventDefault(),
|
||||||
|
(d = t.touches[0].pageX - 0.5 * (window.innerWidth - h)),
|
||||||
|
(f = t.touches[0].pageY - 0.5 * (window.innerHeight - s)))
|
||||||
|
}
|
||||||
|
function m() {
|
||||||
|
;(h = window.innerWidth),
|
||||||
|
(s = window.innerHeight),
|
||||||
|
(t.width = h),
|
||||||
|
(t.height = s)
|
||||||
|
}
|
||||||
|
function x() {
|
||||||
|
u ? (r += 0.02 * (c - r)) : (r -= 0.02 * (r - l)),
|
||||||
|
(r = Math.min(r, c)),
|
||||||
|
o.clearRect(0, 0, o.canvas.width, o.canvas.height)
|
||||||
|
for (let t = 0, e = a.length; t < e; t++) {
|
||||||
|
const i = a[t]
|
||||||
|
const n = { x: i.position.x, y: i.position.y }
|
||||||
|
;(i.offset.x += i.speed),
|
||||||
|
(i.offset.y += i.speed),
|
||||||
|
(i.shift.x += (d - i.shift.x) * i.speed),
|
||||||
|
(i.shift.y += (f - i.shift.y) * i.speed),
|
||||||
|
(i.position.x =
|
||||||
|
i.shift.x + Math.cos(t + i.offset.x) * (i.orbit * r)),
|
||||||
|
(i.position.y =
|
||||||
|
i.shift.y + Math.sin(t + i.offset.y) * (i.orbit * r)),
|
||||||
|
(i.position.x = Math.max(Math.min(i.position.x, h), 0)),
|
||||||
|
(i.position.y = Math.max(Math.min(i.position.y, s), 0)),
|
||||||
|
(i.size += 0.01 * (i.targetSize - i.size)),
|
||||||
|
Math.round(i.size) == Math.round(i.targetSize) &&
|
||||||
|
(i.targetSize = 1 + 2 * Math.random()),
|
||||||
|
o.beginPath(),
|
||||||
|
(o.fillStyle = i.fillColor),
|
||||||
|
(o.strokeStyle = i.fillColor),
|
||||||
|
(o.lineWidth = i.size),
|
||||||
|
o.moveTo(n.x, n.y),
|
||||||
|
o.lineTo(i.position.x, i.position.y),
|
||||||
|
o.stroke(),
|
||||||
|
o.arc(
|
||||||
|
i.position.x,
|
||||||
|
i.position.y,
|
||||||
|
i.size / 2,
|
||||||
|
0,
|
||||||
|
2 * Math.PI,
|
||||||
|
!0
|
||||||
|
),
|
||||||
|
o.fill()
|
||||||
|
}
|
||||||
|
window.requestAnimationFrame(x)
|
||||||
|
}
|
||||||
|
;(t = document.getElementById('vixcityCanvas')) &&
|
||||||
|
t.getContext &&
|
||||||
|
((o = t.getContext('2d')),
|
||||||
|
window.addEventListener('mousemove', e, !1),
|
||||||
|
window.addEventListener('mousedown', y, !1),
|
||||||
|
window.addEventListener('mouseup', w, !1),
|
||||||
|
document.addEventListener('touchstart', p, !1),
|
||||||
|
document.addEventListener('touchmove', v, !1),
|
||||||
|
window.addEventListener('resize', m, !1),
|
||||||
|
(function () {
|
||||||
|
a = []
|
||||||
|
for (let t = 0; t < n; t++) {
|
||||||
|
const e = {
|
||||||
|
size: 1,
|
||||||
|
position: { x: d, y: f },
|
||||||
|
offset: { x: 0, y: 0 },
|
||||||
|
shift: { x: d, y: f },
|
||||||
|
speed: 0.01 + 0.04 * Math.random(),
|
||||||
|
targetSize: 1,
|
||||||
|
fillColor:
|
||||||
|
'#' +
|
||||||
|
((9453632 * Math.random() + 11184810) | 0).toString(16),
|
||||||
|
orbit: 0.5 * i + 0.5 * i * Math.random()
|
||||||
|
}
|
||||||
|
a.push(e)
|
||||||
|
}
|
||||||
|
})(),
|
||||||
|
m(),
|
||||||
|
x())
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'mouseType3',
|
||||||
|
value: function () {
|
||||||
|
// 获取窗口的高度
|
||||||
|
const windowHeight =
|
||||||
|
window.innerHeight ||
|
||||||
|
document.documentElement.clientHeight ||
|
||||||
|
document.body.clientHeight
|
||||||
|
|
||||||
|
// 创建一个新的 div 元素
|
||||||
|
const vixcityDiv = document.createElement('div')
|
||||||
|
|
||||||
|
// 设置 div 的 id 和样式
|
||||||
|
vixcityDiv.id = 'vixcityDiv'
|
||||||
|
vixcityDiv.style.position = 'fixed'
|
||||||
|
vixcityDiv.style.width = '100%'
|
||||||
|
vixcityDiv.style.height = windowHeight + 'px'
|
||||||
|
vixcityDiv.style.left = '0px'
|
||||||
|
vixcityDiv.style.top = '0px'
|
||||||
|
vixcityDiv.style.zIndex = '2147483647'
|
||||||
|
vixcityDiv.style.pointerEvents = 'none'
|
||||||
|
|
||||||
|
// 将 div 添加到 body 元素中
|
||||||
|
document.body.appendChild(vixcityDiv),
|
||||||
|
new ((function () {
|
||||||
|
function i(t) {
|
||||||
|
return document.getElementById(t)
|
||||||
|
}
|
||||||
|
function t(t, e) {
|
||||||
|
;(this.config = e || {}),
|
||||||
|
(this.obj = i(t)),
|
||||||
|
(n = this.config.speed || 4),
|
||||||
|
(o = this.config.animR || 1),
|
||||||
|
(a = {
|
||||||
|
x: 0.5 * i(t).offsetWidth,
|
||||||
|
y: 0.5 * i(t).offsetHeight
|
||||||
|
}),
|
||||||
|
this.setXY(),
|
||||||
|
this.start()
|
||||||
|
}
|
||||||
|
let n
|
||||||
|
let o
|
||||||
|
let a
|
||||||
|
const r = []
|
||||||
|
let l = 0
|
||||||
|
t.prototype = {
|
||||||
|
setXY: function () {
|
||||||
|
let t, e
|
||||||
|
this.obj,
|
||||||
|
(t = 'mousemove'),
|
||||||
|
(e = function (t) {
|
||||||
|
;(t = t || window.event),
|
||||||
|
(a.x = t.clientX),
|
||||||
|
(a.y = t.clientY)
|
||||||
|
}),
|
||||||
|
window.addEventListener
|
||||||
|
? window.addEventListener(t, e, !1)
|
||||||
|
: window.attachEvent('on' + t, function () {
|
||||||
|
e.call(window)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
start: function () {
|
||||||
|
Math.PI
|
||||||
|
let t
|
||||||
|
let e
|
||||||
|
const i = this.config.fn
|
||||||
|
r[l++] = t = new c(null, 0, 0)
|
||||||
|
for (let n = 0; n < 360; n += 20)
|
||||||
|
for (let o = t, a = 10; a < 35; a += 1) {
|
||||||
|
const h = i(n, a).x
|
||||||
|
const s = i(n, a).y
|
||||||
|
;(r[l++] = e = new c(o, h, s)), (o = e)
|
||||||
|
}
|
||||||
|
setInterval(function () {
|
||||||
|
for (let t = 0; t < l; t++) r[t].run()
|
||||||
|
}, 16)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var c = function (t, e, i) {
|
||||||
|
const n = document.createElement('span')
|
||||||
|
;(this.css = n.style),
|
||||||
|
(this.css.backgroundColor = '#2D8CF0'),
|
||||||
|
(this.css.width = '2px'),
|
||||||
|
(this.css.height = '2px'),
|
||||||
|
(this.css.position = 'absolute'),
|
||||||
|
(this.css.left = '-1000px'),
|
||||||
|
(this.css.zIndex = 1e3 - l),
|
||||||
|
document.getElementById('vixcityDiv').appendChild(n),
|
||||||
|
(this.ddx = 0),
|
||||||
|
(this.ddy = 0),
|
||||||
|
(this.PX = 0),
|
||||||
|
(this.PY = 0),
|
||||||
|
(this.x = 0),
|
||||||
|
(this.y = 0),
|
||||||
|
(this.x0 = 0),
|
||||||
|
(this.y0 = 0),
|
||||||
|
(this.cx = e),
|
||||||
|
(this.cy = i),
|
||||||
|
(this.parent = t)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
(c.prototype.run = function () {
|
||||||
|
this.parent
|
||||||
|
? ((this.x0 = this.parent.x), (this.y0 = this.parent.y))
|
||||||
|
: ((this.x0 = a.x), (this.y0 = a.y)),
|
||||||
|
(this.x = this.PX +=
|
||||||
|
(this.ddx +=
|
||||||
|
(this.x0 - this.PX - this.ddx + this.cx) / o) / n),
|
||||||
|
(this.y = this.PY +=
|
||||||
|
(this.ddy +=
|
||||||
|
(this.y0 - this.PY - this.ddy + this.cy) / o) / n),
|
||||||
|
(this.css.left = Math.round(this.x) + 'px'),
|
||||||
|
(this.css.top = Math.round(this.y) + 'px')
|
||||||
|
}),
|
||||||
|
t
|
||||||
|
)
|
||||||
|
})())('vixcityDiv', {
|
||||||
|
speed: 4,
|
||||||
|
animR: 2,
|
||||||
|
fn: function (t, e) {
|
||||||
|
return {
|
||||||
|
x: (e / 4) * Math.cos(t),
|
||||||
|
y: (e / 4) * Math.sin(t)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'cnblogs',
|
||||||
|
get: function () {
|
||||||
|
return { canvase: '#vixcityCanvas' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]),
|
||||||
|
t)
|
||||||
|
|
||||||
|
// 赋值 给一个默认值
|
||||||
|
function t() {
|
||||||
|
_classCallCheck(this, t),
|
||||||
|
(this.defaults = { type: 1, color: !1 }),
|
||||||
|
(this.version = '0.0.1')
|
||||||
|
}
|
||||||
|
|
||||||
|
return function drawGoodCanvas(options) {
|
||||||
|
new e().init(options)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.createMouseCanvas = createMouseCanvas
|
||||||
Reference in New Issue
Block a user