(function(){ // 初始化函数 用于启动雪花效果 function init(){ const canvas = document.getElementById('effectiveAppsSnow'); // 条件判断 如果未找到画布元素则不执行 if (!canvas) return; const prefersReducedMotion = (typeof window.matchMedia === 'function') && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (prefersReducedMotion) { canvas.style.display = 'none'; return; } const context = canvas.getContext('2d'); let viewportWidth = window.innerWidth; let viewportHeight = window.innerHeight; const devicePixelRatio = window.devicePixelRatio || 1; // 读取首页显示时长设置 单位为秒 0 表示无限 const displayDurationSeconds = (window.YooneSnowSettings && typeof window.YooneSnowSettings.displayDurationSeconds !== 'undefined') ? Math.max(0, parseInt(window.YooneSnowSettings.displayDurationSeconds, 10) || 0) : 0; // 记录启动时间 用于计算已运行时间 const startTimestamp = performance.now(); // 标记是否已达到显示时长 到达后不再生成新粒子并不再重生 let hasReachedDuration = false; const selectedShapes = (window.YooneSnowSettings && Array.isArray(window.YooneSnowSettings.selectedShapes) && window.YooneSnowSettings.selectedShapes.length > 0) ? window.YooneSnowSettings.selectedShapes : []; const mediaItems = (window.YooneSnowSettings && Array.isArray(window.YooneSnowSettings.mediaItems)) ? window.YooneSnowSettings.mediaItems : []; const emojiItems = (window.YooneSnowSettings && Array.isArray(window.YooneSnowSettings.emojiItems)) ? window.YooneSnowSettings.emojiItems : []; const textItems = (window.YooneSnowSettings && Array.isArray(window.YooneSnowSettings.textItems)) ? window.YooneSnowSettings.textItems : []; const defaultShapeWeights = { dot: 1, flake: 4, yuanbao: 1, coin: 1, santa_hat: 1, candy_cane: 1, christmas_sock: 1, christmas_tree: 1, reindeer: 1, christmas_berry: 1 }; const shapeWeightsRaw = (window.YooneSnowSettings && window.YooneSnowSettings.shapeWeights && typeof window.YooneSnowSettings.shapeWeights === 'object') ? window.YooneSnowSettings.shapeWeights : {}; const mediaWeightsRaw = (window.YooneSnowSettings && window.YooneSnowSettings.mediaWeights && typeof window.YooneSnowSettings.mediaWeights === 'object') ? window.YooneSnowSettings.mediaWeights : {}; const emojiWeightsRaw = (window.YooneSnowSettings && window.YooneSnowSettings.emojiWeights && typeof window.YooneSnowSettings.emojiWeights === 'object') ? window.YooneSnowSettings.emojiWeights : {}; const textWeightsRaw = (window.YooneSnowSettings && window.YooneSnowSettings.textWeights && typeof window.YooneSnowSettings.textWeights === 'object') ? window.YooneSnowSettings.textWeights : {}; const shapeWeights = {}; for (let key in defaultShapeWeights){ const val = typeof shapeWeightsRaw[key] !== 'undefined' ? parseInt(shapeWeightsRaw[key], 10) : defaultShapeWeights[key]; shapeWeights[key] = isNaN(val) ? defaultShapeWeights[key] : Math.max(0, val); } const assetsMap = (window.YooneSnowSettings && window.YooneSnowSettings.assetsMap && typeof window.YooneSnowSettings.assetsMap === 'object') ? window.YooneSnowSettings.assetsMap : {}; const assetShapeKeys = Object.keys(assetsMap || {}); window.YooneSnowAssetsReady = window.YooneSnowAssetsReady || false; window.YooneSnowAssetQueue = window.YooneSnowAssetQueue || []; window.YooneSnowAssetQueueRunning = window.YooneSnowAssetQueueRunning || false; function enqueueAsset(u){ if (!u || typeof u !== 'string'){ return; } for (var i = 0; i < window.YooneSnowAssetQueue.length; i++){ if (window.YooneSnowAssetQueue[i] === u) return; } window.YooneSnowAssetQueue.push(u); } function runAssetQueue(){ if (window.YooneSnowAssetQueueRunning){ return; } window.YooneSnowAssetQueueRunning = true; function next(){ if (window.YooneSnowAssetQueue.length === 0){ window.YooneSnowAssetQueueRunning = false; window.YooneSnowAssetsReady = true; return; } var u = window.YooneSnowAssetQueue.shift(); if (typeof window.YooneSnowLoadAssetViaFetch === 'function'){ window.YooneSnowLoadAssetViaFetch(u, function(){ next(); }); } else if (typeof window.YooneSnowGetOrLoadImage === 'function'){ var rec = window.YooneSnowGetOrLoadImage(u); if (rec && rec.img){ var prevOnload = rec.img.onload; var prevOnerror = rec.img.onerror; rec.img.onload = function(){ try{ if (typeof prevOnload === 'function'){ prevOnload(); } }catch(e){} next(); }; rec.img.onerror = function(){ try{ if (typeof prevOnerror === 'function'){ prevOnerror(); } }catch(e){} next(); }; } else { next(); } } else { next(); } } next(); } window.YooneSnowEnqueueAsset = enqueueAsset; function scheduleWarmLoad(){ var urls = []; for (var i = 0; i < assetShapeKeys.length; i++){ var k = assetShapeKeys[i]; var u = assetsMap[k]; if (typeof u === 'string' && u){ urls.push(u); } } for (var j = 0; j < urls.length; j++){ enqueueAsset(urls[j]); } runAssetQueue(); } scheduleWarmLoad(); // 移除单独的尺寸与偏移缩放 直接使用最小半径与最小摆动作为缩放系数 const radiusMinRaw = (window.YooneSnowSettings && typeof window.YooneSnowSettings.radiusMin !== 'undefined') ? parseFloat(window.YooneSnowSettings.radiusMin) : 1.0; const radiusMaxRaw = (window.YooneSnowSettings && typeof window.YooneSnowSettings.radiusMax !== 'undefined') ? parseFloat(window.YooneSnowSettings.radiusMax) : 3.0; const driftMinRaw = (window.YooneSnowSettings && typeof window.YooneSnowSettings.driftMin !== 'undefined') ? parseFloat(window.YooneSnowSettings.driftMin) : 0.4; const driftMaxRaw = (window.YooneSnowSettings && typeof window.YooneSnowSettings.driftMax !== 'undefined') ? parseFloat(window.YooneSnowSettings.driftMax) : 1.0; const swingMinRaw = (window.YooneSnowSettings && typeof window.YooneSnowSettings.swingMin !== 'undefined') ? parseFloat(window.YooneSnowSettings.swingMin) : 0.2; const swingMaxRaw = (window.YooneSnowSettings && typeof window.YooneSnowSettings.swingMax !== 'undefined') ? parseFloat(window.YooneSnowSettings.swingMax) : 1.0; const radiusMin = isNaN(radiusMinRaw) ? 1 : Math.max(0, radiusMinRaw); const radiusMax = isNaN(radiusMaxRaw) ? 3 : Math.max(radiusMin, radiusMaxRaw); const driftMin = isNaN(driftMinRaw) ? 0.4 : Math.max(0, driftMinRaw); const driftMax = isNaN(driftMaxRaw) ? 1.0 : Math.max(driftMin, driftMaxRaw); const swingMin = isNaN(swingMinRaw) ? 0.2 : Math.max(0, swingMinRaw); const swingMax = isNaN(swingMaxRaw) ? 1.0 : Math.max(swingMin, swingMaxRaw); // 组件与精灵类封装 基于 Cocos 风格 class Component { constructor(){ } init(engine, sprite){} update(engine, sprite, dt){} } class DownwardMoveComponent extends Component { init(engine, sprite){} update(engine, sprite, dt){ // 使用基于时间的更新 通过帧因子平滑帧率波动 const factor = Math.max(0.5, Math.min(2.0, dt * 60)); const vy = (sprite.driftSpeed * 2 + sprite.radius * 0.25) * factor; sprite.positionY += vy; } } class SwingComponent extends Component { init(engine, sprite){} update(engine, sprite, dt){ const factor = Math.max(0.5, Math.min(2.0, dt * 60)); const vx = Math.sin(sprite.positionY * 0.01) * sprite.swingAmplitude * factor; sprite.positionX += vx; } } class LifetimeComponent extends Component { init(engine, sprite){} update(engine, sprite, dt){ // 超出视口则标记移出 引擎将回收 if (sprite.positionY > engine.getViewportHeight() + 5){ sprite.outOfView = true; } } } class Sprite { constructor(props){ this.positionX = props.positionX; this.positionY = props.positionY; this.radius = props.radius; this.driftSpeed = props.driftSpeed; this.swingAmplitude = props.swingAmplitude; this.shapeType = props.shapeType; this.imageUrl = props.imageUrl || null; this.emojiText = props.emojiText || null; this.outOfView = false; this.components = []; } addComponent(comp){ this.components.push(comp); } init(engine){ for (let i = 0; i < this.components.length; i++){ try{ this.components[i].init(engine, this); }catch(e){} } } update(engine, dt){ for (let i = 0; i < this.components.length; i++){ try{ this.components[i].update(engine, this, dt); }catch(e){} } } render(engine){ const ctx = engine.context; const registry = window.YooneSnowShapeRenderers || {}; const renderer = registry[this.shapeType] || registry['dot']; if (typeof renderer === 'function'){ renderer(ctx, this.positionX, this.positionY, this.radius); } } } class Snow extends Sprite { constructor(props){ super(props); } render(engine){ const ctx = engine.context; if (this.shapeType === 'media_image' && this.imageUrl){ const record = window.YooneSnowGetOrLoadImage ? window.YooneSnowGetOrLoadImage(this.imageUrl) : { img: null, ready: false }; if (record && record.ready){ const targetHeight = this.radius * 8; const targetWidth = targetHeight; window.YooneSnowDrawCenteredImage(ctx, record.img, this.positionX, this.positionY, targetWidth, targetHeight); } return; } if (this.shapeType === 'emoji_text' && this.emojiText){ ctx.save(); const fontSize = Math.max(12, this.radius * 6); ctx.font = String(Math.floor(fontSize)) + 'px system-ui, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(String(this.emojiText), this.positionX, this.positionY); ctx.restore(); return; } if (this.shapeType === 'text_label' && this.emojiText){ ctx.save(); const fontSize = Math.max(12, this.radius * 5.5); ctx.font = String(Math.floor(fontSize)) + 'px system-ui, -apple-system, Segoe UI, Roboto, Noto Sans'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = 'rgba(255,255,255,0.9)'; ctx.fillText(String(this.emojiText), this.positionX, this.positionY); ctx.restore(); return; } const registry = window.YooneSnowShapeRenderers || {}; const renderer = registry[this.shapeType] || registry['dot']; if (typeof renderer === 'function'){ renderer(ctx, this.positionX, this.positionY, this.radius); } } } // 简易引擎引用 用于组件获取上下文与视口尺寸 始终返回最新值 const engineRef = { getViewportWidth: function(){ return viewportWidth; }, getViewportHeight: function(){ return viewportHeight; }, context: context }; class Animator { constructor(onFrame, isDone, onStopped){ this.onFrame = onFrame; this.isDone = isDone; this.onStopped = onStopped; this.lastTs = performance.now(); this.rafId = null; this.running = false; this.loop = this.loop.bind(this); } init(){ this.lastTs = performance.now(); this.running = false; } loop(){ if (!this.running) return; const nowTs = performance.now(); const deltaSeconds = Math.max(0, (nowTs - this.lastTs) / 1000); this.lastTs = nowTs; if (typeof this.onFrame === 'function'){ this.onFrame(deltaSeconds); } const done = typeof this.isDone === 'function' ? this.isDone() : false; if (done){ this.stop(); if (typeof this.onStopped === 'function'){ this.onStopped(); } return; } this.rafId = requestAnimationFrame(this.loop); } update(){ this.running = true; this.rafId = requestAnimationFrame(this.loop); } stop(){ if (this.rafId !== null && typeof cancelAnimationFrame === 'function'){ try{ cancelAnimationFrame(this.rafId); }catch(e){} this.rafId = null; } this.running = false; } } class SnowAnimator extends Animator { constructor(){ super(function(dt){ if (typeof this.onFrameImpl === 'function'){ this.onFrameImpl(dt); } }, function(){ return typeof this.isDoneImpl === 'function' ? this.isDoneImpl() : false; }, function(){ if (typeof this.onStoppedImpl === 'function'){ this.onStoppedImpl(); } }); this.onFrameImpl = null; this.isDoneImpl = null; this.onStoppedImpl = null; this.targetCount = 0; } computeTargetCount(){ this.targetCount = snowflakesTargetCount; return this.targetCount; } init(){ this.computeTargetCount(); initSnowPrefill(); this.onFrameImpl = function(deltaSeconds){ updateSystem(deltaSeconds); renderSystem(); }; this.isDoneImpl = function(){ return shouldStop(); }; this.onStoppedImpl = function(){ cleanupStop(); }; super.init(); } update(){ super.update(); } stop(){ super.stop(); } } // 函数 调整画布尺寸并设置像素比 保证清晰显示 function resizeCanvas(){ viewportWidth = window.innerWidth; viewportHeight = window.innerHeight; const displayWidth = viewportWidth; const displayHeight = viewportHeight; canvas.style.width = displayWidth + 'px'; canvas.style.height = displayHeight + 'px'; canvas.width = Math.floor(displayWidth * devicePixelRatio); canvas.height = Math.floor(displayHeight * devicePixelRatio); context.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0); } resizeCanvas(); // 读取分屏最大数量设置 0 表示自动 根据屏幕最小边界划分为 small medium large function computeAutoCount(kind){ const area = viewportWidth * viewportHeight; if (kind === 'small'){ const est = area / 36000; return Math.floor(Math.min(80, Math.max(40, est))); } if (kind === 'medium'){ // 中屏适中限制到 [100 200] const est = area / 18000; return Math.floor(Math.min(200, Math.max(100, est))); } // 大屏较多但仍限制到 [140 300] const est = area / 12000; return Math.floor(Math.min(300, Math.max(140, est))); } const minDim = Math.min(viewportWidth, viewportHeight); const rawSmall = (window.YooneSnowSettings && typeof window.YooneSnowSettings.maxCountSmall !== 'undefined') ? parseInt(window.YooneSnowSettings.maxCountSmall, 10) : 0; const rawMedium = (window.YooneSnowSettings && typeof window.YooneSnowSettings.maxCountMedium !== 'undefined') ? parseInt(window.YooneSnowSettings.maxCountMedium, 10) : 0; const rawLarge = (window.YooneSnowSettings && typeof window.YooneSnowSettings.maxCountLarge !== 'undefined') ? parseInt(window.YooneSnowSettings.maxCountLarge, 10) : 0; const fallbackSingle = (window.YooneSnowSettings && typeof window.YooneSnowSettings.maxCount !== 'undefined') ? parseInt(window.YooneSnowSettings.maxCount, 10) : 0; let snowflakesTargetCount = 0; if (minDim <= 480){ snowflakesTargetCount = (isNaN(rawSmall) || rawSmall <= 0) ? computeAutoCount('small') : rawSmall; } else if (minDim <= 960){ snowflakesTargetCount = (isNaN(rawMedium) || rawMedium <= 0) ? computeAutoCount('medium') : rawMedium; } else { snowflakesTargetCount = (isNaN(rawLarge) || rawLarge <= 0) ? computeAutoCount('large') : rawLarge; } if (snowflakesTargetCount <= 0){ // 回退到旧单值设置 仍支持 0 自动 snowflakesTargetCount = (isNaN(fallbackSingle) || fallbackSingle <= 0) ? computeAutoCount(minDim <= 480 ? 'small' : (minDim <= 960 ? 'medium' : 'large')) : fallbackSingle; } snowflakesTargetCount = Math.max(1, snowflakesTargetCount); const snowflakes = []; // 定义连续生成控制参数 使用时间积累的方式平滑新增 let spawnAccumulator = 0; let lastUpdateTimestamp = performance.now(); let rafId = null; // 定义黄金比例相位用于水平位置分布避免聚集 let spawnPhase = Math.random(); const goldenRatio = 0.61803398875; var yooneLogEntries = Array.isArray(window.YooneSnowLogEntries) ? window.YooneSnowLogEntries : []; window.YooneSnowLogEntries = yooneLogEntries; function yooneLogPush(entry){ try { yooneLogEntries.push(Object.assign({ ts: performance.now() }, entry)); if (yooneLogEntries.length > 1500){ yooneLogEntries.shift(); } // 关闭默认的控制台输出 避免在高频帧中阻塞主线程导致动画卡顿 } catch(e){} } window.YooneSnowGetLog = function(){ return yooneLogEntries.slice(); }; // 函数 按权重选择形状或媒体图像 function selectWeightedItem(){ const items = []; for (let sIndex = 0; sIndex < selectedShapes.length; sIndex++){ const shapeKey = selectedShapes[sIndex]; const weightVal = typeof shapeWeights[shapeKey] !== 'undefined' ? shapeWeights[shapeKey] : 1; if (weightVal > 0){ if (assetShapeKeys.indexOf(shapeKey) >= 0){ const aurl = assetsMap[shapeKey]; if (aurl && typeof window.YooneSnowEnqueueAsset === 'function'){ window.YooneSnowEnqueueAsset(aurl); } } items.push({ kind: 'shape', key: shapeKey, weight: weightVal }); } } // Emoji 候選獨立加入 不依賴 Shapes 是否包含 emoji if (emojiItems.length > 0){ for (let eIndex = 0; eIndex < emojiItems.length; eIndex++){ const ch = String(emojiItems[eIndex] || '').trim(); if (ch === ''){ continue; } const ewRaw = typeof emojiWeightsRaw[ch] !== 'undefined' ? parseInt(emojiWeightsRaw[ch], 10) : 1; const ew = isNaN(ewRaw) ? 1 : Math.max(0, ewRaw); if (ew > 0){ items.push({ kind: 'emoji', text: ch, weight: ew }); } } } if (textItems.length > 0){ for (let tIndex = 0; tIndex < textItems.length; tIndex++){ const tx = String(textItems[tIndex] || '').trim(); if (tx === ''){ continue; } const twRaw = typeof textWeightsRaw[tx] !== 'undefined' ? parseInt(textWeightsRaw[tx], 10) : 1; const tw = isNaN(twRaw) ? 1 : Math.max(0, twRaw); if (tw > 0){ items.push({ kind: 'text', text: tx, weight: tw }); } } } for (let mIndex = 0; mIndex < mediaItems.length; mIndex++){ const mediaUrl = mediaItems[mIndex]; const mediaWeight = typeof mediaWeightsRaw[mediaUrl] !== 'undefined' ? parseInt(mediaWeightsRaw[mediaUrl], 10) : 1; const finalMediaWeight = isNaN(mediaWeight) ? 1 : Math.max(0, mediaWeight); if (finalMediaWeight > 0){ const rec = (typeof window.YooneSnowGetOrLoadImage === 'function' && mediaUrl) ? window.YooneSnowGetOrLoadImage(mediaUrl) : null; if (rec && rec.ready){ items.push({ kind: 'media', url: mediaUrl, weight: finalMediaWeight }); } } } if (items.length === 0){ return null; } let totalWeight = 0; for (let i = 0; i < items.length; i++){ totalWeight += items[i].weight; } const r = Math.random() * totalWeight; let acc = 0; for (let i = 0; i < items.length; i++){ acc += items[i].weight; // 条件判断 如果随机值落在当前累计权重内则选择该项 if (r <= acc){ if (items[i].kind === 'shape'){ return { type: items[i].key, url: null, text: null }; } else { if (items[i].kind === 'media'){ return { type: 'media_image', url: items[i].url, text: null }; } else { if (items[i].kind === 'emoji'){ return { type: 'emoji_text', url: null, text: items[i].text }; } else { return { type: 'text_label', url: null, text: items[i].text }; } } } } } return null; } function createSnowflake(preferredX, preferredY){ const picked = selectWeightedItem(); if (!picked){ return null; } let chosenType = picked.type; let chosenImageUrl = picked.url; let chosenEmojiText = picked.text; const sprite = new Snow({ positionX: typeof preferredX === 'number' ? preferredX : Math.random() * viewportWidth, positionY: typeof preferredY === 'number' ? preferredY : (-1 - Math.random() * 4), radius: (Math.random() * (radiusMax - radiusMin) + radiusMin) * radiusMin, driftSpeed: Math.random() * (driftMax - driftMin) + driftMin, swingAmplitude: (Math.random() * (swingMax - swingMin) + swingMin) * swingMin, shapeType: chosenType, imageUrl: chosenImageUrl, emojiText: chosenEmojiText }); sprite.addComponent(new DownwardMoveComponent()); sprite.addComponent(new SwingComponent()); sprite.addComponent(new LifetimeComponent()); sprite.init(engineRef); return sprite; } // 计算平均垂直速度 辅助估算生成速率 保证视觉连续 function computeAverageVerticalSpeed(){ let countInView = 0; let speedSum = 0; for (let idx = 0; idx < snowflakes.length; idx++){ const flake = snowflakes[idx]; if (flake.outOfView){ continue; } const verticalSpeed = (flake.driftSpeed * 2 + flake.radius * 0.25) * 60; speedSum += verticalSpeed; countInView++; } if (countInView > 0){ return speedSum / countInView; } const driftAverage = (driftMin + driftMax) * 0.5; const radiusAverage = ((radiusMin + radiusMax) * 0.5) * radiusMin; return (driftAverage * 2 + radiusAverage * 0.25) * 60; } // 函数 根据视口高度 目标最大数量 与平均速度估算初始化预填充数量 function estimateInitialPrefillCount(){ const averageVerticalSpeed = computeAverageVerticalSpeed(); const averageLifeSeconds = (viewportHeight + 5) / Math.max(0.001, averageVerticalSpeed); const supplyRatePerSecond = snowflakesTargetCount / Math.max(0.001, averageLifeSeconds); const warmupSeconds = Math.min(1.2, Math.max(0.6, averageLifeSeconds * 0.2)); const rawCount = Math.floor(supplyRatePerSecond * warmupSeconds); const maxInitialFraction = 0.45; const capByFraction = Math.floor(snowflakesTargetCount * maxInitialFraction); const boundedCount = Math.max(8, Math.min(capByFraction, rawCount)); return boundedCount; } // 函数 封装添加雪花的操作 支持指定水平与垂直位置 function pushSnowflake(preferredX, preferredY){ var flake = createSnowflake(preferredX, preferredY); if (flake){ snowflakes.push(flake); return true; } return false; } // 函数 初始化预填充雪花 保持从顶部下落的感觉并避免过量 function initSnowPrefill(){ // 条件判断 仅在未达到时长且当前未生成过雪花时执行 if (hasReachedDuration){ return; } if (snowflakes.length > 0){ return; } const initialCount = estimateInitialPrefillCount(); yooneLogPush({ kind: 'prefill', count: initialCount, target: snowflakesTargetCount }); for (let spawnIndex = 0; spawnIndex < initialCount; spawnIndex++){ // 使用黄金比例相位分布水平位置 减少聚集 const preferredX = (spawnPhase % 1) * viewportWidth; spawnPhase = (spawnPhase + goldenRatio) % 1; // 预填充垂直位置覆盖顶部到中段 减少中段稀疏 const preferredY = -Math.random() * (viewportHeight * 0.4); pushSnowflake(preferredX, preferredY); } } // 調用初始化預填充 initSnowPrefill(); // 函数 更新雪花位置与视口状态 function updateSnowflakes(deltaSeconds){ for (let j = 0; j < snowflakes.length; j++){ const flake = snowflakes[j]; if (flake && typeof flake.update === 'function'){ flake.update(engineRef, deltaSeconds); } else { const frameFactor = Math.max(0.5, Math.min(2.0, deltaSeconds * 60)); flake.positionY += (flake.driftSpeed * 2 + flake.radius * 0.25) * frameFactor; flake.positionX += Math.sin(flake.positionY * 0.01) * flake.swingAmplitude * frameFactor; if (flake.positionY > viewportHeight + 5){ flake.outOfView = true; } } } } // 使用全局渲染注册表 根据形状类型选择渲染函数 // 函数 清空画布并绘制可见雪花 function drawSnowflakes(){ context.clearRect(0, 0, viewportWidth, viewportHeight); for (let k = 0; k < snowflakes.length; k++){ const flake = snowflakes[k]; if (flake.outOfView){ continue; } if (flake && typeof flake.render === 'function'){ try{ flake.render(engineRef); }catch(e){} continue; } const registry = window.YooneSnowShapeRenderers || {}; const renderer = registry[flake.shapeType] || registry['dot']; if (typeof renderer === 'function'){ renderer(context, flake.positionX, flake.positionY, flake.radius); } } } // 清理停止函数 用于在达到设定时长后停止动画并释放资源 function cleanupStop(){ // 条件判断 如果存在窗口尺寸事件监听则移除 if (typeof onResize === 'function') { window.removeEventListener('resize', onResize); } // 清空画布并隐藏元素 context.clearRect(0, 0, viewportWidth, viewportHeight); canvas.style.display = 'none'; } // 函数 更新系统 执行移除与补给并更新位置 function updateSystem(deltaSeconds){ for (let idx = snowflakes.length - 1; idx >= 0; idx--){ // 条件判断 仅当雪花已移出视口时才从数组移除 保证雪花下到窗口底部才消失 if (snowflakes[idx].outOfView){ snowflakes.splice(idx, 1); } } if (!hasReachedDuration){ // 依据当前平均速度以及视口高度估算雪花平均生命周期和补给速率 const averageVerticalSpeed = computeAverageVerticalSpeed(); const averageLifeSeconds = (viewportHeight + 5) / Math.max(0.001, averageVerticalSpeed); const supplyRatePerSecond = snowflakesTargetCount / Math.max(0.001, averageLifeSeconds); spawnAccumulator += supplyRatePerSecond * Math.max(0, deltaSeconds); // 条件判断 根据累积值决定此次生成数量 保证均匀补给并确保达到最大设定数量 const availableSlots = Math.max(0, snowflakesTargetCount - snowflakes.length); let spawnCount = Math.min(availableSlots, Math.floor(spawnAccumulator)); // 条件判断 若仍有缺口但累积量不足一整个单位 则至少补充 1 个 if (spawnCount === 0 && availableSlots > 0){ spawnCount = 1; } // 条件判断 限制每帧最大生成数量避免瞬时爆发 const maxPerFrame = Math.max(1, Math.floor(snowflakesTargetCount * 0.05)); if (spawnCount > maxPerFrame){ spawnCount = maxPerFrame; } if (spawnCount > 0){ yooneLogPush({ kind: 'frame', count: spawnCount, availableSlots: availableSlots, length: snowflakes.length, target: snowflakesTargetCount, accumulator: spawnAccumulator }); var added = 0; for (let s = 0; s < spawnCount; s++){ const preferredX = (spawnPhase % 1) * viewportWidth; spawnPhase = (spawnPhase + goldenRatio) % 1; if (pushSnowflake(preferredX, undefined)) { added++; } } if (added > 0){ spawnAccumulator = Math.max(0, spawnAccumulator - added); } } } updateSnowflakes(deltaSeconds); } // 函数 渲染系统 清空画布并绘制 function renderSystem(){ drawSnowflakes(); } // 函数 动画主循环 包含生成 渲染 与停止逻辑 function shouldStop(){ if (displayDurationSeconds > 0 && !hasReachedDuration){ const elapsedSeconds = (performance.now() - startTimestamp) / 1000; if (elapsedSeconds >= displayDurationSeconds){ hasReachedDuration = true; } } if (hasReachedDuration){ const allOut = snowflakes.every(function(f){ return f.outOfView; }); if (allOut){ return true; } } return false; } const animator = new SnowAnimator(); // 定义窗口尺寸事件处理器 以便在停止时移除 function onResize(){ // 条件判断 保证画布尺寸与视口一致 resizeCanvas(); viewportWidth = window.innerWidth; viewportHeight = window.innerHeight; } window.addEventListener('resize', onResize); animator.init(); animator.update(); } // 条件判断 如果文档尚未加载则等待 DOMContentLoaded 事件 if (document.readyState === 'complete'){ init(); } else { window.addEventListener('load', init); } })();