Merge pull request tangly1024#2405 from Vixcity/wx

提炼 静/动态彩带特效、星空雨特效 到public，优化 线段粒子特效和樱花特效 在public中的代码

Author: tangly1024

components/FlutteringRibbon.js

@@ -1,322 +1,17 @@
 /* eslint-disable */
 import { useEffect } from 'react'
-const  id = 'canvasFlutteringRibbon'
+import { loadExternalResource } from '@/lib/utils'
+
 export const FlutteringRibbon = () => {
-     const destroyRibbon = ()=>{
-    const ribbon = document.getElementById(id)
-      if(ribbon && ribbon.parentNode){
-        ribbon.parentNode.removeChild(ribbon)
-      }
-  }
-  
   useEffect(() => {
-    createFlutteringRibbon()
-        return () => destroyRibbon()
+    loadExternalResource('/js/flutteringRibbon.js', 'js').then(url => {
+      window.createFlutteringRibbon && window.createFlutteringRibbon()
+    })
 
+    return () =>
+      window.destroyFlutteringRibbon && window.destroyFlutteringRibbon()
   }, [])
-    return <></>
+  return <></>
 }
 
 export default FlutteringRibbon
-
-
-/**
- * 创建连接点
- * @param config
- */
-function createFlutteringRibbon() {
-  'object' == typeof window &&
-    (window.Ribbons = (function () {
-      const t = window,
-        i = document.body,
-        n = document.documentElement
-      var o = function () {
-        if (1 === arguments.length) {
-          if (Array.isArray(arguments[0])) {
-            const t = Math.round(o(0, arguments[0].length - 1))
-            return arguments[0][t]
-          }
-          return o(0, arguments[0])
-        }
-        return 2 === arguments.length
-          ? Math.random() * (arguments[1] - arguments[0]) + arguments[0]
-          : 0
-      }
-      const s = function (o) {
-          const s = Math.max(
-              0,
-              t.innerWidth || n.clientWidth || i.clientWidth || 0
-            ),
-            e = Math.max(
-              0,
-              t.innerHeight || n.clientHeight || i.clientHeight || 0
-            )
-          return {
-            width: s,
-            height: e,
-            ratio: s / e,
-            centerx: s / 2,
-            centery: e / 2,
-            scrollx:
-              Math.max(0, t.pageXOffset || n.scrollLeft || i.scrollLeft || 0) -
-              (n.clientLeft || 0),
-            scrolly:
-              Math.max(0, t.pageYOffset || n.scrollTop || i.scrollTop || 0) -
-              (n.clientTop || 0)
-          }
-        },
-        e = function (t, i) {
-          ;(this.x = 0), (this.y = 0), this.set(t, i)
-        }
-      e.prototype = {
-        constructor: e,
-        set: function (t, i) {
-          ;(this.x = t || 0), (this.y = i || 0)
-        },
-        copy: function (t) {
-          return (this.x = t.x || 0), (this.y = t.y || 0), this
-        },
-        multiply: function (t, i) {
-          return (this.x *= t || 1), (this.y *= i || 1), this
-        },
-        divide: function (t, i) {
-          return (this.x /= t || 1), (this.y /= i || 1), this
-        },
-        add: function (t, i) {
-          return (this.x += t || 0), (this.y += i || 0), this
-        },
-        subtract: function (t, i) {
-          return (this.x -= t || 0), (this.y -= i || 0), this
-        },
-        clampX: function (t, i) {
-          return (this.x = Math.max(t, Math.min(this.x, i))), this
-        },
-        clampY: function (t, i) {
-          return (this.y = Math.max(t, Math.min(this.y, i))), this
-        },
-        flipX: function () {
-          return (this.x *= -1), this
-        },
-        flipY: function () {
-          return (this.y *= -1), this
-        }
-      }
-      const h = function (t) {
-        ;(this._canvas = null),
-          (this._context = null),
-          (this._sto = null),
-          (this._width = 0),
-          (this._height = 0),
-          (this._scroll = 0),
-          (this._ribbons = []),
-          (this._options = {
-            colorSaturation: '80%',
-            colorBrightness: '60%',
-            colorAlpha: 0.65,
-            colorCycleSpeed: 6,
-            verticalPosition: 'center',
-            horizontalSpeed: 150,
-            ribbonCount: 5,
-            strokeSize: 5,
-            parallaxAmount: -0.5,
-            animateSections: !0
-          }),
-          (this._onDraw = this._onDraw.bind(this)),
-          (this._onResize = this._onResize.bind(this)),
-          (this._onScroll = this._onScroll.bind(this)),
-          this.setOptions(t),
-          this.init()
-      }
-      return (
-        (h.prototype = {
-          constructor: h,
-          setOptions: function (t) {
-            if ('object' == typeof t)
-              for (const i in t)
-                t.hasOwnProperty(i) && (this._options[i] = t[i])
-          },
-          init: function () {
-            try {
-              ;(this._canvas = document.createElement('canvas')),
-                (this._canvas.id = id),
-                (this._canvas.style.display = 'block'),
-                (this._canvas.style.position = 'fixed'),
-                (this._canvas.style.margin = '0'),
-                (this._canvas.style.padding = '0'),
-                (this._canvas.style.border = '0'),
-                (this._canvas.style.outline = '0'),
-                (this._canvas.style.left = '0'),
-                (this._canvas.style.top = '0'),
-                (this._canvas.style.width = '100%'),
-                (this._canvas.style.height = '100%'),
-                (this._canvas.style['z-index'] = '0'),
-                (this._canvas.style['pointer-events'] = 'none'),
-                this._onResize(),
-                (this._context = this._canvas.getContext('2d')),
-                this._context.clearRect(0, 0, this._width, this._height),
-                (this._context.globalAlpha = this._options.colorAlpha),
-                window.addEventListener('resize', this._onResize),
-                window.addEventListener('scroll', this._onScroll),
-                document.body.appendChild(this._canvas)
-            } catch (t) {
-              return void console.warn('Canvas Context Error: ' + t.toString())
-            }
-            this._onDraw()
-          },
-          addRibbon: function () {
-            const t = Math.round(o(1, 9)) > 5 ? 'right' : 'left'
-            let i = 1e3
-            const n = 200,
-              s = 0 - n,
-              h = this._width + n
-            let a = 0,
-              r = 0
-            const l = 'right' === t ? s : h
-            let c = Math.round(o(0, this._height))
-            ;/^(top|min)$/i.test(this._options.verticalPosition)
-              ? (c = 0 + n)
-              : /^(middle|center)$/i.test(this._options.verticalPosition)
-              ? (c = this._height / 2)
-              : /^(bottom|max)$/i.test(this._options.verticalPosition) &&
-                (c = this._height - n)
-            const p = [],
-              _ = new e(l, c),
-              d = new e(l, c)
-            let u = null,
-              b = Math.round(o(0, 360)),
-              f = 0
-            for (; !(i <= 0); ) {
-              if (
-                (i--,
-                (a = Math.round(
-                  (1 * Math.random() - 0.2) * this._options.horizontalSpeed
-                )),
-                (r = Math.round(
-                  (1 * Math.random() - 0.5) * (0.25 * this._height)
-                )),
-                (u = new e()),
-                u.copy(d),
-                'right' === t)
-              ) {
-                if ((u.add(a, r), d.x >= h)) break
-              } else if ('left' === t && (u.subtract(a, r), d.x <= s)) break
-              p.push({
-                point1: new e(_.x, _.y),
-                point2: new e(d.x, d.y),
-                point3: u,
-                color: b,
-                delay: f,
-                dir: t,
-                alpha: 0,
-                phase: 0
-              }),
-                _.copy(d),
-                d.copy(u),
-                (f += 4),
-                (b += this._options.colorCycleSpeed)
-            }
-            this._ribbons.push(p)
-          },
-          _drawRibbonSection: function (t) {
-            if (t) {
-              if (t.phase >= 1 && t.alpha <= 0) return !0
-              if (t.delay <= 0) {
-                if (
-                  ((t.phase += 0.02),
-                  (t.alpha = 1 * Math.sin(t.phase)),
-                  (t.alpha = t.alpha <= 0 ? 0 : t.alpha),
-                  (t.alpha = t.alpha >= 1 ? 1 : t.alpha),
-                  this._options.animateSections)
-                ) {
-                  const i = 0.1 * Math.sin(1 + (t.phase * Math.PI) / 2)
-                  'right' === t.dir
-                    ? (t.point1.add(i, 0),
-                      t.point2.add(i, 0),
-                      t.point3.add(i, 0))
-                    : (t.point1.subtract(i, 0),
-                      t.point2.subtract(i, 0),
-                      t.point3.subtract(i, 0)),
-                    t.point1.add(0, i),
-                    t.point2.add(0, i),
-                    t.point3.add(0, i)
-                }
-              } else t.delay -= 0.5
-              const i = this._options.colorSaturation,
-                n = this._options.colorBrightness,
-                o =
-                  'hsla(' +
-                  t.color +
-                  ', ' +
-                  i +
-                  ', ' +
-                  n +
-                  ', ' +
-                  t.alpha +
-                  ' )'
-              this._context.save(),
-                0 !== this._options.parallaxAmount &&
-                  this._context.translate(
-                    0,
-                    this._scroll * this._options.parallaxAmount
-                  ),
-                this._context.beginPath(),
-                this._context.moveTo(t.point1.x, t.point1.y),
-                this._context.lineTo(t.point2.x, t.point2.y),
-                this._context.lineTo(t.point3.x, t.point3.y),
-                (this._context.fillStyle = o),
-                this._context.fill(),
-                this._options.strokeSize > 0 &&
-                  ((this._context.lineWidth = this._options.strokeSize),
-                  (this._context.strokeStyle = o),
-                  (this._context.lineCap = 'round'),
-                  this._context.stroke()),
-                this._context.restore()
-            }
-            return !1
-          },
-          _onDraw: function () {
-            for (let t = 0, i = this._ribbons.length; t < i; ++t)
-              this._ribbons[t] || this._ribbons.splice(t, 1)
-            this._context.clearRect(0, 0, this._width, this._height)
-            for (let t = 0; t < this._ribbons.length; ++t) {
-              const i = this._ribbons[t],
-                n = i.length
-              let o = 0
-              for (let t = 0; t < n; ++t) this._drawRibbonSection(i[t]) && o++
-              o >= n && (this._ribbons[t] = null)
-            }
-            this._ribbons.length < this._options.ribbonCount &&
-              this.addRibbon(),
-              requestAnimationFrame(this._onDraw)
-          },
-          _onResize: function (t) {
-            const i = s(t)
-            ;(this._width = i.width),
-              (this._height = i.height),
-              this._canvas &&
-                ((this._canvas.width = this._width),
-                (this._canvas.height = this._height),
-                this._context &&
-                  (this._context.globalAlpha = this._options.colorAlpha))
-          },
-          _onScroll: function (t) {
-            const i = s(t)
-            this._scroll = i.scrolly
-          }
-        }),
-        h
-      )
-    })())
-  new Ribbons({
-    colorSaturation: '60%',
-    colorBrightness: '50%',
-    colorAlpha: 0.5,
-    colorCycleSpeed: 5,
-    verticalPosition: 'random',
-    horizontalSpeed: 200,
-    ribbonCount: 3,
-    strokeSize: 0,
-    parallaxAmount: -0.2,
-    animateSections: !0
-  })
-}