分享图
动画工坊
引擎就绪
<!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-space: #07090e;
      --panel-bg: rgba(13, 18, 28, 0.72);
      --panel-border: rgba(56, 189, 248, 0.18);
      --cyan-glow: #38bdf8;
      --teal-core: #2dd4bf;
      --amber-energy: #f59e0b;
      --violet-phase: #a855f7;
      --text-dim: #94a3b8;
      --text-bright: #f1f5f9;
      --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
      --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
    }

    body {
      background-color: var(--bg-space);
      color: var(--text-bright);
      font-family: var(--font-sans);
      min-height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    /* 背景工程网格与极标氛围 */
    .telemetry-grid {
      position: absolute;
      inset: 0;
      background-image: 
        radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.05) 0%, transparent 68%),
        linear-gradient(rgba(56, 189, 248, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.035) 1px, transparent 1px);
      background-size: 100% 100%, 48px 48px, 48px 48px;
      pointer-events: none;
      z-index: 1;
    }

    /* 主视觉容器:占据主导地位,确保无遮挡中心体验 */
    .viewport-canvas {
      position: relative;
      width: 100vw;
      height: 100vh;
      max-width: 1440px;
      max-height: 900px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    svg#stage {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 0 45px rgba(14, 165, 233, 0.08));
    }

    /* 紧凑角落悬浮遥测面板 - 保持小尺寸与边缘贴合,绝不阻挡中心动画 */
    .hud-chip {
      position: absolute;
      background: var(--panel-bg);
      border: 1px solid var(--panel-border);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 11px;
      line-height: 1.4;
      pointer-events: auto;
      z-index: 10;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    }

    .top-left {
      top: 20px;
      left: 24px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .top-right {
      top: 20px;
      right: 24px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 210px;
    }

    .bottom-bar {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 8px 18px;
      background: rgba(10, 15, 26, 0.85);
      border: 1px solid rgba(56, 189, 248, 0.22);
      border-radius: 30px;
      z-index: 10;
    }

    .title-tag {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      color: var(--cyan-glow);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .title-tag::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--teal-core);
      box-shadow: 0 0 8px var(--teal-core);
      animation: pulse-dot 2s infinite ease-in-out;
    }

    .system-title {
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      letter-spacing: 0.02em;
    }

    .param-row {
      display: flex;
      justify-content: space-between;
      color: var(--text-dim);
      font-family: var(--font-mono);
      font-size: 10.5px;
    }

    .param-row span.val {
      color: var(--teal-core);
      font-weight: 500;
    }

    /* 控制滑块 */
    .ctrl-group {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 11px;
      font-family: var(--font-mono);
      color: var(--text-dim);
    }

    input[type=range] {
      -webkit-appearance: none;
      width: 110px;
      height: 4px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 2px;
      outline: none;
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--cyan-glow);
      cursor: pointer;
      box-shadow: 0 0 10px var(--cyan-glow);
      transition: transform 0.15s;
    }

    input[type=range]::-webkit-slider-thumb:hover {
      transform: scale(1.25);
    }

    .badge-ifr {
      font-size: 9.5px;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(45, 212, 191, 0.12);
      color: var(--teal-core);
      border: 1px solid rgba(45, 212, 191, 0.3);
      letter-spacing: 0.05em;
    }

    /* 实时模态示波迷你图 */
    .scope-canvas {
      width: 100%;
      height: 38px;
      background: rgba(0, 0, 0, 0.35);
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    @keyframes pulse-dot {
      0%, 100% { opacity: 0.4; transform: scale(0.9); }
      50% { opacity: 1; transform: scale(1.2); }
    }

    /* SVG 内嵌微动态样式 */
    .vortex-dot {
      transform-origin: center;
      animation: vortex-spin 1.4s linear infinite;
    }

    @keyframes vortex-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
  </style>
</head>
<body>

  <!-- 背景流场网格 -->
  <div class="telemetry-grid"></div>

  <!-- 左上角极简状态标签(字号小、贴边、零遮挡) -->
  <div class="hud-chip top-left">
    <div class="title-tag">AERO-IFR // 气动与结构解耦系统</div>
    <div class="system-title">源端消音 · 阻抗失配自消除模态</div>
    <div style="font-size: 10.5px; color: var(--text-dim); margin-top: 2px;">
      零包覆吸声体 · 结构增重 <span style="color: var(--teal-core); font-weight:600;">-31.5%</span> (26g超轻单叶)
    </div>
  </div>

  <!-- 右上角声振衰减遥测波形卡 -->
  <div class="hud-chip top-right">
    <div class="param-row">
      <span>振动隔离率 (180Hz)</span>
      <span class="val" id="isoEfficiency">98.4%</span>
    </div>
    <canvas id="miniScope" class="scope-canvas" width="210" height="38"></canvas>
    <div class="param-row" style="margin-top: 2px;">
      <span>尾缘宽频涡噪声峰值</span>
      <span class="val" style="color:#38bdf8;">-11.8 dB</span>
    </div>
    <div class="param-row">
      <span>桨尖涡脱落强度</span>
      <span class="val" style="color:#a855f7;">-8.4 dB</span>
    </div>
  </div>

  <!-- 中央主舞台:SVG 矢量工程原理透视图 -->
  <div class="viewport-canvas">
    <svg id="stage" viewBox="0 0 1200 760" preserveAspectRatio="xMidYMid meet">
      <defs>
        <!-- 碳纤维纹理底质 -->
        <pattern id="carbonWeave" width="6" height="6" patternUnits="userSpaceOnUse">
          <rect width="6" height="6" fill="#141923" />
          <path d="M0 3L3 0L6 3L3 6Z" fill="#1b2331" opacity="0.6"/>
          <path d="M3 0L6 3L3 6L0 3Z" stroke="rgba(255,255,255,0.04)" stroke-width="0.5" fill="none"/>
        </pattern>

        <!-- 阻尼橡胶微观渐变 -->
        <linearGradient id="rubberGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#1e293b" />
          <stop offset="25%" stop-color="#334155" />
          <stop offset="50%" stop-color="#0f172a" />
          <stop offset="75%" stop-color="#334155" />
          <stop offset="100%" stop-color="#1e293b" />
        </linearGradient>

        <!-- 能量耗散粒子光晕滤镜 -->
        <filter id="softGlow" x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation="3.5" result="blur" />
          <feMerge>
            <feMergeNode in="blur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>

        <filter id="highGlow" x="-40%" y="-40%" width="180%" height="180%">
          <feGaussianBlur stdDeviation="6" result="blur2" />
          <feMerge>
            <feMergeNode in="blur2" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>

        <!-- 声能与气流渐变 -->
        <linearGradient id="airFlowGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#38bdf8" stop-opacity="0.0" />
          <stop offset="40%" stop-color="#38bdf8" stop-opacity="0.8" />
          <stop offset="100%" stop-color="#2dd4bf" stop-opacity="0.1" />
        </linearGradient>

        <linearGradient id="tipVortexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#a855f7" stop-opacity="0.9" />
          <stop offset="100%" stop-color="#38bdf8" stop-opacity="0.0" />
        </linearGradient>

        <!-- 锯齿微涡流模板 -->
        <g id="microVortex">
          <circle cx="0" cy="0" r="4.5" fill="none" stroke="#2dd4bf" stroke-width="1.2" stroke-dasharray="7 3" opacity="0.85" />
          <circle cx="0" cy="0" r="1.5" fill="#38bdf8" />
        </g>
      </defs>

      <!-- 坐标刻度同心圆雷达辅助线(低透明度) -->
      <g opacity="0.22">
        <circle cx="600" cy="400" r="320" fill="none" stroke="#38bdf8" stroke-width="1" stroke-dasharray="4 8"/>
        <circle cx="600" cy="400" r="230" fill="none" stroke="#38bdf8" stroke-width="0.8" stroke-dasharray="2 6"/>
        <circle cx="600" cy="400" r="130" fill="none" stroke="#38bdf8" stroke-width="0.6"/>
        <line x1="260" y1="400" x2="940" y2="400" stroke="#38bdf8" stroke-width="0.5" stroke-dasharray="3 7"/>
        <line x1="600" y1="70" x2="600" y2="730" stroke="#38bdf8" stroke-width="0.5" stroke-dasharray="3 7"/>
      </g>

      <!-- ==================== 区域 1:机械臂与隔离层三明治解剖结构(左下方视角) ==================== -->
      <g id="isolatorSubsystem" transform="translate(140, 430)">
        <!-- 底衬阴影 -->
        <ellipse cx="140" cy="200" rx="130" ry="32" fill="#000" opacity="0.6" filter="blur(10px)"/>

        <!-- 碳纤维机臂管身 -->
        <path d="M-40,195 L280,195 L270,225 L-50,225 Z" fill="url(#carbonWeave)" stroke="#334155" stroke-width="1.5"/>
        <text x="-35" y="214" fill="#64748b" font-family="var(--font-mono)" font-size="10.5">碳纤维机臂 (模态解耦端 · 振动衰减区)</text>

        <!-- 机臂上传递的微弱剩余波(几乎为平静直线) -->
        <path id="armDampedWave" d="M-40,210 Q40,210 100,210 T240,210" fill="none" stroke="#2dd4bf" stroke-width="2" opacity="0.65"/>

        <!-- 下薄钢限位垫片 (Steel Shim 下) -->
        <rect x="50" y="180" width="180" height="6" rx="2" fill="#94a3b8" stroke="#cbd5e1" stroke-width="0.8"/>

        <!-- 环形橡胶隔振垫 (45 Shore A) -->
        <g id="rubberMountGroup">
          <rect id="rubberCore" x="60" y="148" width="160" height="32" rx="4" fill="url(#rubberGrad)" stroke="#475569" stroke-width="1.5"/>
          <!-- 橡胶内部剪切弹性阻尼波纹示意 -->
          <path id="shearWaves" d="M75,164 Q100,154 125,164 T175,164 T205,164" fill="none" stroke="#f59e0b" stroke-width="1.8" stroke-dasharray="3 2" opacity="0.85"/>
          <!-- 阻尼耗散微光发热/解耦指示 -->
          <circle cx="140" cy="164" r="18" fill="none" stroke="rgba(245, 158, 11, 0.4)" stroke-width="3" filter="url(#softGlow)"/>
        </g>

        <!-- 上薄钢限位垫片 (Steel Shim 上) -->
        <rect x="50" y="142" width="180" height="6" rx="2" fill="#94a3b8" stroke="#cbd5e1" stroke-width="0.8"/>

        <!-- 电机金属安装基座 (高频振动源端 180Hz) -->
        <path d="M70,80 L210,80 L225,142 L55,142 Z" fill="#1e293b" stroke="#0ea5e9" stroke-width="1.2"/>
        <!-- 电机转子外壳示意 -->
        <rect x="95" y="24" width="90" height="56" rx="3" fill="#0f172a" stroke="#38bdf8" stroke-width="1.5"/>
        <line x1="140" y1="10" x2="140" y2="24" stroke="#cbd5e1" stroke-width="5" stroke-linecap="round"/>

        <!-- 电机座上强烈的 180Hz 高频激振波示意(抖动波形) -->
        <path id="motorVibWave" d="M72,112 Q90,98 105,112 T140,112 T175,112 T208,112" fill="none" stroke="#f59e0b" stroke-width="2.5" filter="url(#softGlow)"/>

        <!-- 隔振器技术指示引线 (紧凑排布) -->
        <g opacity="0.9">
          <!-- 激振源标注 -->
          <line x1="220" y1="105" x2="265" y2="105" stroke="#f59e0b" stroke-width="1" stroke-dasharray="2 2"/>
          <circle cx="220" cy="105" r="2" fill="#f59e0b"/>
          <text x="272" y="109" fill="#f59e0b" font-family="var(--font-mono)" font-size="10">180Hz 电机旋转激励</text>

          <!-- 隔振垫参数标注 -->
          <line x1="225" y1="164" x2="270" y2="164" stroke="#38bdf8" stroke-width="1"/>
          <circle cx="225" cy="164" r="2.5" fill="#38bdf8"/>
          <text x="278" y="161" fill="#f1f5f9" font-family="var(--font-mono)" font-size="10.5" font-weight="600">45 Shore A 橡胶隔振环</text>
          <text x="278" y="174" fill="#94a3b8" font-family="var(--font-mono)" font-size="9.5">静刚度 18N/mm · 固有频率 22Hz (深衰减区)</text>

          <!-- 限位钢垫标注 -->
          <line x1="50" y1="145" x2="15" y2="145" stroke="#64748b" stroke-width="1"/>
          <text x="10" y="142" text-anchor="end" fill="#94a3b8" font-family="var(--font-mono)" font-size="9.5">上下薄钢限位片 (刚度约束)</text>
        </g>
      </g>


      <!-- ==================== 区域 2:核心旋转流场与 18°后掠+尾缘锯齿旋翼系统 (中心主区) ==================== -->
      <!-- 动态旋转基座(带平滑转速) -->
      <g id="propellerSystem" transform="translate(640, 360)">
        
        <!-- 气动背景:气流汇聚平滑流线 -->
        <g id="incomingAirstreams" opacity="0.45">
          <path d="M-360,-260 C-200,-240 -100,-180 0,-120" stroke="url(#airFlowGrad)" stroke-width="1.8" fill="none" stroke-dasharray="140 30"/>
          <path d="M-380,-140 C-220,-120 -80,-80 0,-30" stroke="url(#airFlowGrad)" stroke-width="2.2" fill="none" stroke-dasharray="160 20"/>
          <path d="M-340,30 C-200,30 -60,0 20,-10" stroke="url(#airFlowGrad)" stroke-width="1.6" fill="none" stroke-dasharray="120 40"/>
        </g>

        <!-- 桨毂中心转轴 -->
        <circle cx="0" cy="0" r="32" fill="#0f172a" stroke="#38bdf8" stroke-width="2"/>
        <circle cx="0" cy="0" r="16" fill="#1e293b" stroke="#64748b" stroke-width="1.5"/>
        <circle cx="0" cy="0" r="5" fill="#38bdf8"/>

        <!-- 旋翼叶片 1 (主放大剖析叶片,水平向右延展,全长展现锯齿与后掠几何) -->
        <g id="bladeMain" transform="rotate(0)">
          <!-- 碳纤维薄壁叶片主壳体 (PMI发泡芯夹层超轻 26g 结构) -->
          <!-- 形状:根部渐扩 -> 尾缘锯齿段 -> 展向延伸 -> 18° 后掠尖端 -->
          <path id="bladeBody" d="
            M 28,-14
            C 90,-22 180,-28 290,-26
            C 340,-25 390,-20 420,-12
            C 445,-5 462,8 468,26
            C 458,38 435,42 400,38
            L 376,28 L 368,36 L 360,28 L 352,36 L 344,28 L 336,36 L 328,28 L 320,36 L 312,28 L 304,36 L 296,28 L 288,36 L 280,28 L 272,36 L 264,28 L 256,36 L 248,28 L 240,36 L 232,28 L 224,36 L 216,28 L 208,36 L 200,28 L 192,36 L 184,28 L 176,36 L 168,28 L 160,36 L 152,28 L 144,36 L 136,28
            C 100,28 60,18 28,14
            Z"
            fill="url(#carbonWeave)"
            stroke="#38bdf8"
            stroke-width="1.5"
          />

          <!-- 内部 PMI 超轻发泡芯微结构轮廓线 (虚线示意) -->
          <path d="M50,-10 C150,-16 280,-16 380,-6 C415,2 430,16 432,24 C410,30 380,22 360,22 L150,20 C100,20 70,10 50,-10 Z"
            fill="none" stroke="rgba(56, 189, 248, 0.25)" stroke-width="1" stroke-dasharray="3 3"/>

          <!-- 尾缘锯齿特征强化高亮描边 (4mm齿高,8mm齿距) -->
          <path d="M 376,28 L 368,36 L 360,28 L 352,36 L 344,28 L 336,36 L 328,28 L 320,36 L 312,28 L 304,36 L 296,28 L 288,36 L 280,28 L 272,36 L 264,28 L 256,36 L 248,28 L 240,36 L 232,28 L 224,36 L 216,28 L 208,36 L 200,28 L 192,36 L 184,28 L 176,36 L 168,28 L 160,36 L 152,28 L 144,36 L 136,28"
            fill="none" stroke="#2dd4bf" stroke-width="2.2" filter="url(#softGlow)"/>

          <!-- 18° 后掠角辅助切线与角度弧标 -->
          <g opacity="0.85">
            <!-- 传统直轴线基准 -->
            <line x1="390" y1="-22" x2="480" y2="-22" stroke="#64748b" stroke-width="1" stroke-dasharray="3 3"/>
            <!-- 18° 实际后掠前缘切线 -->
            <line x1="390" y1="-22" x2="472" y2="28" stroke="#a855f7" stroke-width="1.8"/>
            <!-- 角度弧 -->
            <path d="M 445,-22 A 55 55 0 0 1 454,4" fill="none" stroke="#a855f7" stroke-width="1.5"/>
            <text x="462" y="-5" fill="#c084fc" font-family="var(--font-mono)" font-size="10.5" font-weight="600">18° 后掠角</text>
          </g>

          <!-- 锯齿碎涡流场物理动态:小尺度涡链群 (Micro-vortex Cascade) -->
          <g id="microVortexStream" transform="translate(0, 10)">
            <!-- 粒子由 JS 定时更新位置与扩散状态 -->
          </g>

          <!-- 桨尖涡相干错开与流场滑移带 (Suppressed Tip Vortex) -->
          <g id="tipVortexArea" transform="translate(440, 20)">
            <ellipse cx="25" cy="5" rx="35" ry="12" fill="none" stroke="url(#tipVortexGrad)" stroke-width="2.2" stroke-dasharray="10 5" filter="url(#softGlow)">
              <animateTransform attributeName="transform" type="rotate" from="0 25 5" to="360 25 5" dur="1.8s" repeatCount="indefinite"/>
            </ellipse>
            <ellipse cx="40" cy="12" rx="20" ry="7" fill="none" stroke="#a855f7" stroke-width="1" opacity="0.6"/>
          </g>

          <!-- 结构工程引线标签 (紧凑、精确) -->
          <g transform="translate(260, 48)">
            <line x1="0" y1="0" x2="20" y2="35" stroke="#2dd4bf" stroke-width="1"/>
            <line x1="20" y1="35" x2="140" y2="35" stroke="#2dd4bf" stroke-width="1"/>
            <circle cx="0" cy="0" r="2.5" fill="#2dd4bf"/>
            <text x="25" y="30" fill="#2dd4bf" font-family="var(--font-mono)" font-size="11" font-weight="600">尾缘仿生锯齿 (4×8mm)</text>
            <text x="25" y="44" fill="#94a3b8" font-family="var(--font-mono)" font-size="9.5">强迫大尺度附面层涡碎裂为微涡耗散 · 压低宽频噪声</text>
          </g>

          <g transform="translate(420, -22)">
            <line x1="0" y1="0" x2="-25" y2="-45" stroke="#38bdf8" stroke-width="1"/>
            <line x1="-25" y1="-45" x2="-140" y2="-45" stroke="#38bdf8" stroke-width="1"/>
            <circle cx="0" cy="0" r="2.5" fill="#38bdf8"/>
            <text x="-135" y="-50" fill="#38bdf8" font-family="var(--font-mono)" font-size="11" font-weight="600">展向涡相干去相关</text>
            <text x="-135" y="-36" fill="#94a3b8" font-family="var(--font-mono)" font-size="9.5">削减桨尖脱落压力峰值</text>
          </g>
        </g>

        <!-- 对称旋转叶片 2 (对向平衡叶片,半透视简化,呈现真实双叶平衡动力) -->
        <g id="bladeOpposite" transform="rotate(180)">
          <path d="
            M 28,-14
            C 90,-22 180,-28 290,-26
            C 340,-25 390,-20 420,-12
            C 445,-5 462,8 468,26
            C 458,38 435,42 400,38
            L 376,28 L 368,36 L 360,28 L 352,36 L 344,28 L 336,36 L 328,28 L 320,36 L 312,28 L 304,36 L 296,28 L 288,36 L 280,28 L 272,36 L 264,28 L 256,36 L 248,28 L 240,36 L 232,28 L 224,36 L 216,28 L 208,36 L 200,28 L 192,36 L 184,28 L 176,36 L 168,28 L 160,36 L 152,28 L 144,36 L 136,28
            C 100,28 60,18 28,14 Z"
            fill="url(#carbonWeave)" stroke="#38bdf8" stroke-width="1.2" opacity="0.85"
          />
          <path d="M 376,28 L 368,36 L 360,28 L 352,36 L 344,28 L 336,36 L 328,28 L 320,36 L 312,28 L 304,36 L 296,28 L 288,36 L 280,28 L 272,36 L 264,28 L 256,36 L 248,28 L 240,36 L 232,28 L 224,36 L 216,28 L 208,36 L 200,28 L 192,36 L 184,28 L 176,36 L 168,28 L 160,36 L 152,28 L 144,36 L 136,28"
            fill="none" stroke="#2dd4bf" stroke-width="1.8" opacity="0.9"/>
        </g>
      </g>

      <!-- 动态声压辐射外圈场(展示低辐射、弱相干的微弱声场边界) -->
      <g id="soundRadiationField" transform="translate(640, 360)" opacity="0.35" pointer-events="none">
        <circle id="acousticWave1" cx="0" cy="0" r="180" fill="none" stroke="#38bdf8" stroke-width="1" stroke-dasharray="8 12"/>
        <circle id="acousticWave2" cx="0" cy="0" r="260" fill="none" stroke="#2dd4bf" stroke-width="0.8" stroke-dasharray="6 14"/>
        <circle id="acousticWave3" cx="0" cy="0" r="340" fill="none" stroke="#a855f7" stroke-width="0.6" stroke-dasharray="4 16"/>
      </g>
    </svg>
  </div>

  <!-- 底部精炼参数调节栏 (紧凑药丸胶囊设计,不侵占主画面) -->
  <div class="bottom-bar">
    <div class="ctrl-group">
      <span>转速 (RPM)</span>
      <input type="range" id="rpmSlider" min="4500" max="6200" step="50" value="5400">
      <span id="rpmValue" style="color:#fff; font-weight:600; width:52px;">5400</span>
    </div>

    <div style="height: 16px; width: 1px; background: rgba(255,255,255,0.2);"></div>

    <div class="badge-ifr">IFR 理想解:在源头瓦解噪声 · 零吸声棉增重</div>
  </div>

  <script>
    // 确保在 DOM 加载完成后即刻自动播放,并支持 iframe 刷新自启
    document.addEventListener('DOMContentLoaded', () => {
      initSimulation();
    });

    function initSimulation() {
      const propellerSystem = document.getElementById('propellerSystem');
      const microVortexStream = document.getElementById('microVortexStream');
      const motorVibWave = document.getElementById('motorVibWave');
      const armDampedWave = document.getElementById('armDampedWave');
      const shearWaves = document.getElementById('shearWaves');
      const rubberCore = document.getElementById('rubberCore');
      const rpmSlider = document.getElementById('rpmSlider');
      const rpmValue = document.getElementById('rpmValue');
      const miniScope = document.getElementById('miniScope');
      const scopeCtx = miniScope.getContext('2d');
      const isoEfficiency = document.getElementById('isoEfficiency');
      
      const acousticWave1 = document.getElementById('acousticWave1');
      const acousticWave2 = document.getElementById('acousticWave2');
      const acousticWave3 = document.getElementById('acousticWave3');

      let currentRpm = 5400;
      let angle = 0;
      let simTime = 0;

      // 创建尾缘碎裂微涡粒子池 (Micro-Vortex Pool)
      const VORTEX_COUNT = 18;
      const vortices = [];
      const serrationStartX = 140;
      const serrationEndX = 370;

      for (let i = 0; i < VORTEX_COUNT; i++) {
        const elem = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        elem.innerHTML = `
          <circle cx="0" cy="0" r="3.2" fill="none" stroke="#2dd4bf" stroke-width="1.2" stroke-dasharray="4 2"/>
          <circle cx="0" cy="0" r="1.2" fill="#38bdf8"/>
        `;
        microVortexStream.appendChild(elem);
        vortices.push({
          elem: elem,
          x: serrationStartX + Math.random() * (serrationEndX - serrationStartX),
          y: 28,
          scale: 0.3 + Math.random() * 0.7,
          progress: Math.random(), // 0 到 1 的生命周期
          speed: 0.012 + Math.random() * 0.015,
          driftAngle: 0.2 + (Math.random() - 0.5) * 0.2
        });
      }

      // 转速滑块交互联动
      rpmSlider.addEventListener('input', (e) => {
        currentRpm = parseInt(e.target.value, 10);
        rpmValue.textContent = currentRpm;
        
        // 动态计算隔振率变化 (180Hz 远大于 22Hz 固有频率,阻抗失配极高)
        const excitationFreq = (currentRpm / 60) * 2; // 双叶通过频率
        const fn = 22; // 隔振垫固有频率
        const freqRatio = excitationFreq / fn;
        const transmissibility = 1 / Math.abs(Math.pow(freqRatio, 2) - 1);
        const eff = Math.min(99.4, Math.max(94.0, (1 - transmissibility) * 100)).toFixed(1);
        isoEfficiency.textContent = eff + '%';
      });

      // 实时绘制示波器波形(输入高频振动 vs 隔振垫输出平滑波)
      let scopeOffset = 0;
      function renderScope() {
        const w = miniScope.width;
        const h = miniScope.height;
        scopeCtx.clearRect(0, 0, w, h);

        scopeOffset += 0.12;

        // 绘制电机侧激励波 (黄色高频小波,180Hz 模态)
        scopeCtx.beginPath();
        scopeCtx.strokeStyle = 'rgba(245, 158, 11, 0.75)';
        scopeCtx.lineWidth = 1.2;
        for (let x = 0; x < w; x++) {
          const y = h * 0.32 + Math.sin(x * 0.35 + scopeOffset * 3) * 6 * (currentRpm / 5400);
          if (x === 0) scopeCtx.moveTo(x, y);
          else scopeCtx.lineTo(x, y);
        }
        scopeCtx.stroke();

        // 绘制机身结构侧传递波 (青色平滑微波,衰减率 > 98%)
        scopeCtx.beginPath();
        scopeCtx.strokeStyle = 'rgba(45, 212, 191, 0.9)';
        scopeCtx.lineWidth = 1.5;
        for (let x = 0; x < w; x++) {
          const y = h * 0.75 + Math.sin(x * 0.08 + scopeOffset * 0.5) * 1.5;
          if (x === 0) scopeCtx.moveTo(x, y);
          else scopeCtx.lineTo(x, y);
        }
        scopeCtx.stroke();
      }

      // 主自动刷新动画循环
      function animate() {
        simTime += 0.016;

        // 1. 旋翼本体根据 RPM 连续自转
        // 视觉上平滑表达旋转(同时保留叶片主视角的流体动力特征微摆动)
        const rotSpeed = (currentRpm / 60) * 360 * 0.0022;
        angle = (angle + rotSpeed) % 360;
        propellerSystem.setAttribute('transform', `translate(640, 360) rotate(${angle})`);

        // 2. 尾缘锯齿处的破碎小涡链运动与粘性消散 (Micro-vortices dissipation)
        vortices.forEach(v => {
          v.progress += v.speed * (currentRpm / 5400);
          if (v.progress > 1) {
            v.progress = 0;
            v.x = serrationStartX + Math.random() * (serrationEndX - serrationStartX);
            v.y = 28 + (Math.random() * 4);
          }

          // 向后脱落、展向微偏并逐渐扩散淡出
          const curX = v.x + v.progress * 48;
          const curY = v.y + v.progress * 38;
          const scale = 0.5 + v.progress * 1.4;
          const opacity = Math.sin(v.progress * Math.PI) * 0.9;

          v.elem.setAttribute('transform', `translate(${curX}, ${curY}) scale(${scale})`);
          v.elem.setAttribute('opacity', opacity);
        });

        // 3. 电机座高频激振动效 (180Hz 振幅模拟)
        const vibAmp = Math.sin(simTime * 45) * 1.6 * (currentRpm / 5400);
        motorVibWave.setAttribute('transform', `translate(0, ${vibAmp})`);
        
        // 橡胶隔振层微剪切弹性形变与阻尼内耗
        const rubberShear = Math.sin(simTime * 28) * 1.2;
        shearWaves.setAttribute('transform', `translate(${rubberShear}, 0)`);
        rubberCore.setAttribute('transform', `scale(1, ${1 + vibAmp * 0.03})`);

        // 机身侧衰减后的极微小响应
        const armAmp = Math.sin(simTime * 6) * 0.25;
        armDampedWave.setAttribute('transform', `translate(0, ${armAmp})`);

        // 4. 声辐射外圈柔和扩散
        const waveScale1 = 1 + (simTime * 0.4) % 0.8;
        const waveScale2 = 1 + ((simTime + 0.3) * 0.4) % 0.8;
        const waveScale3 = 1 + ((simTime + 0.6) * 0.4) % 0.8;
        acousticWave1.setAttribute('r', 120 + waveScale1 * 130);
        acousticWave2.setAttribute('r', 160 + waveScale2 * 140);
        acousticWave3.setAttribute('r', 200 + waveScale3 * 150);

        // 5. 示波器渲染
        renderScope();

        requestAnimationFrame(animate);
      }

      // 启动自动播放
      requestAnimationFrame(animate);
    }
  </script>
</body>
</html>
积分规则:每轮对话扣10分