npm - @cut-shade/baspark - Versions diffs - 1.6.0 → 1.6.1 - Mend

@cut-shade/baspark 1.6.0 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/demo/index.html ADDED Viewed

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BASpark Demo</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+    #app {
+      position: relative;
+      width: 100vw;
+      height: 100vh;
+      overflow: hidden;
+      background: #1a1a2e;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      user-select: none;
+    }
+    .content {
+      text-align: center;
+      color: #fff;
+      z-index: 1;
+      pointer-events: none;
+    }
+    .content h1 {
+      font-size: clamp(2rem, 6vw, 4rem);
+      font-weight: 700;
+      background: linear-gradient(135deg, #2dd4ff, #45afff);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin-bottom: 0.5rem;
+    }
+    .content p {
+      font-size: clamp(0.9rem, 2vw, 1.2rem);
+      color: rgba(255,255,255,0.6);
+    }
+    .controls {
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      flex-wrap: wrap;
+      justify-content: center;
+      background: rgba(0,0,0,0.6);
+      backdrop-filter: blur(12px);
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 16px;
+      padding: 16px 24px;
+      z-index: 2;
+      pointer-events: auto;
+      max-width: 90vw;
+    }
+    .controls label {
+      color: rgba(255,255,255,0.8);
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .controls input[type="color"] {
+      width: 32px;
+      height: 32px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      background: none;
+      padding: 0;
+    }
+    .controls input[type="range"] {
+      width: 80px;
+      accent-color: #45afff;
+    }
+    .controls button {
+      background: rgba(69,175,255,0.2);
+      border: 1px solid rgba(69,175,255,0.4);
+      color: #fff;
+      padding: 6px 14px;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 13px;
+      transition: background 0.2s;
+    }
+    .controls button:hover {
+      background: rgba(69,175,255,0.35);
+    }
+    .badge {
+      position: fixed;
+      top: 16px;
+      right: 16px;
+      background: rgba(0,0,0,0.5);
+      backdrop-filter: blur(8px);
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 10px;
+      padding: 8px 14px;
+      color: rgba(255,255,255,0.5);
+      font-size: 12px;
+      z-index: 2;
+      pointer-events: none;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <div class="content">
+      <h1>✦ BASpark</h1>
+      <p>Blue Archive 风格粒子特效 · 点击/移动鼠标试试</p>
+    </div>
+    <div class="badge">v1.6.0 · 移植 Web 版</div>
+    <div class="controls">
+      <label>颜色 <input type="color" id="colorPicker" value="#2dafff"></label>
+      <label>整体 <input type="range" id="scaleSlider" min="0.5" max="3" step="0.1" value="1.5"></label>
+      <label>不透明度 <input type="range" id="opacitySlider" min="0.1" max="1" step="0.1" value="1"></label>
+      <label>速度 <input type="range" id="speedSlider" min="0.2" max="3" step="0.1" value="1"></label>
+      <label>拖尾 <input type="range" id="trailWidthSlider" min="0.25" max="3" step="0.1" value="1"></label>
+      <label>迸溅 <input type="range" id="sparkSizeSlider" min="0.25" max="3" step="0.1" value="1"></label>
+      <label>波纹 <input type="range" id="clickScaleSlider" min="0.25" max="3" step="0.1" value="1"></label>
+      <button id="trailToggle">常驻拖尾: 关</button>
+      <button id="boomBtn">✨ 点我</button>
+    </div>
+  </div>
+  <script src="../dist/index.global.js"></script>
+  <script>
+    const spark = new BASpark.BASpark('#app', { autoTrack: true, color: '45,175,255' })
+    // ---- 控件绑定 ----
+    const colorPicker = document.getElementById('colorPicker')
+    const scaleSlider = document.getElementById('scaleSlider')
+    const opacitySlider = document.getElementById('opacitySlider')
+    const speedSlider = document.getElementById('speedSlider')
+    const trailWidthSlider = document.getElementById('trailWidthSlider')
+    const sparkSizeSlider = document.getElementById('sparkSizeSlider')
+    const clickScaleSlider = document.getElementById('clickScaleSlider')
+    const trailBtn = document.getElementById('trailToggle')
+    const boomBtn = document.getElementById('boomBtn')
+    colorPicker.addEventListener('input', () => {
+      const hex = colorPicker.value
+      const rgb = [parseInt(hex.slice(1,3),16), parseInt(hex.slice(3,5),16), parseInt(hex.slice(5,7),16)]
+      spark.setColor(rgb.join(','))
+    })
+    const val = (el) => parseFloat(el.value)
+    scaleSlider.addEventListener('input', () => spark.setScale(val(scaleSlider)))
+    opacitySlider.addEventListener('input', () => spark.setOpacity(val(opacitySlider)))
+    speedSlider.addEventListener('input', () => spark.setSpeed(val(speedSlider)))
+    trailWidthSlider.addEventListener('input', () => spark.setTrailWidth(val(trailWidthSlider)))
+    sparkSizeSlider.addEventListener('input', () => spark.setSparkSize(val(sparkSizeSlider)))
+    clickScaleSlider.addEventListener('input', () => spark.setClickScale(val(clickScaleSlider)))
+    let alwaysTrail = false
+    trailBtn.addEventListener('click', () => {
+      alwaysTrail = !alwaysTrail
+      spark.setAlwaysTrail(alwaysTrail)
+      trailBtn.textContent = '常驻拖尾: ' + (alwaysTrail ? '开' : '关')
+    })
+    boomBtn.addEventListener('click', () => {
+      // 随机位置触发点击效果 (百分比坐标)
+      spark.boom(Math.random() * 0.6 + 0.2, Math.random() * 0.6 + 0.2)
+    })
+  </script>
+</body>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cut-shade/baspark",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "Blue Archive style particle effects — portable web library (Canvas)",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -16,7 +16,11 @@
   "unpkg": "./dist/index.global.js",
   "jsdelivr": "./dist/index.global.js",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "demo",
+    "tsconfig.json",
+    "tsup.config.ts"
   ],
   "scripts": {
     "build": "tsup",

package/src/BASpark.ts ADDED Viewed

@@ -0,0 +1,194 @@
+import { MouseSpark } from './core/MouseSpark'
+import type { BASparkOptions } from './core/types'
+import { DEFAULT_Z_INDEX } from './core/constants'
+export class BASpark {
+  private canvas: HTMLCanvasElement
+  private spark: MouseSpark
+  private autoTrack: boolean
+  private boundHandlers: {
+    mouseDown: (e: MouseEvent) => void
+    mouseMove: (e: MouseEvent) => void
+    mouseUp: (e: MouseEvent) => void
+    touchStart: (e: TouchEvent) => void
+    touchMove: (e: TouchEvent) => void
+    touchEnd: (e: TouchEvent) => void
+    resize: () => void
+  }
+  constructor(element: HTMLElement | string, options: BASparkOptions = {}) {
+    this.autoTrack = options.autoTrack ?? true
+    const target = typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)
+      : element
+    if (!target) throw new Error('BASpark: target element not found')
+    this.canvas = document.createElement('canvas')
+    this.canvas.id = 'baspark-canvas'
+    this.canvas.style.cssText = `
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: ${options.zIndex ?? DEFAULT_Z_INDEX};
+    `
+    target.appendChild(this.canvas)
+    this.spark = new MouseSpark(this.canvas, {
+      color: options.color,
+      scale: options.scale,
+      opacity: options.opacity,
+      trailSpeed: options.trailSpeed,
+      clickSpeed: options.clickSpeed,
+      trailWidth: options.trailWidth,
+      sparkSize: options.sparkSize,
+      clickScale: options.clickScale,
+      alwaysTrail: options.alwaysTrail,
+    })
+    this.boundHandlers = {
+      mouseDown: (e: MouseEvent) => {
+        this.spark.handleDown(e.clientX, e.clientY)
+      },
+      mouseMove: (e: MouseEvent) => {
+        this.spark.handleMove(e.clientX, e.clientY)
+      },
+      mouseUp: () => {
+        this.spark.handleUp()
+      },
+      touchStart: (e: TouchEvent) => {
+        const t = e.touches[0]
+        this.spark.setInputContext('touch', false)
+        this.spark.handleDown(t.clientX, t.clientY)
+      },
+      touchMove: (e: TouchEvent) => {
+        const t = e.touches[0]
+        this.spark.handleMove(t.clientX, t.clientY)
+      },
+      touchEnd: () => {
+        this.spark.setInputContext('mouse', false)
+        this.spark.handleUp()
+      },
+      resize: () => {
+        this.spark.resize()
+      },
+    }
+    if (this.autoTrack) {
+      this.bindEvents()
+    }
+  }
+  private bindEvents(): void {
+    window.addEventListener('mousedown', this.boundHandlers.mouseDown)
+    window.addEventListener('mousemove', this.boundHandlers.mouseMove)
+    window.addEventListener('mouseup', this.boundHandlers.mouseUp)
+    window.addEventListener('touchstart', this.boundHandlers.touchStart, { passive: true })
+    window.addEventListener('touchmove', this.boundHandlers.touchMove, { passive: true })
+    window.addEventListener('touchend', this.boundHandlers.touchEnd)
+    window.addEventListener('resize', this.boundHandlers.resize)
+  }
+  private unbindEvents(): void {
+    window.removeEventListener('mousedown', this.boundHandlers.mouseDown)
+    window.removeEventListener('mousemove', this.boundHandlers.mouseMove)
+    window.removeEventListener('mouseup', this.boundHandlers.mouseUp)
+    window.removeEventListener('touchstart', this.boundHandlers.touchStart)
+    window.removeEventListener('touchmove', this.boundHandlers.touchMove)
+    window.removeEventListener('touchend', this.boundHandlers.touchEnd)
+    window.removeEventListener('resize', this.boundHandlers.resize)
+  }
+  boom(xPercent: number, yPercent: number): void {
+    const cx = xPercent * window.innerWidth
+    const cy = yPercent * window.innerHeight
+    this.spark.handleDown(cx, cy)
+  }
+  move(xPercent: number, yPercent: number): void {
+    const cx = xPercent * window.innerWidth
+    const cy = yPercent * window.innerHeight
+    this.spark.handleMove(cx, cy)
+  }
+  up(): void {
+    this.spark.handleUp()
+  }
+  boomAt(x: number, y: number): void {
+    this.spark.handleDown(x, y)
+  }
+  moveAt(x: number, y: number): void {
+    this.spark.handleMove(x, y)
+  }
+  setColor(rgb: string): void {
+    this.spark.updateColor(rgb)
+  }
+  setScale(scale: number): void {
+    const s = this.spark
+    s.updateEffectSettings(scale, s.opacity, s.trailSpeed, s.clickSpeed)
+  }
+  setOpacity(opacity: number): void {
+    const s = this.spark
+    s.updateEffectSettings(s.scale, opacity, s.trailSpeed, s.clickSpeed)
+  }
+  setSpeed(trailSpeed: number, clickSpeed?: number): void {
+    this.spark.updateEffectSettings(
+      this.spark.scale,
+      this.spark.opacity,
+      trailSpeed,
+      clickSpeed ?? trailSpeed,
+    )
+  }
+  setAlwaysTrail(enabled: boolean): void {
+    this.spark.setInputContext('mouse', enabled)
+  }
+  setTrailWidth(v: number): void {
+    this.spark.setTrailWidth(v)
+  }
+  setSparkSize(v: number): void {
+    this.spark.setSparkSize(v)
+  }
+  setClickScale(v: number): void {
+    this.spark.setClickScale(v)
+  }
+  updateOptions(options: BASparkOptions): void {
+    if (options.color !== undefined) this.setColor(options.color)
+    if (options.scale !== undefined) this.setScale(options.scale)
+    if (options.opacity !== undefined) this.setOpacity(options.opacity)
+    if (options.trailSpeed !== undefined) {
+      this.setSpeed(options.trailSpeed, options.clickSpeed)
+    }
+    if (options.trailWidth !== undefined) this.setTrailWidth(options.trailWidth)
+    if (options.sparkSize !== undefined) this.setSparkSize(options.sparkSize)
+    if (options.clickScale !== undefined) this.setClickScale(options.clickScale)
+    if (options.alwaysTrail !== undefined) this.setAlwaysTrail(options.alwaysTrail)
+    if (options.autoTrack !== undefined && options.autoTrack !== this.autoTrack) {
+      this.autoTrack = options.autoTrack
+      if (this.autoTrack) {
+        this.bindEvents()
+      } else {
+        this.unbindEvents()
+      }
+    }
+  }
+  destroy(): void {
+    this.unbindEvents()
+    this.spark.destroy()
+    this.canvas.remove()
+  }
+}

package/src/core/MouseSpark.ts ADDED Viewed

@@ -0,0 +1,715 @@
+import type { Spark, Wave, TrailPoint, Point, Rect, InputMode } from './types'
+import {
+  FILLED_CIRCLE_CFG,
+  RINGS_ANIM_CFG,
+  CREATE_CLICK_CFG,
+  DEFAULT_COLOR,
+  DEFAULT_SCALE,
+  DEFAULT_OPACITY,
+  DEFAULT_SPEED,
+  BASE_FRAME_MS,
+  MAX_DELTA_MS,
+} from './constants'
+function ringsEndColorFromRgb(rgbString: string): [number, number, number] {
+  const [r, g, b] = rgbString.split(',').map(Number)
+  return [
+    Math.round((r + 255 * 2) / 3),
+    Math.round((g + 255 * 2) / 3),
+    Math.round((b + 255 * 2) / 3),
+  ]
+}
+function dist(a: Point, b: Point): number {
+  return Math.hypot(a.x - b.x, a.y - b.y)
+}
+export interface MouseSparkOptions {
+  color?: string
+  scale?: number
+  opacity?: number
+  trailSpeed?: number
+  clickSpeed?: number
+  trailWidth?: number
+  sparkSize?: number
+  clickScale?: number
+  maxTrail?: number
+  alwaysTrail?: boolean
+}
+export class MouseSpark {
+  color: string
+  scale: number
+  opacity: number
+  trailSpeed: number
+  clickSpeed: number
+  trailWidth: number
+  sparkSize: number
+  clickScale: number
+  maxTrail: number
+  private sparksPool: Spark[] = []
+  private wavesPool: Wave[] = []
+  private waves: Wave[] = []
+  private sparks: Spark[] = []
+  private trail: TrailPoint[] = []
+  isDown = false
+  private lastPos: Point | null = null
+  private lastFrameTime = performance.now()
+  private dpr = 1
+  private cssWidth = 1
+  private cssHeight = 1
+  private previousDirtyRects: Rect[] = []
+  private forceFullRedraw = true
+  private ringsStartColor: [number, number, number] = [250, 252, 252]
+  private ringsEndColor: [number, number, number]
+  private mainCanvas!: HTMLCanvasElement
+  private mainCtx!: CanvasRenderingContext2D
+  private bufferCanvas!: HTMLCanvasElement
+  private bufferCtx!: CanvasRenderingContext2D
+  private animFrameId = 0
+  private inputMode: InputMode = 'mouse'
+  private alwaysTrailEnabled = false
+  readonly effectiveAlwaysTrail: boolean = false
+  constructor(canvas: HTMLCanvasElement, opts: MouseSparkOptions = {}) {
+    this.color = opts.color ?? DEFAULT_COLOR
+    this.scale = opts.scale ?? DEFAULT_SCALE
+    this.opacity = opts.opacity ?? DEFAULT_OPACITY
+    this.trailSpeed = opts.trailSpeed ?? DEFAULT_SPEED
+    this.clickSpeed = opts.clickSpeed ?? DEFAULT_SPEED
+    this.trailWidth = opts.trailWidth ?? 1
+    this.sparkSize = opts.sparkSize ?? 1
+    this.clickScale = opts.clickScale ?? 1
+    this.maxTrail = opts.maxTrail ?? 16
+    this.alwaysTrailEnabled = opts.alwaysTrail ?? false
+    this.ringsEndColor = ringsEndColorFromRgb(this.color)
+    this.initCanvas(canvas)
+    this.animFrameId = requestAnimationFrame((now) => this.animationLoops(now))
+  }
+  private initCanvas(canvas: HTMLCanvasElement): void {
+    this.mainCanvas = canvas
+    this.mainCtx = canvas.getContext('2d')!
+    this.bufferCanvas = document.createElement('canvas')
+    this.bufferCtx = this.bufferCanvas.getContext('2d')!
+    this.resize()
+  }
+  resize(): void {
+    const dpr = window.devicePixelRatio || 1
+    const cssWidth = Math.max(1, window.innerWidth)
+    const cssHeight = Math.max(1, window.innerHeight)
+    const w = Math.max(1, Math.floor(cssWidth * dpr))
+    const h = Math.max(1, Math.floor(cssHeight * dpr))
+    this.dpr = dpr
+    this.cssWidth = cssWidth
+    this.cssHeight = cssHeight
+    this.mainCanvas.width = w
+    this.mainCanvas.height = h
+    this.bufferCanvas.width = w
+    this.bufferCanvas.height = h
+    this.previousDirtyRects = []
+    this.forceFullRedraw = true
+    this.bufferCtx.setTransform(dpr, 0, 0, dpr, 0, 0)
+  }
+  setInputContext(mode: InputMode, alwaysTrail: boolean): void {
+    this.inputMode = mode === 'touch' ? 'touch' : 'mouse'
+    this.alwaysTrailEnabled = Boolean(alwaysTrail)
+    ;(this as any).effectiveAlwaysTrail = this.inputMode === 'mouse' && this.alwaysTrailEnabled
+  }
+  updateColor(rgbString: string): void {
+    this.color = rgbString
+    this.ringsEndColor = ringsEndColorFromRgb(rgbString)
+  }
+  setTrailWidth(v: number): void {
+    this.trailWidth = Math.max(0.25, Math.min(4, Number(v) || 1))
+  }
+  setSparkSize(v: number): void {
+    this.sparkSize = Math.max(0.25, Math.min(4, Number(v) || 1))
+  }
+  setClickScale(v: number): void {
+    this.clickScale = Math.max(0.25, Math.min(4, Number(v) || 1))
+  }
+  updateEffectSettings(scale: number, opacity: number, trailSpeed: number, clickSpeed: number): void {
+    this.scale = Math.max(0.5, Math.min(3, Number(scale) || DEFAULT_SCALE))
+    this.opacity = Math.max(0.1, Math.min(1, Number(opacity) || DEFAULT_OPACITY))
+    let t = Number(trailSpeed)
+    if (!Number.isFinite(t)) t = DEFAULT_SPEED
+    let c = Number(clickSpeed)
+    if (!Number.isFinite(c)) c = t
+    this.trailSpeed = Math.max(0.2, Math.min(3, t))
+    this.clickSpeed = Math.max(0.2, Math.min(3, c))
+  }
+  handleDown(x: number, y: number): void {
+    this.isDown = true
+    this.lastPos = { x, y }
+    this.createEffects(x, y)
+  }
+  handleMove(x: number, y: number): void {
+    if (!this.isDown && !(this.inputMode === 'mouse' && this.alwaysTrailEnabled)) return
+    const prev = this.lastPos
+    if (!prev) {
+      this.lastPos = { x, y }
+      return
+    }
+    if (dist({ x, y }, prev) > 2) {
+      this.trail.push({ x, y, life: 1 })
+      if (this.trail.length > this.maxTrail) this.trail.shift()
+      if (Math.random() < 0.3) {
+        const a = Math.random() * Math.PI * 2
+        const speedAdjust = this.scale / 1.5
+        this.sparks.push({
+          x: x + Math.cos(a) * 10 * this.scale,
+          y: y + Math.sin(a) * 10 * this.scale,
+          vx: Math.cos(a) * 1.3 * speedAdjust,
+          vy: Math.sin(a) * 1.3 * speedAdjust,
+          rot: Math.random() * Math.PI * 2,
+          rs: 0.16,
+          s: 9 * this.scale * this.sparkSize,
+          a: 0.7,
+          f: 0.95,
+          fromClick: false,
+        })
+      }
+    }
+    this.lastPos = { x, y }
+  }
+  handleUp(): void {
+    this.isDown = false
+  }
+  private alpha(value: number): number {
+    return Math.max(0, Math.min(1, value * this.opacity))
+  }
+  private createEffects(x: number, y: number): void {
+    const rc = CREATE_CLICK_CFG.rings
+    const sparksCount = CREATE_CLICK_CFG.sparksCount
+    let wave: Wave
+    if (this.wavesPool.length > 0) {
+      wave = this.wavesPool.pop()!
+    } else {
+      wave = { ring: { segs: [] } } as unknown as Wave
+    }
+    if (!wave.ring) wave.ring = { segs: [] } as any
+    wave.x = x
+    wave.y = y
+    wave.r = 0
+    wave.life = 0
+    wave.ring.ang = Math.random() * Math.PI * 2
+    wave.ring.rs = rc.rsList[Math.floor(Math.random() * rc.rsList.length)]
+    wave.ring.segs[0] = {
+      off: 0,
+      len: rc.len,
+      rRoundRate: rc.rRoundRateList[Math.floor(Math.random() * rc.rRoundRateList.length)],
+    }
+    wave.ring.segs[1] = {
+      off: (Math.random() * 3 - 1.5) * Math.PI,
+      len: rc.len,
+      rRoundRate: rc.rRoundRateList[Math.floor(Math.random() * rc.rRoundRateList.length)],
+    }
+    this.waves.push(wave)
+    const speedAdjust = this.scale / 1.5
+    for (let i = 0; i < sparksCount; i++) {
+      const a = Math.random() * Math.PI * 2
+      const speed = (4.8 + Math.random() * 2) * speedAdjust
+      let spark: Spark
+      if (this.sparksPool.length > 0) {
+        spark = this.sparksPool.pop()!
+      } else {
+        spark = {} as Spark
+      }
+      spark.x = x
+      spark.y = y
+      spark.vx = Math.cos(a) * speed
+      spark.vy = Math.sin(a) * speed
+      spark.rot = Math.random() * Math.PI * 2
+      spark.rs = (Math.random() - 0.5) * 0.28
+      spark.s = (4 + Math.random() * 3) * this.scale * this.sparkSize
+      spark.a = 1
+      spark.f = 0.9
+      spark.fromClick = true
+      this.sparks.push(spark)
+    }
+  }
+  private clearBuffer(rect?: Rect): void {
+    const ctx = this.bufferCtx
+    if (rect) {
+      ctx.clearRect(rect.x, rect.y, rect.w, rect.h)
+    } else {
+      ctx.clearRect(0, 0, this.cssWidth, this.cssHeight)
+    }
+  }
+  private clearBufferRects(rects: Rect[]): void {
+    if (!rects || rects.length === 0) return
+    for (const rect of rects) {
+      this.clearBuffer(rect)
+    }
+  }
+  private updateTrail(frameScale: number): void {
+    const ctx = this.bufferCtx
+    const n = this.trail.length
+    let baseDecay: number
+    if (this.inputMode === 'mouse' && this.alwaysTrailEnabled) {
+      baseDecay = 0.085 * frameScale
+    } else {
+      baseDecay = (this.isDown ? 0.085 : 0.18) * frameScale
+    }
+    const maxStep = 0.42
+    for (let i = n - 1; i >= 0; i--) {
+      const t = this.trail[i]
+      const span = Math.max(1, n - 1)
+      const along = n > 1 ? i / span : 1
+      const towardCursorBias = 1.25 - 0.55 * along
+      let step = baseDecay * towardCursorBias
+      if (step > maxStep) step = maxStep
+      t.life -= step
+      if (t.life <= 0) this.trail.splice(i, 1)
+    }
+    const head = this.lastPos
+    const pts: TrailPoint[] =
+      head && this.trail.length > 0
+        ? this.trail.concat([{ x: head.x, y: head.y, life: 1 }])
+        : this.trail.slice()
+    if (pts.length < 2) return
+    const gap = Math.hypot(
+      pts[pts.length - 1].x - pts[pts.length - 2].x,
+      pts[pts.length - 1].y - pts[pts.length - 2].y,
+    )
+    if (gap < 0.75 && this.trail.length === 1) {
+      const fade = Math.max(0, this.trail[0].life)
+      ctx.shadowColor = 'transparent'
+      const dotSize = (2.5 + 2 * fade) * (this.scale / 1.5) * this.trailWidth
+      ctx.beginPath()
+      ctx.arc(pts[0].x, pts[0].y, dotSize, 0, Math.PI * 2)
+      ctx.fillStyle = `rgba(${this.color}, ${fade * 0.85})`
+      ctx.fill()
+      return
+    }
+    const numPts = pts.length
+    const lastIdx = numPts - 1
+    const baseWidth = 8 * (this.scale / 1.5) * this.trailWidth
+    const lancetWidth = (progress: number): number => {
+      if (progress < 0.65) return Math.pow(progress / 0.65, 0.6)
+      return Math.pow((1 - progress) / 0.35, 1.8)
+    }
+    // 构建填充多边形的左右边缘点
+    const leftEdge: Array<{ x: number; y: number }> = []
+    const rightEdge: Array<{ x: number; y: number }> = []
+    for (let i = 0; i < numPts; i++) {
+      const progress = i / lastIdx
+      const hw = Math.max(0.25, baseWidth * lancetWidth(progress)) / 2
+      let dx: number, dy: number
+      if (i === 0) {
+        dx = pts[1].x - pts[0].x
+        dy = pts[1].y - pts[0].y
+      } else if (i === lastIdx) {
+        dx = pts[i].x - pts[i - 1].x
+        dy = pts[i].y - pts[i - 1].y
+      } else {
+        dx = pts[i + 1].x - pts[i - 1].x
+        dy = pts[i + 1].y - pts[i - 1].y
+      }
+      let len = Math.hypot(dx, dy)
+      if (len < 0.001) {
+        dx = 0
+        dy = 1
+        len = 1
+      }
+      const nx = -dy / len
+      const ny = dx / len
+      leftEdge.push({ x: pts[i].x + nx * hw, y: pts[i].y + ny * hw })
+      rightEdge.push({ x: pts[i].x - nx * hw, y: pts[i].y - ny * hw })
+    }
+    // 绘制填充多边形
+    ctx.shadowColor = `rgba(${this.color}, 0.6)`
+    ctx.shadowBlur = 3
+    ctx.shadowOffsetX = 0
+    ctx.shadowOffsetY = 0
+    ctx.beginPath()
+    ctx.moveTo(leftEdge[0].x, leftEdge[0].y)
+    for (let i = 1; i < numPts; i++) {
+      ctx.lineTo(leftEdge[i].x, leftEdge[i].y)
+    }
+    for (let i = numPts - 1; i >= 0; i--) {
+      ctx.lineTo(rightEdge[i].x, rightEdge[i].y)
+    }
+    ctx.closePath()
+    const grad = ctx.createLinearGradient(
+      pts[0].x, pts[0].y, pts[lastIdx].x, pts[lastIdx].y,
+    )
+    grad.addColorStop(0, `rgba(${this.color}, 0)`)
+    grad.addColorStop(1, `rgba(${this.color}, 1)`)
+    ctx.fillStyle = grad
+    ctx.fill()
+    ctx.shadowColor = 'transparent'
+  }
+  private strokeRingSegment(
+    wx: number, wy: number, radius: number,
+    a0: number, a1: number, lineWidth: number, strokeStyle: string,
+  ): void {
+    const ctx = this.bufferCtx
+    ctx.beginPath()
+    ctx.arc(wx, wy, radius, a0, a1)
+    ctx.lineWidth = lineWidth
+    ctx.strokeStyle = strokeStyle
+    ctx.stroke()
+  }
+  private updateWaves(clickFrameScale: number): void {
+    const filled = FILLED_CIRCLE_CFG
+    const rings = RINGS_ANIM_CFG
+    const ctx = this.bufferCtx
+    for (let i = this.waves.length - 1; i >= 0; i--) {
+      const w = this.waves[i]
+      const waveProg = Math.min(w.life / filled.maxLife, 1)
+      const ringProg = Math.min(w.life / rings.maxLife, 1)
+      // filled circle
+      {
+        w.life += clickFrameScale
+        const ease = 1 - Math.pow(1 - waveProg, 3)
+        w.r = filled.rAddRate * this.scale * this.clickScale * ease
+        const alpha = Math.max(0, 1 - waveProg)
+        if (alpha > 0) {
+          ctx.beginPath()
+          ctx.arc(w.x, w.y, w.r, 0, Math.PI * 2)
+          ctx.fillStyle = `rgba(${this.color},${this.alpha(alpha)})`
+          ctx.fill()
+        }
+      }
+      // rings
+      {
+        const getWeightProp = (t: number) => Math.min(2 - Math.abs(4 * (t - 0.5)), 1)
+        const getAlpha = (rProg: number) => Math.min(1.1 - 0.3 * rProg, 1)
+        const r = w.ring
+        r.ang -= r.rs * clickFrameScale
+        const ringRgbAt = (rProg: number): [number, number, number] => {
+          const t = Math.min(1.2 * rProg, 1)
+          return [
+            Math.round(this.ringsStartColor[0] * (1 - t) + this.ringsEndColor[0] * t),
+            Math.round(this.ringsStartColor[1] * (1 - t) + this.ringsEndColor[1] * t),
+            Math.round(this.ringsStartColor[2] * (1 - t) + this.ringsEndColor[2] * t),
+          ]
+        }
+        let start = 0
+        let end = 0
+        let len = 0
+        let seg: { off: number; len: number; rRoundRate: number }
+        for (let j = 0; j < 2; j++) {
+          seg = r.segs[j]
+          const base = r.ang + seg.off
+          if (ringProg <= rings.lenStopAddPoint) {
+            len = seg.len * (ringProg / rings.lenStopAddPoint)
+            end = base + seg.len
+            start = end - len
+          } else if (ringProg > rings.lenStartDimPoint) {
+            len = seg.len * (1 - (ringProg - rings.lenStartDimPoint) / (1 - rings.lenStartDimPoint))
+            start = base
+            end = start + len
+          } else {
+            len = seg.len
+            start = base
+            end = start + len
+          }
+          const lineWidthMul = Math.min(-0.8 * (ringProg - 0.8) + 1, 1)
+          const [rr, gg, bb] = ringRgbAt(ringProg)
+          const alphaRing = getAlpha(ringProg)
+          for (let k = 0; k < rings.segNum; k++) {
+            const t0 = k / rings.segNum
+            const t1 = (k + 1) / rings.segNum
+            const a0 = start + (end - start) * t0
+            const a1 = start + (end - start) * t1
+            if (Math.abs(a1 - a0) < 0.01) continue
+            const wT = getWeightProp(t0)
+            const lw = (rings.minW * (1 - wT) + rings.maxW * wT) * lineWidthMul
+            const strokeStyle = `rgba(${rr},${gg},${bb},${alphaRing})`
+            const radius = w.r + seg.rRoundRate * this.scale * this.clickScale
+            this.strokeRingSegment(w.x, w.y, radius, a0, a1, lw, strokeStyle)
+          }
+        }
+      }
+      if (ringProg >= 1 && waveProg >= 1) {
+        this.wavesPool.push(this.waves[i])
+        this.waves.splice(i, 1)
+      }
+    }
+  }
+  private updateSparks(clickFrameScale: number, trailFrameScale: number): void {
+    const ctx = this.bufferCtx
+    for (let i = this.sparks.length - 1; i >= 0; i--) {
+      const s = this.sparks[i]
+      const fs = s.fromClick ? clickFrameScale : trailFrameScale
+      s.x += s.vx * fs
+      s.y += s.vy * fs
+      s.vx *= Math.pow(s.f, fs)
+      s.vy *= Math.pow(s.f, fs)
+      s.rot += s.rs * fs
+      s.a -= 0.032 * fs
+      if (s.a <= 0) {
+        this.sparksPool.push(this.sparks[i])
+        this.sparks.splice(i, 1)
+        continue
+      }
+      ctx.save()
+      ctx.translate(s.x, s.y)
+      ctx.rotate(s.rot)
+      ctx.beginPath()
+      ctx.moveTo(0, -s.s)
+      ctx.lineTo(s.s * 0.6, s.s * 0.6)
+      ctx.lineTo(-s.s * 0.6, s.s * 0.6)
+      ctx.fillStyle = `rgba(255,255,255,${this.alpha(s.a)})`
+      ctx.fill()
+      ctx.restore()
+    }
+  }
+  private canvasRect(): Rect {
+    return { x: 0, y: 0, w: this.cssWidth, h: this.cssHeight }
+  }
+  private clipRect(rect: Rect): Rect | null {
+    if (!rect) return null
+    const x0 = Math.max(0, Math.floor(rect.x))
+    const y0 = Math.max(0, Math.floor(rect.y))
+    const x1 = Math.min(this.cssWidth, Math.ceil(rect.x + rect.w))
+    const y1 = Math.min(this.cssHeight, Math.ceil(rect.y + rect.h))
+    if (x1 <= x0 || y1 <= y0) return null
+    return { x: x0, y: y0, w: x1 - x0, h: y1 - y0 }
+  }
+  private pointRect(x: number, y: number, padding: number): Rect {
+    return { x: x - padding, y: y - padding, w: padding * 2, h: padding * 2 }
+  }
+  private segmentRect(a: Point, b: Point, padding: number): Rect {
+    const x0 = Math.min(a.x, b.x) - padding
+    const y0 = Math.min(a.y, b.y) - padding
+    const x1 = Math.max(a.x, b.x) + padding
+    const y1 = Math.max(a.y, b.y) + padding
+    return { x: x0, y: y0, w: x1 - x0, h: y1 - y0 }
+  }
+  private intersects(a: Rect, b: Rect): boolean {
+    return (
+      a.x <= b.x + b.w &&
+      a.x + a.w >= b.x &&
+      a.y <= b.y + b.h &&
+      a.y + a.h >= b.y
+    )
+  }
+  private unionRect(a: Rect, b: Rect): Rect {
+    const x0 = Math.min(a.x, b.x)
+    const y0 = Math.min(a.y, b.y)
+    const x1 = Math.max(a.x + a.w, b.x + b.w)
+    const y1 = Math.max(a.y + a.h, b.y + b.h)
+    return { x: x0, y: y0, w: x1 - x0, h: y1 - y0 }
+  }
+  private mergeRects(rects: Rect[]): Rect[] {
+    const merged: Rect[] = []
+    for (const raw of rects) {
+      let rect = this.clipRect(raw)
+      if (!rect) continue
+      for (let i = 0; i < merged.length; i++) {
+        if (this.intersects(merged[i], rect)) {
+          rect = this.unionRect(merged[i], rect)
+          merged.splice(i, 1)
+          i = -1
+        }
+      }
+      merged.push(rect)
+    }
+    return merged
+  }
+  private getEffectRects(): Rect[] {
+    const rects: Rect[] = []
+    const trailPad = 18 * this.scale * this.trailWidth + 12
+    const trailPoints: TrailPoint[] =
+      this.lastPos && this.trail.length > 0
+        ? this.trail.concat([{ x: this.lastPos.x, y: this.lastPos.y, life: 1 }])
+        : this.trail
+    if (trailPoints.length === 1) {
+      rects.push(this.pointRect(trailPoints[0].x, trailPoints[0].y, trailPad))
+    } else {
+      for (let i = 0; i < trailPoints.length - 1; i++) {
+        rects.push(this.segmentRect(trailPoints[i], trailPoints[i + 1], trailPad))
+      }
+    }
+    const wavePad = 34 * this.scale * this.clickScale + RINGS_ANIM_CFG.maxW + 16
+    for (const wave of this.waves) {
+      const radius = Math.max(wave.r || 0, FILLED_CIRCLE_CFG.rAddRate * this.scale * this.clickScale) + wavePad
+      rects.push(this.pointRect(wave.x, wave.y, radius))
+    }
+    const maxFrameScale = MAX_DELTA_MS / BASE_FRAME_MS
+    for (const spark of this.sparks) {
+      const speed = Math.hypot(spark.vx || 0, spark.vy || 0)
+      const speedScale = spark.fromClick ? this.clickSpeed : this.trailSpeed
+      const motionPad = speed * maxFrameScale * speedScale
+      const sparkPad = Math.max(spark.s || 0, 9 * this.scale * this.sparkSize) * 2 + motionPad + 12
+      rects.push(this.pointRect(spark.x, spark.y, sparkPad))
+    }
+    return this.mergeRects(rects)
+  }
+  private getRenderRects(): Rect[] {
+    if (this.forceFullRedraw) {
+      return [this.canvasRect()]
+    }
+    return this.mergeRects(this.previousDirtyRects.concat(this.getEffectRects()))
+  }
+  private clipToRects(ctx: CanvasRenderingContext2D, rects: Rect[]): void {
+    ctx.beginPath()
+    for (const rect of rects) {
+      ctx.rect(rect.x, rect.y, rect.w, rect.h)
+    }
+    ctx.clip()
+  }
+  private renderToMain(rects: Rect[]): void {
+    const { mainCtx, mainCanvas, bufferCanvas } = this
+    if (!rects || rects.length === 0) {
+      mainCtx.clearRect(0, 0, mainCanvas.width, mainCanvas.height)
+      mainCtx.drawImage(bufferCanvas, 0, 0)
+      return
+    }
+    const dpr = this.dpr || 1
+    for (const rect of rects) {
+      const sx = Math.max(0, Math.floor(rect.x * dpr))
+      const sy = Math.max(0, Math.floor(rect.y * dpr))
+      const sw = Math.min(mainCanvas.width - sx, Math.ceil(rect.w * dpr))
+      const sh = Math.min(mainCanvas.height - sy, Math.ceil(rect.h * dpr))
+      if (sw <= 0 || sh <= 0) continue
+      mainCtx.clearRect(sx, sy, sw, sh)
+      mainCtx.drawImage(bufferCanvas, sx, sy, sw, sh, sx, sy, sw, sh)
+    }
+  }
+  private animationLoops(now: number): void {
+    const hasWork =
+      this.waves.length > 0 ||
+      this.sparks.length > 0 ||
+      this.trail.length > 0
+    if (!hasWork) {
+      this.lastFrameTime = now
+      if (this.previousDirtyRects.length > 0) {
+        this.clearBufferRects(this.previousDirtyRects)
+        this.renderToMain(this.previousDirtyRects)
+        this.previousDirtyRects = []
+      }
+      this.animFrameId = requestAnimationFrame((nextNow) => this.animationLoops(nextNow))
+      return
+    }
+    const deltaMs = Math.min(now - this.lastFrameTime, MAX_DELTA_MS)
+    this.lastFrameTime = now
+    const baseScale = deltaMs / BASE_FRAME_MS
+    const trailFrameScale = baseScale * this.trailSpeed
+    const clickFrameScale = baseScale * this.clickSpeed
+    const bctx = this.bufferCtx
+    const renderRects = this.getRenderRects()
+    bctx.save()
+    this.clipToRects(bctx, renderRects)
+    bctx.globalCompositeOperation = 'lighter'
+    this.clearBufferRects(renderRects)
+    this.updateTrail(trailFrameScale)
+    this.updateWaves(clickFrameScale)
+    this.updateSparks(clickFrameScale, trailFrameScale)
+    bctx.globalCompositeOperation = 'source-over'
+    bctx.restore()
+    this.renderToMain(renderRects)
+    this.previousDirtyRects = this.getEffectRects()
+    this.forceFullRedraw = false
+    this.animFrameId = requestAnimationFrame((nextNow) => this.animationLoops(nextNow))
+  }
+  destroy(): void {
+    cancelAnimationFrame(this.animFrameId)
+    this.waves.length = 0
+    this.sparks.length = 0
+    this.trail.length = 0
+    this.sparksPool.length = 0
+    this.wavesPool.length = 0
+    this.previousDirtyRects = []
+    const ctx = this.mainCtx
+    ctx.clearRect(0, 0, this.mainCanvas.width, this.mainCanvas.height)
+  }
+}

package/src/core/constants.ts ADDED Viewed

@@ -0,0 +1,35 @@
+import type { FilledCircleConfig, RingsAnimConfig, CreateClickConfig } from './types'
+export const FILLED_CIRCLE_CFG: FilledCircleConfig = {
+  rAddRate: 26,
+  maxLife: 16,
+}
+export const RINGS_ANIM_CFG: RingsAnimConfig = {
+  rsList: [0, 0.08, 0.1],
+  rRoundRateList: [0, 1, 1.5, 2],
+  len: 1.1 * Math.PI,
+  maxLife: 23,
+  segNum: 10,
+  minW: 0.4,
+  maxW: 3.3,
+  lenStopAddPoint: 0.1,
+  lenStartDimPoint: 0.4,
+}
+export const CREATE_CLICK_CFG: CreateClickConfig = {
+  rings: {
+    rsList: [0, 0.03, 0.06],
+    rRoundRateList: [0, 1, 1.5, 2],
+    len: 1.1 * Math.PI,
+  },
+  sparksCount: 4,
+}
+export const DEFAULT_COLOR = '45,175,255'
+export const DEFAULT_SCALE = 1.5
+export const DEFAULT_OPACITY = 1.0
+export const DEFAULT_SPEED = 1.0
+export const DEFAULT_Z_INDEX = 2147483647
+export const BASE_FRAME_MS = 1000 / 60
+export const MAX_DELTA_MS = 100

package/src/core/types.ts ADDED Viewed

@@ -0,0 +1,92 @@
+export interface BASparkOptions {
+  color?: string
+  scale?: number
+  opacity?: number
+  trailSpeed?: number
+  clickSpeed?: number
+  trailWidth?: number
+  sparkSize?: number
+  clickScale?: number
+  alwaysTrail?: boolean
+  autoTrack?: boolean
+  zIndex?: number
+}
+export interface Point {
+  x: number
+  y: number
+}
+export interface Rect {
+  x: number
+  y: number
+  w: number
+  h: number
+}
+export interface Spark {
+  x: number
+  y: number
+  vx: number
+  vy: number
+  rot: number
+  rs: number
+  s: number
+  a: number
+  f: number
+  fromClick: boolean
+}
+export interface RingSegment {
+  off: number
+  len: number
+  rRoundRate: number
+}
+export interface Ring {
+  ang: number
+  rs: number
+  segs: RingSegment[]
+}
+export interface Wave {
+  x: number
+  y: number
+  r: number
+  life: number
+  ring: Ring
+}
+export interface TrailPoint {
+  x: number
+  y: number
+  life: number
+}
+export interface FilledCircleConfig {
+  rAddRate: number
+  maxLife: number
+}
+export interface RingsAnimConfig {
+  rsList: number[]
+  rRoundRateList: number[]
+  len: number
+  maxLife: number
+  segNum: number
+  minW: number
+  maxW: number
+  lenStopAddPoint: number
+  lenStartDimPoint: number
+}
+export interface CreateClickConfig {
+  rings: {
+    rsList: number[]
+    rRoundRateList: number[]
+    len: number
+  }
+  sparksCount: number
+}
+export type InputMode = 'mouse' | 'touch'

package/src/index.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { BASpark } from './BASpark'
+export { MouseSpark } from './core/MouseSpark'
+export type { BASparkOptions, InputMode } from './core/types'

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src"]
+}

package/tsup.config.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { defineConfig } from 'tsup'
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['esm', 'cjs', 'iife'],
+  globalName: 'BASpark',
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  minify: true,
+  outExtension({ format }) {
+    if (format === 'iife') return { js: '.global.js' }
+    if (format === 'cjs') return { js: '.cjs' }
+    return { js: '.js' }
+  },
+})