feat: support spin effect of Particles & Snow

Barrior · Mar 21, 2024 · e00208a · e00208a
1 parent 683e158
commit e00208a
Show file tree

Hide file tree

Showing 10 changed files with 319 additions and 30 deletions.
diff --git a/samples/particle-shape-spin.html b/samples/particle-shape-spin.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
+  <link rel="stylesheet" href="css/style.css">
+  <style>
+  </style>
+</head>
+<body>
+<div id="instance1">
+  <div class="demo"></div>
+  <div class="btn-box">
+    <button class="btn btn-primary" type="button" data-open>
+      open
+    </button>
+    <button class="btn btn-danger" type="button" data-pause>
+      pause
+    </button>
+  </div>
+</div>
+
+<script src="js/event.js"></script>
+<script>
+  bind('#instance1', function() {
+    return new JParticles.Particle('#instance1 .demo', {
+      num: 50,
+      maxR: 30,
+      minR: 30,
+      range: 0,
+      // 是否自旋
+      spin: true,
+      // 粒子形状
+      shape: [
+        'circle',
+        'triangle',
+        'star',
+        'star:4:0.5',
+        'star:30:0.5',
+        'https://raw.githubusercontent.com/Barrior/assets/main/smiling-face.gif'
+      ],
+    })
+  })
+</script>
+</body>
+</html>
diff --git a/samples/particle-shape.html b/samples/particle-shape.html
@@ -42,7 +42,7 @@
       minR: 30,
       shape: [
         'circle', 'triangle', 'star', 'star:4:0.5', 'star:30:0.5',
-        'https://img30.360buyimg.com/ling/jfs/t1/42528/38/16521/191828/60ecf690E1b8b016d/060dbecad0b8042a.png'
+        'https://raw.githubusercontent.com/Barrior/assets/main/smiling-face.gif'
       ],
     })
   })

diff --git a/samples/snow-shape-spin.html b/samples/snow-shape-spin.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <link rel="stylesheet" href="css/style.css">
+  <style>
+    [id*="instance"] .demo {
+      background: url(./img/merry_christmas.jpg) no-repeat;
+      background-size: 100% 100%;
+    }
+  </style>
+</head>
+<body>
+<div id="instance">
+  <div class="demo"></div>
+  <div class="btn-box">
+    <button class="btn btn-primary" type="button" data-open>
+      open
+    </button>
+    <button class="btn btn-danger" type="button" data-pause>
+      pause
+    </button>
+  </div>
+</div>
+
+<div id="instance2">
+  <div class="demo"></div>
+  <div class="btn-box">
+    <button class="btn btn-primary" type="button" data-open>
+      open
+    </button>
+    <button class="btn btn-danger" type="button" data-pause>
+      pause
+    </button>
+  </div>
+</div>
+
+<div id="instance3">
+  <div class="demo"></div>
+  <div class="btn-box">
+    <button class="btn btn-primary" type="button" data-open>
+      open
+    </button>
+    <button class="btn btn-danger" type="button" data-pause>
+      pause
+    </button>
+  </div>
+</div>
+
+<div id="instance4">
+  <div class="demo"></div>
+  <div class="btn-box">
+    <button class="btn btn-primary" type="button" data-open>
+      open
+    </button>
+    <button class="btn btn-danger" type="button" data-pause>
+      pause
+    </button>
+  </div>
+</div>
+
+<script src="js/event.js"></script>
+<script>
+  const base64PNG = 'data:image/png;base64,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'
+
+  // 测试 base64 格式
+  bind('#instance', function() {
+    return new JParticles.Snow('#instance .demo', {
+      maxR: 30,
+      minR: 10,
+      maxSpeed: 0.2,
+      shape: base64PNG,
+      spin: true,
+      spinMaxSpeed: 20,
+      spinMinSpeed: 1,
+    })
+  })
+
+  // 测试「内置」形状
+  bind('#instance2', function() {
+    return new JParticles.Snow('#instance2 .demo', {
+      maxR: 10,
+      minR: 10,
+      maxSpeed: 0.2,
+      // star:[边数][凹值]
+      shape: ['circle', 'triangle', 'star', 'star:4:0.2', 'star:6:1.5'],
+      spin: true,
+    })
+  })
+
+  // 测试 HTTP 格式
+  bind('#instance3', function() {
+    return new JParticles.Snow('#instance3 .demo', {
+      maxR: 20,
+      minR: 20,
+      maxSpeed: 0.2,
+      minSpeed: 0.2,
+      swing: false,
+      shape: [
+        'https://img10.360buyimg.com/ling/jfs/t1/180952/11/13170/68465/60e6e46fE8d8e4f15/453c2896998eda6d.png',
+        'https://img10.360buyimg.com/ling/jfs/t1/182564/22/13408/6442/60e6ee1bE014c0d60/6ef57767e19999b2.png',
+        'https://raw.githubusercontent.com/Barrior/assets/main/chrome-logo.svg'
+      ],
+      spin: true,
+    })
+  })
+
+  // 测试 HTMLImageElement 格式
+  JParticles.utils.loadImage('https://img10.360buyimg.com/ling/jfs/t1/180952/11/13170/68465/60e6e46fE8d8e4f15/453c2896998eda6d.png', (image) => {
+    bind('#instance4', function () {
+      return new JParticles.Snow('#instance4 .demo', {
+        maxR: 20,
+        minR: 20,
+        maxSpeed: 0.2,
+        minSpeed: 0.2,
+        shape: image,
+        spin: true,
+      })
+    })
+  })
+
+</script>
+</body>
+</html>
diff --git a/src/common/mask.ts b/src/common/mask.ts
@@ -6,12 +6,12 @@ export type modeMethodNames = 'modeNormal' | 'modeGhost'
 
 export default abstract class Mask<Options> extends Base<Options> {
   // 遮罩图像对象
-  protected maskImage?: CanvasImageSource
+  protected maskImage?: ICanvasImageSource
 
   // 扩展 mask 相关属性
   protected readonly options!: Options &
     CommonConfig & {
-      mask?: string | CanvasImageSource
+      mask?: string | ICanvasImageSource
       maskMode?: 'normal' | 'ghost'
     }
 
@@ -41,7 +41,7 @@ export default abstract class Mask<Options> extends Base<Options> {
         this.maskImage = image
       })
     } else {
-      this.maskImage = mask as CanvasImageSource
+      this.maskImage = mask as ICanvasImageSource
     }
   }
 

diff --git a/src/common/shape.ts b/src/common/shape.ts
@@ -1,5 +1,5 @@
 import Base from '@src/common/base'
-import { doublePi, regExp } from '@src/common/constants'
+import { doublePi, piBy180, regExp } from '@src/common/constants'
 import type { CommonConfig } from '@src/types/common-config'
 import type { ValueOf } from '@src/types/utility-types'
 import { isArray, isString, loadImage } from '@src/utils'
@@ -12,13 +12,13 @@ export type NormalShapeType = Exclude<ValueOf<typeof validShapeTypes>, 'image'>
 //   1. `star:[边数][凹值]`, 示例：`star:5:0.5`, 表示五角星
 //   2. 图片 HTTP 地址，示例：`https://xxx.com/a.jpg`
 //   3. 图片 Base64 格式，示例：`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA`
-export type ShapeType = NormalShapeType | string | CanvasImageSource
+export type ShapeType = NormalShapeType | string | ICanvasImageSource
 
 export interface ShapeData {
   // 形状类型
   type: ValueOf<typeof validShapeTypes>
   // 当为图片类型时，图片加载完毕的源文件
-  source?: CanvasImageSource
+  source?: ICanvasImageSource
   // 当为图片类型时，图片是否加载完毕
   isImageLoaded?: boolean
   // 当为 star 类型时，星形的边数
@@ -75,7 +75,6 @@ function generateShapeData(shape: ShapeType): ShapeData {
     // 处理 CanvasImageSource 类型
     if (
       shape instanceof HTMLImageElement ||
-      shape instanceof SVGImageElement ||
       shape instanceof HTMLVideoElement ||
       shape instanceof HTMLCanvasElement ||
       shape instanceof ImageBitmap ||
@@ -174,45 +173,51 @@ export default abstract class Shape<Options> extends Base<Options> {
     r: number
     color: string
     shape: ShapeData
+    rotate: number
   }): void {
     const { type, isImageLoaded, source, sides, dent } = data.shape
 
     if (validShapeTypes.indexOf(type) === -1) {
       return
     }
 
+    if (type === 'image' && (!isImageLoaded || !source)) {
+      return
+    }
+
     this.ctx.save()
 
+    // 旋转渲染
+    this.ctx.translate(data.x, data.y)
+    this.ctx.rotate(data.rotate * piBy180)
+
     if (type === 'image') {
-      if (isImageLoaded) {
-        const width = data.r * 2
-        this.ctx.drawImage(
-          source!,
-          0,
-          0,
-          (source?.width as number) || width,
-          (source?.height as number) || width,
-          data.x - data.r,
-          data.y - data.r,
-          width,
-          width
-        )
-      }
+      const width = data.r * 2
+      this.ctx.drawImage(
+        source!,
+        0,
+        0,
+        source!.width || width,
+        source!.height || width,
+        -data.r,
+        -data.r,
+        width,
+        width
+      )
     } else {
       this.ctx.beginPath()
 
       switch (data.shape.type) {
         case 'circle':
-          this.ctx.arc(data.x, data.y, data.r, 0, doublePi)
+          this.ctx.arc(0, 0, data.r, 0, doublePi)
           break
         case 'triangle':
-          drawStar(this.ctx, data.x, data.y, data.r, 3, 0.5)
+          drawStar(this.ctx, 0, 0, data.r, 3, 0.5)
           break
         case 'star':
-          drawStar(this.ctx, data.x, data.y, data.r, sides!, dent!)
+          drawStar(this.ctx, 0, 0, data.r, sides!, dent!)
           break
       }
-
       this.ctx.fillStyle = data.color
       this.ctx.fill()
     }

diff --git a/src/particle.ts b/src/particle.ts
@@ -63,6 +63,15 @@ export default class Particle extends Shape<Options> {
 
     // 视差强度，值越小视差效果越强烈
     parallaxStrength: 3,
+
+    // 是否自旋
+    spin: false,
+
+    // 粒子最大运动角速度(0, 360)
+    spinMaxSpeed: 5,
+
+    // 粒子最小运动角速度(0, 360)
+    spinMinSpeed: 1,
   }
 
   protected elements!: IElement[]
@@ -185,7 +194,16 @@ export default class Particle extends Shape<Options> {
    */
   private createDots(): void {
     const { canvasWidth, canvasHeight, getColor } = this
-    const { maxR, minR, maxSpeed, minSpeed, parallaxLayer } = this.options
+    const {
+      maxR,
+      minR,
+      maxSpeed,
+      minSpeed,
+      parallaxLayer,
+      spin,
+      spinMaxSpeed,
+      spinMinSpeed,
+    } = this.options
     const layerLength = parallaxLayer.length
     let { num } = this.options
 
@@ -204,6 +222,10 @@ export default class Particle extends Shape<Options> {
         // 定义粒子视差的偏移值
         parallaxOffsetX: 0,
         parallaxOffsetY: 0,
+        // 定义粒子的旋转角度
+        rotate: spin ? randomInRange(0, 360) : 0,
+        // 粒子的旋转速度
+        rotateSpeed: randomSpeed(spinMaxSpeed, spinMinSpeed),
       })
     }
   }
@@ -226,6 +248,10 @@ export default class Particle extends Shape<Options> {
     // 绘制粒子
     this.elements.forEach((dot) => {
       const { x, y, parallaxOffsetX, parallaxOffsetY } = dot
+
+      // 更新粒子旋转角度
+      this.updateElementRotate(dot)
+
       this.drawShape({
         ...dot,
         x: x + parallaxOffsetX,
@@ -240,6 +266,23 @@ export default class Particle extends Shape<Options> {
     this.requestAnimationFrame()
   }
 
+  /**
+   * 更新元素自旋数据
+   */
+  private updateElementRotate(element: IElement) {
+    if (!this.options.spin || this.isPaused) {
+      return
+    }
+
+    // 更新旋转角度
+    element.rotate += element.rotateSpeed
+
+    // 大于等于 360 度时，回到 0-360 范围，避免变量数值一直累计超过 MAX_SAFE_INTEGER
+    if (element.rotate >= 360) {
+      element.rotate = element.rotate - 360
+    }
+  }
+
   /**
    * 连接粒子，绘制线段
    */