perf(effects): 添加喜庆灯笼和雪花飘落特效,#89

settings.yaml

@@ -1033,6 +1033,19 @@ spec:
               label:  开启
             - value: false
               label:  关闭
+        - $formkit: radio
+          name: effects_lantern_mode
+          label:  喜庆灯笼特效显示模式
+          value: none
+          options:
+            - value: none
+              label:  不显示
+            - value: day
+              label:  明亮模式
+            - value: night
+              label:  黑暗模式
+            - value: all
+              label:  全模式
         - $formkit: radio
           name: effects_sakura_mode
           label:  樱花飘落特效显示模式
@@ -1046,6 +1059,19 @@ spec:
               label:  黑暗模式
             - value: all
               label:  全模式
+        - $formkit: radio
+          name: effects_snowflake_mode
+          label:  雪花飘落特效显示模式
+          value: none
+          options:
+            - value: none
+              label:  不显示
+            - value: day
+              label:  明亮模式
+            - value: night
+              label:  黑暗模式
+            - value: all
+              label:  全模式
         - $formkit: radio
           name: effects_universe_mode
           label:  宇宙星空特效显示模式

src/js/common.js

@@ -434,7 +434,9 @@ const commonContext = {
     DreamConfig.cursor_move && Utils.cachedScript(`${DreamConfig.theme_base}/js/cursor/move/${DreamConfig.cursor_move}.min.js?mew=${DreamConfig.theme_version}`)
     DreamConfig.cursor_click && Utils.cachedScript(`${DreamConfig.theme_base}/js/cursor/click/${DreamConfig.cursor_click}.min.js?mew=${DreamConfig.theme_version}`)
     DreamConfig.enable_live2d && Utils.cachedScript(`${DreamConfig.theme_base}/js/autoload.min.js?mew=${DreamConfig.theme_version}`)
+    DreamConfig.effects_lantern_mode && Utils.cachedScript(`${DreamConfig.theme_base}/js/effects/lantern.min.js?mew=${DreamConfig.theme_version}`)
     DreamConfig.effects_sakura_mode && Utils.cachedScript(`${DreamConfig.theme_base}/js/effects/sakura.min.js?mew=${DreamConfig.theme_version}`)
+    DreamConfig.effects_snowflake_mode && Utils.cachedScript(`${DreamConfig.theme_base}/js/effects/snowflake.min.js?mew=${DreamConfig.theme_version}`)
     DreamConfig.effects_universe_mode && Utils.cachedScript(`${DreamConfig.theme_base}/js/effects/universe.min.js?mew=${DreamConfig.theme_version}`)
     DreamConfig.effects_circle_magic_mode && Utils.cachedScript(`${DreamConfig.theme_base}/js/effects/circleMagic.min.js?mew=${DreamConfig.theme_version}`)
   },

src/js/effects/lantern.js

@@ -0,0 +1,51 @@
+(function (factory) {
+  typeof define === 'function' && define.amd ? define(factory) :
+    factory()
+}((function () { 'use strict'
+
+  const mode = DreamConfig.effects_lantern_mode
+
+  function styleInject(css, ref) {
+    if ( ref === void 0 ) ref = {}
+    var insertAt = ref.insertAt
+
+    if (!css || typeof document === 'undefined') { return }
+
+    var head = document.head || document.getElementsByTagName('head')[0]
+    var style = document.createElement('style')
+    style.type = 'text/css'
+
+    if (insertAt === 'top') {
+      if (head.firstChild) {
+        head.insertBefore(style, head.firstChild)
+      } else {
+        head.appendChild(style)
+      }
+    } else {
+      head.appendChild(style)
+    }
+
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css
+    } else {
+      style.appendChild(document.createTextNode(css))
+    }
+  }
+
+  let mode_css = mode === 'day' ? '.night .j-china-lantern {display: none}' : mode === 'night' ? '.j-china-lantern {display: none}.night .j-china-lantern {display: block}' : ''
+
+  var css_248z = '@charset "UTF-8";.lantern__warpper{position:fixed;top:12px;left:40px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:999}.lantern__warpper.lantern__secondary{left:calc(100% - 130px)}.lantern__warpper.lantern__secondary .lantern__box{-webkit-animation-duration:3s;animation-duration:3s}.lantern__box{position:relative;display:inline-block;width:90px;height:70px;background:rgba(216,0,15,.8);border-radius:50% 50%;animation:lantern-swing 3s ease-in-out infinite alternate-reverse;-webkit-transform-origin:50% -70px;-ms-transform-origin:50% -70px;transform-origin:50% -70px;-webkit-box-shadow:-5px 5px 50px 4px #fa6c00;box-shadow:-5px 5px 50px 4px #fa6c00}.lantern__box:after,.lantern__box:before{content:"";position:absolute;height:8px;width:45px;left:50%;border:1px solid #dc8f03;background:-webkit-gradient(linear,left top,right top,from(#dc8f03),color-stop(orange),color-stop(#dc8f03),color-stop(orange),to(#dc8f03));background:-o-linear-gradient(left,#dc8f03,orange,#dc8f03,orange,#dc8f03);background:linear-gradient(90deg,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.lantern__box:before{top:0;border-radius:5px 5px 0 0;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.lantern__box:after{bottom:0;border-radius:0 0 5px 5px;-webkit-transform:translate(-50%,50%);-ms-transform:translate(-50%,50%);transform:translate(-50%,50%)}.lantern__line{position:absolute;width:2px;height:12px;top:0;left:50%;-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);background:#dc8f03}.lantern__circle{width:80%;-webkit-box-sizing:border-box;box-sizing:border-box}.lantern__circle,.lantern__circle .lantern__ellipse{height:100%;margin:0 auto;border-radius:50%;border:2px solid #dc8f03}.lantern__circle .lantern__ellipse{width:50%}.lantern__circle .lantern__text{font-family:华文行楷,Microsoft YaHei,sans-serif;font-size:24.3px;color:#dc8f03;font-weight:700;line-height:66px;text-align:center}.lantern__tail{position:relative;width:4px;height:12px;margin:0 auto;animation:lantern-swing 4s ease-in-out infinite alternate-reverse;background:orange;border-radius:0 0 5px 5px}.lantern__tail .lantern__junction{position:absolute;top:0;left:50%;width:8px;height:8px;-webkit-transform:translate(-50%,8.4px);-ms-transform:translate(-50%,8.4px);transform:translate(-50%,8.4px);background:#e69603;border-radius:50%}.lantern__tail .lantern__rect{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%,10.8px);-ms-transform:translate(-50%,10.8px);transform:translate(-50%,10.8px);width:8px;height:24px;background:orange;border-radius:5px 5px 0 5px}@-webkit-keyframes lantern-swing{0%{-webkit-transform:rotate(-8deg);transform:rotate(-8deg)}to{-webkit-transform:rotate(8deg);transform:rotate(8deg)}}@keyframes lantern-swing{0%{-webkit-transform:rotate(-8deg);transform:rotate(-8deg)}to{-webkit-transform:rotate(8deg);transform:rotate(8deg)}}@media (max-width:460px){.lantern__warpper{top:8px;left:30px}.lantern__warpper.lantern__secondary{left:calc(100% - 80px)}.lantern__box{width:50px;height:40px;-webkit-transform-origin:50% -40px;-ms-transform-origin:50% -40px;transform-origin:50% -40px;-webkit-box-shadow:-5px 5px 50px -1px #fa6c00;box-shadow:-5px 5px 50px -1px #fa6c00}.lantern__box:after,.lantern__box:before{height:4px;width:25px}.lantern__line{width:2px;height:8px}.lantern__circle .lantern__text{font-size:13.5px;line-height:38px}.lantern__tail{width:4px;height:8px}.lantern__tail .lantern__junction{width:8px;height:8px;-webkit-transform:translate(-50%,5.6px);-ms-transform:translate(-50%,5.6px);transform:translate(-50%,5.6px)}.lantern__tail .lantern__rect{-webkit-transform:translate(-50%,7.2px);-ms-transform:translate(-50%,7.2px);transform:translate(-50%,7.2px);width:8px;height:16px}}' + mode_css
+  styleInject(css_248z)
+
+  var content = '<div class="lantern__warpper"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">喜</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div><div class="lantern__warpper lantern__secondary"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">庆</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div>'
+
+  function createElement() {
+    var div = document.createElement('div')
+    div.className = 'j-china-lantern'
+    div.innerHTML = content
+    document.body.appendChild(div)
+  }
+
+  createElement()
+
+})))

src/js/effects/snowflake.js

@@ -0,0 +1,146 @@
+/* 控制下雪 */
+function snowFall(snow) {
+  /* 可配置属性 */
+  snow = snow || {}
+  this.maxFlake = snow.maxFlake || 10   /* 最多片数 */
+  this.flakeSize = snow.flakeSize || 10  /* 雪花形状 */
+  this.fallSpeed = snow.fallSpeed || 1   /* 坠落速度 */
+}
+
+const mode = DreamConfig.effects_snowflake_mode
+
+/* 兼容写法 */
+let requestAnimationFrame = window.requestAnimationFrame ||
+  window.mozRequestAnimationFrame ||
+  window.webkitRequestAnimationFrame ||
+  window.msRequestAnimationFrame ||
+  window.oRequestAnimationFrame ||
+  function(callback) { setTimeout(callback, 1000 / 60) }
+
+let cancelAnimationFrame = window.cancelAnimationFrame ||
+  window.mozCancelAnimationFrame ||
+  window.webkitCancelAnimationFrame ||
+  window.msCancelAnimationFrame ||
+  window.oCancelAnimationFrame
+
+/* 开始下雪 */
+snowFall.prototype.start = function(){
+  /* 创建画布 */
+  snowCanvas.apply(this)
+  /* 创建雪花形状 */
+  createFlakes.apply(this)
+  /* 画雪 */
+  drawSnow.apply(this)
+}
+
+/* 创建画布 */
+function snowCanvas() {
+  /* 添加Dom结点 */
+  var snowcanvas = document.createElement('canvas')
+  snowcanvas.id = 'snowfall'
+  snowcanvas.width = document.body.offsetWidth
+  snowcanvas.height = window.innerHeight
+  snowcanvas.setAttribute('class', `canvas_effects ${mode}`)
+  snowcanvas.setAttribute('style', 'z-index: 9999;')
+  document.getElementsByTagName('body')[0].appendChild(snowcanvas)
+  this.canvas = snowcanvas
+  this.ctx = snowcanvas.getContext('2d')
+
+  /* 窗口大小改变的处理 */
+  window.onresize = function() {
+    snowcanvas.width = document.body.offsetWidth
+    snowcanvas.height = window.innerHeight
+  }
+
+}
+
+/* 雪运动对象 */
+function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
+  this.x = Math.floor(Math.random() * canvasWidth)   /* x坐标 */
+  this.y = Math.floor(Math.random() * canvasHeight)  /* y坐标 */
+  this.size = Math.random() * flakeSize + 2          /* 形状 */
+  this.maxSize = flakeSize                           /* 最大形状 */
+  this.speed = Math.random() * 1 + fallSpeed         /* 坠落速度 */
+  this.fallSpeed = fallSpeed                         /* 坠落速度 */
+  this.velY = this.speed                             /* Y方向速度 */
+  this.velX = 0                                      /* X方向速度 */
+  this.stepSize = Math.random() / 30                 /* 步长 */
+  this.step = 0                                       /* 步数 */
+}
+
+flakeMove.prototype.update = function() {
+  var x = this.x,
+    y = this.y
+  /* 左右摆动(余弦) */
+  this.velX *= 0.98
+  if (this.velY <= this.speed) {
+    this.velY = this.speed
+  }
+  this.velX += Math.cos(this.step += .05) * this.stepSize
+
+  this.y += this.velY
+  this.x += this.velX
+  /* 飞出边界的处理 */
+  if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
+    this.reset(canvas.width, canvas.height)
+  }
+}
+
+/* 飞出边界-放置最顶端继续坠落 */
+flakeMove.prototype.reset = function(width, height) {
+  this.x = Math.floor(Math.random() * width)
+  this.y = 0
+  this.size = Math.random() * this.maxSize + 2
+  this.speed = Math.random() * 1 + this.fallSpeed
+  this.velY = this.speed
+  this.velX = 0
+}
+
+// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
+flakeMove.prototype.render = function(ctx) {
+  var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size)
+  snowFlake.addColorStop(0, 'rgba(255, 255, 255, 0.9)')  /* 此处是雪花颜色，默认是白色 */
+  snowFlake.addColorStop(.5, 'rgba(255, 255, 255, 0.5)') /* 若要改为其他颜色，请自行查 */
+  snowFlake.addColorStop(1, 'rgba(255, 255, 255, 0)')    /* 找16进制的RGB 颜色代码。 */
+  ctx.save()
+  ctx.fillStyle = snowFlake
+  ctx.beginPath()
+  ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
+  ctx.fill()
+  ctx.restore()
+}
+
+/* 创建雪花-定义形状 */
+function createFlakes() {
+  var maxFlake = this.maxFlake,
+    flakes = this.flakes = [],
+    canvas = this.canvas
+  for (var i = 0; i < maxFlake; i++) {
+    flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
+  }
+}
+
+/* 画雪 */
+function drawSnow() {
+  const isNight = document.documentElement.classList.contains('night')
+  if (mode === 'all' || (mode === 'day' && !isNight) || (mode === 'night' && isNight)) {
+    var maxFlake = this.maxFlake,
+      flakes = this.flakes
+    ctx = this.ctx, canvas = this.canvas
+    /* 清空雪花 */
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    for (var e = 0; e < maxFlake; e++) {
+      flakes[e].update()
+      flakes[e].render(ctx)
+    }
+  }
+  that = this
+  /* 一帧一帧的画 */
+  this.loop = requestAnimationFrame(function() {
+    drawSnow.apply(that)
+  })
+}
+
+/* 调用及控制方法 */
+var snow = new snowFall({maxFlake:150})
+snow.start()

templates/assets/js/effects/snowflake.min.js

@@ -0,0 +1 @@
+(()=>{function t(t){this.maxFlake=(t=t||{}).maxFlake||10,this.flakeSize=t.flakeSize||10,this.fallSpeed=t.fallSpeed||1}const s=DreamConfig.effects_snowflake_mode;let n=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(t){setTimeout(t,1e3/60)};function h(t,e,i,a){this.x=Math.floor(Math.random()*t),this.y=Math.floor(Math.random()*e),this.size=Math.random()*i+2,this.maxSize=i,this.speed=+Math.random()+a,this.fallSpeed=a,this.velY=this.speed,this.velX=0,this.stepSize=Math.random()/30,this.step=0}function o(){var t=document.documentElement.classList.contains("night");if("all"===s||"day"===s&&!t||"night"===s&&t){var e=this.maxFlake,i=this.flakes;ctx=this.ctx,canvas=this.canvas,ctx.clearRect(0,0,canvas.width,canvas.height);for(var a=0;a<e;a++)i[a].update(),i[a].render(ctx)}(that=this).loop=n(function(){o.apply(that)})}window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.msCancelAnimationFrame||window.oCancelAnimationFrame,t.prototype.start=function(){(function(){var t=document.createElement("canvas");t.id="snowfall",t.width=document.body.offsetWidth,t.height=window.innerHeight,t.setAttribute("class","canvas_effects "+s),t.setAttribute("style","z-index: 9999;"),document.getElementsByTagName("body")[0].appendChild(t),this.canvas=t,this.ctx=t.getContext("2d"),window.onresize=function(){t.width=document.body.offsetWidth,t.height=window.innerHeight}}).apply(this),function(){for(var t=this.maxFlake,e=this.flakes=[],i=this.canvas,a=0;a<t;a++)e.push(new h(i.width,i.height,this.flakeSize,this.fallSpeed))}.apply(this),o.apply(this)},h.prototype.update=function(){this.x,this.y,this.velX*=.98,this.velY<=this.speed&&(this.velY=this.speed),this.velX+=Math.cos(this.step+=.05)*this.stepSize,this.y+=this.velY,this.x+=this.velX,(this.x>=canvas.width||this.x<=0||this.y>=canvas.height||this.y<=0)&&this.reset(canvas.width,canvas.height)},h.prototype.reset=function(t,e){this.x=Math.floor(Math.random()*t),this.y=0,this.size=Math.random()*this.maxSize+2,this.speed=+Math.random()+this.fallSpeed,this.velY=this.speed,this.velX=0},h.prototype.render=function(t){var e=t.createRadialGradient(this.x,this.y,0,this.x,this.y,this.size);e.addColorStop(0,"rgba(255, 255, 255, 0.9)"),e.addColorStop(.5,"rgba(255, 255, 255, 0.5)"),e.addColorStop(1,"rgba(255, 255, 255, 0)"),t.save(),t.fillStyle=e,t.beginPath(),t.arc(this.x,this.y,this.size,0,2*Math.PI),t.fill(),t.restore()},new t({maxFlake:150}).start()})();

templates/common/config.html

@@ -82,7 +82,9 @@
       [(${(!#strings.isEmpty(theme.config.page_config.journals_fold_height) && #numbers.sequence(theme.config.page_config.journals_fold_height,theme.config.page_config.journals_fold_height)[0] >= 260)?'DreamConfig["journals_fold_height"] = ' + theme.config.page_config.journals_fold_height + ';': ''})]
       [(${theme.config.enhance.cursor_move != 'none'?'DreamConfig["cursor_move"] = "' + theme.config.enhance.cursor_move + '";': ''})]
       [(${theme.config.enhance.cursor_click != 'none'?'DreamConfig["cursor_click"] = "' + theme.config.enhance.cursor_click + '";': ''})]
+      [(${theme.config.enhance.effects_lantern_mode != 'none'?'DreamConfig["effects_lantern_mode"] = "' + theme.config.enhance.effects_lantern_mode + '";': ''})]
       [(${theme.config.enhance.effects_sakura_mode != 'none'?'DreamConfig["effects_sakura_mode"] = "' + theme.config.enhance.effects_sakura_mode + '";': ''})]
+      [(${theme.config.enhance.effects_snowflake_mode != 'none'?'DreamConfig["effects_snowflake_mode"] = "' + theme.config.enhance.effects_snowflake_mode + '";': ''})]
       [(${theme.config.enhance.effects_universe_mode != 'none'?'DreamConfig["effects_universe_mode"] = "' + theme.config.enhance.effects_universe_mode + '";': ''})]
       [(${theme.config.enhance.effects_circle_magic_mode != 'none'?'DreamConfig["effects_circle_magic_mode"] = "' + theme.config.enhance.effects_circle_magic_mode + '";': ''})]
       [(${theme.config.enhance.enable_baidu_push?'DreamConfig["enable_baidu_push"] = true;': ''})]