独立渲染引擎就绪引擎就绪
这里是为您设计的高保真SVG原理动画。该设计严格采用了**TRIZ最终理想解（IFR）**的视角，直接展示了系统在最优状态下的运作机理：利用风道自身的空间构造出阵列式亥姆霍兹共振腔，将伴生高频声波“吃掉”并转化为微小的热能耗散，同时维持核心气流的高速畅通。
在视觉表现上，采用了深色工业科技美学风格（Acoustic Fluid Dynamics），以青色流体代表高速冷空气，品红色代表高频啸叫声波，橙红色代表声能摩擦产生的热能耗散。文字信息已严格收敛至边角，确保核心动态区域占据最大视觉焦点。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>亥姆霍兹共振消音原理 - IFR理想解</title>
<style>
:root {
--bg-color: #07090e;
--duct-color: #2a3143;
--duct-glow: #3d4a6b;
--air-color: #00f0ff;
--sound-color: #ff0055;
--heat-color: #ff6600;
--text-color: #a0aec0;
--speed: 3s; /* 默认风速动画时长 */
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
user-select: none;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
height: 100vh;
width: 100vw;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* 纹理背景层 */
.noise-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 1;
}
/* 环境光晕 */
.ambient-glow {
position: absolute;
width: 60vw; height: 60vh;
background: radial-gradient(circle, rgba(0,240,255,0.05) 0%, rgba(255,0,85,0.02) 40%, rgba(7,9,14,0) 70%);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
}
/* 核心动画容器，确保大面积和居中 */
.animation-container {
position: relative;
width: 100%;
height: 100%;
max-width: 1600px;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
svg {
width: 100%;
height: 80%;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
/* 信息面板 - 严格限制在角落并使用小字号 */
.hud-panel {
position: absolute;
background: rgba(10, 13, 20, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
padding: 16px;
border-radius: 8px;
z-index: 20;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.hud-top-left {
top: 24px;
left: 24px;
max-width: 320px;
}
.hud-bottom-right {
bottom: 24px;
right: 24px;
}
.hud-bottom-left {
bottom: 24px;
left: 24px;
}
.hud-title {
color: #fff;
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding-bottom: 6px;
}
.hud-text {
font-size: 11px;
line-height: 1.6;
color: #8b9bb4;
}
.legend-item {
display: flex;
align-items: center;
margin-bottom: 6px;
font-size: 11px;
}
.legend-color {
width: 12px; height: 12px;
border-radius: 50%;
margin-right: 8px;
box-shadow: 0 0 8px currentColor;
}
.color-air { color: var(--air-color); background: var(--air-color); }
.color-sound { color: var(--sound-color); background: var(--sound-color); }
.color-heat { color: var(--heat-color); background: var(--heat-color); }
/* 交互控件 */
.control-group {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
.control-label {
font-size: 10px;
color: #fff;
display: flex;
justify-content: space-between;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
background: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 12px; width: 12px;
border-radius: 50%;
background: var(--air-color);
cursor: pointer;
margin-top: -4px;
box-shadow: 0 0 10px var(--air-color);
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%; height: 4px;
cursor: pointer;
background: #2a3143;
border-radius: 2px;
}
/* 动画元素 */
.air-particle {
fill: var(--air-color);
filter: drop-shadow(0 0 4px var(--air-color));
opacity: 0;
animation: flowAir var(--speed) cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.sound-wave {
stroke: var(--sound-color);
stroke-width: 2;
fill: none;
opacity: 0;
filter: drop-shadow(0 0 6px var(--sound-color));
animation: propagateSound calc(var(--speed) * 0.4) ease-out infinite;
}
.resonance-heat {
fill: url(#heatGradient);
opacity: 0;
mix-blend-mode: screen;
animation: dissipateHeat calc(var(--speed) * 0.8) ease-in-out infinite;
}
.micro-hole-suction {
stroke: var(--sound-color);
stroke-width: 1.5;
stroke-dasharray: 4 4;
opacity: 0;
animation: suction calc(var(--speed) * 0.5) linear infinite;
}
/* 核心 Keyframes */
@keyframes flowAir {
0% { offset-distance: 0%; opacity: 0; transform: scale(0.5); }
10% { opacity: 0.8; transform: scale(1); }
40% { opacity: 1; transform: scale(1.5); } /* 加速区变亮变长 */
60% { opacity: 1; transform: scale(1.5); }
90% { opacity: 0.8; transform: scale(1); }
100% { offset-distance: 100%; opacity: 0; transform: scale(0.5); }
}
@keyframes propagateSound {
0% { transform: scaleX(0.5) translateY(0); opacity: 0; }
20% { opacity: 0.9; }
80% { transform: scaleX(2) translateY(0); opacity: 0.5; }
100% { transform: scaleX(3) translateY(0); opacity: 0; }
}
@keyframes dissipateHeat {
0% { transform: scale(0.2); opacity: 0; fill: var(--sound-color); }
30% { transform: scale(1.2); opacity: 0.9; fill: var(--heat-color); }
100% { transform: scale(2.5); opacity: 0; fill: #ff2200; }
}
@keyframes suction {
0% { stroke-dashoffset: 8; opacity: 0; }
50% { opacity: 0.8; }
100% { stroke-dashoffset: 0; opacity: 0; }
}
/* 引导性高亮动画 */
.highlight-pulse {
animation: borderPulse 2s infinite alternate;
}
@keyframes borderPulse {
0% { stroke: #3d4a6b; stroke-width: 2; }
100% { stroke: var(--air-color); stroke-width: 3; filter: drop-shadow(0 0 5px var(--air-color)); }
}
</style>
</head>
<body>
<div class="noise-overlay"></div>
<div class="ambient-glow"></div>
<!-- 左上角：原理描述 (IFR视角) -->
<div class="hud-panel hud-top-left">
<div class="hud-title">理想解 (IFR) 状态观测</div>
<div class="hud-text">
<strong>核心机理：</strong>系统巧妙利用结构自身，在不增加流动阻力的前提下解决高频啸叫。
<br><br>
当气流(Cyan)通过窄道激发高频伴生声波(Magenta)时，声波被阻抗匹配的微穿孔板捕获，射入密闭的亥姆霍兹共振腔。通过腔内空气柱的剧烈共振摩擦，将特定频段的声能就地转化为热能(Orange)耗散。
</div>
</div>
<!-- 左下角：控制交互 -->
<div class="hud-panel hud-bottom-left">
<div class="hud-title">系统参数调控</div>
<div class="control-group">
<div class="control-label">
<span>风管入口流速</span>
<span id="speedValue">HIGH</span>
</div>
<input type="range" id="speedControl" min="1" max="5" step="0.1" value="3">
</div>
<div class="hud-text" style="margin-top: 8px; font-size: 10px;">
注: 微穿孔径=0.6mm | 腔深=3.5mm<br>
*孔隙堵塞将导致声学阻抗失配失效
</div>
</div>
<!-- 右下角：图例 -->
<div class="hud-panel hud-bottom-right">
<div class="hud-title">遥测信号图例</div>
<div class="legend-item"><div class="legend-color color-air"></div> 高速平滑气流</div>
<div class="legend-item"><div class="legend-color color-sound"></div> 伴生高频声波 (啸叫)</div>
<div class="legend-item"><div class="legend-color color-heat"></div> 亥姆霍兹共振耗散</div>
</div>
<div class="animation-container">
<!-- 主体 SVG 画布 -->
<svg viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 发光滤镜 -->
<filter id="glowAir" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<filter id="glowDuct" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="2" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<!-- 渐变 -->
<radialGradient id="heatGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fff" stop-opacity="1" />
<stop offset="40%" stop-color="var(--heat-color)" stop-opacity="0.8" />
<stop offset="100%" stop-color="var(--sound-color)" stop-opacity="0" />
</radialGradient>
<!-- 气流运动路径定义 -->
<path id="path-center" d="M -50 300 C 200 300, 300 300, 400 300 L 800 300 C 900 300, 1000 300, 1250 300" />
<path id="path-top1" d="M -50 220 C 200 220, 300 260, 400 260 L 800 260 C 900 260, 1000 220, 1250 220" />
<path id="path-bot1" d="M -50 380 C 200 380, 300 340, 400 340 L 800 340 C 900 340, 1000 380, 1250 380" />
<path id="path-top2" d="M -50 160 C 200 160, 300 235, 400 235 L 800 235 C 900 235, 1000 160, 1250 160" />
<path id="path-bot2" d="M -50 440 C 200 440, 300 365, 400 365 L 800 365 C 900 365, 1000 440, 1250 440" />
</defs>
<!-- ================= 背景与管道结构 ================= -->
<g id="duct-structure">
<!-- 上方亥姆霍兹共振腔体壁 (外层封闭壁面) -->
<path d="M 400 180 L 800 180" stroke="var(--duct-glow)" stroke-width="3" fill="none" />
<!-- 下方亥姆霍兹共振腔体壁 (外层封闭壁面) -->
<path d="M 400 420 L 800 420" stroke="var(--duct-glow)" stroke-width="3" fill="none" />
<!-- 上腔体隔板 (阵列) -->
<g stroke="var(--duct-glow)" stroke-width="2">
<line x1="400" y1="180" x2="400" y2="220" /><line x1="440" y1="180" x2="440" y2="220" />
<line x1="480" y1="180" x2="480" y2="220" /><line x1="520" y1="180" x2="520" y2="220" />
<line x1="560" y1="180" x2="560" y2="220" /><line x1="600" y1="180" x2="600" y2="220" />
<line x1="640" y1="180" x2="640" y2="220" /><line x1="680" y1="180" x2="680" y2="220" />
<line x1="720" y1="180" x2="720" y2="220" /><line x1="760" y1="180" x2="760" y2="220" />
<line x1="800" y1="180" x2="800" y2="220" />
</g>
<!-- 下腔体隔板 (阵列) -->
<g stroke="var(--duct-glow)" stroke-width="2">
<line x1="400" y1="420" x2="400" y2="380" /><line x1="440" y1="420" x2="440" y2="380" />
<line x1="480" y1="420" x2="480" y2="380" /><line x1="520" y1="420" x2="520" y2="380" />
<line x1="560" y1="420" x2="560" y2="380" /><line x1="600" y1="420" x2="600" y2="380" />
<line x1="640" y1="420" x2="640" y2="380" /><line x1="680" y1="420" x2="680" y2="380" />
<line x1="720" y1="420" x2="720" y2="380" /><line x1="760" y1="420" x2="760" y2="380" />
<line x1="800" y1="420" x2="800" y2="380" />
</g>
<!-- 上方内壁 (微穿孔板) - 带有空隙 -->
<path d="M 0 100 C 200 100, 300 220, 400 220" stroke="var(--duct-color)" stroke-width="6" fill="none" class="highlight-pulse"/>
<path d="M 400 220 L 800 220" stroke="var(--text-color)" stroke-width="4" stroke-dasharray="24 16" fill="none" filter="url(#glowDuct)"/>
<path d="M 800 220 C 900 220, 1000 100, 1200 100" stroke="var(--duct-color)" stroke-width="6" fill="none" class="highlight-pulse"/>
<!-- 下方内壁 (微穿孔板) - 带有空隙 -->
<path d="M 0 500 C 200 500, 300 380, 400 380" stroke="var(--duct-color)" stroke-width="6" fill="none" class="highlight-pulse"/>
<path d="M 400 380 L 800 380" stroke="var(--text-color)" stroke-width="4" stroke-dasharray="24 16" fill="none" filter="url(#glowDuct)"/>
<path d="M 800 380 C 900 380, 1000 500, 1200 500" stroke="var(--duct-color)" stroke-width="6" fill="none" class="highlight-pulse"/>
</g>
<!-- ================= 动态系统生成挂载点 ================= -->
<!-- 气流层 -->
<g id="airflow-layer"></g>
<!-- 声波生成区 (窄道内) -->
<g id="soundwave-layer"></g>
<!-- 能量耗散共振腔 -->
<g id="resonance-layer"></g>
</svg>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const airflowLayer = document.getElementById('airflow-layer');
const soundwaveLayer = document.getElementById('soundwave-layer');
const resonanceLayer = document.getElementById('resonance-layer');
const speedControl = document.getElementById('speedControl');
const speedValue = document.getElementById('speedValue');
// --- 1. 生成高速气流粒子 ---
const paths = ['path-center', 'path-top1', 'path-bot1', 'path-top2', 'path-bot2'];
const particleCount = 45; // 提高流体密度
for (let i = 0; i < particleCount; i++) {
const particle = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
// 细长的气流形态
particle.setAttribute('rx', 18 + Math.random() * 15);
particle.setAttribute('ry', 1.5 + Math.random() * 1);
particle.classList.add('air-particle');
// 随机分配路径和延迟，产生连续流体感
const pathId = paths[Math.floor(Math.random() * paths.length)];
particle.style.offsetPath = `url(#${pathId})`;
// 关键点：使用负延迟确保加载即满屏播放
const delay = -(Math.random() * 5);
particle.style.animationDelay = `${delay}s`;
// 微调每个粒子的基础速度差异
const speedModifier = 0.8 + Math.random() * 0.4;
particle.style.animationDuration = `calc(var(--speed) * ${speedModifier})`;
airflowLayer.appendChild(particle);
}
// --- 2. 生成伴生啸叫声波 ---
// 在风道最窄处 (X: 450 - 750) 产生高频振荡波
for (let i = 0; i < 8; i++) {
const wave = document.createElementNS('http://www.w3.org/2000/svg', 'path');
// 绘制一条弧线代表声波波阵面
wave.setAttribute('d', 'M 0 -40 Q 20 0, 0 40');
wave.classList.add('sound-wave');
const startX = 450 + Math.random() * 250;
wave.style.transformOrigin = `${startX}px 300px`;
wave.style.transform = `translate(${startX}px, 300px)`;
const delay = -(Math.random() * 2);
wave.style.animationDelay = `${delay}s`;
soundwaveLayer.appendChild(wave);
}
// --- 3. 生成亥姆霍兹共振吸声与热能耗散动画 ---
const cavityCentersX = [420, 460, 500, 540, 580, 620, 660, 700, 740, 780];
cavityCentersX.forEach((x, index) => {
// 上排腔体
createResonator(x, 200, 220, true, index);
// 下排腔体
createResonator(x, 400, 380, false, index);
});
function createResonator(x, cavityY, holeY, isTop, index) {
// 1. 声波进入微孔的引导线 (吸气/吸声效果)
const suction = document.createElementNS('http://www.w3.org/2000/svg', 'line');
suction.setAttribute('x1', x);
suction.setAttribute('y1', isTop ? holeY + 20 : holeY - 20);
suction.setAttribute('x2', x);
suction.setAttribute('y2', cavityY);
suction.classList.add('micro-hole-suction');
// 2. 腔体内的声能摩擦生热 (共振核)
const heatCore = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
heatCore.setAttribute('cx', x);
heatCore.setAttribute('cy', cavityY);
heatCore.setAttribute('r', 12);
heatCore.classList.add('resonance-heat');
// 产生基于气流方向(从左到右)的级联延迟感
const cascadeDelay = -(Math.random() * 0.5) - (index * 0.1);
suction.style.animationDelay = `${cascadeDelay}s`;
heatCore.style.animationDelay = `${cascadeDelay}s`;
resonanceLayer.appendChild(suction);
resonanceLayer.appendChild(heatCore);
}
// --- 4. 交互控制逻辑 ---
// 反转取值：滑块越大，速度越快（对应秒数越小）
speedControl.addEventListener('input', (e) => {
const val = parseFloat(e.target.value);
const speedSecs = 6 - val; // 1 -> 5s, 5 -> 1s
document.documentElement.style.setProperty('--speed', `${speedSecs}s`);
if (val > 4) speedValue.textContent = 'EXTREME';
else if (val > 2.5) speedValue.textContent = 'HIGH';
else speedValue.textContent = 'LOW';
});
});
</script>
</body>
</html>
积分规则：第一轮对话扣减8分，后续每轮扣6分
等待动画代码生成...