分享图
动画工坊
引擎就绪
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>智能柔性自适应变弯度桨叶与主动涡流中和 - 原理可视化</title>
  <style>
    :root {
      --bg-space: #050811;
      --bg-panel: rgba(10, 17, 34, 0.72);
      --border-line: rgba(56, 189, 248, 0.22);
      --cyan-neon: #00f0ff;
      --emerald-glow: #10b981;
      --amber-accent: #f59e0b;
      --purple-vortex: #a855f7;
      --text-main: #e2e8f0;
      --text-dim: #64748b;
      --mono-font: "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace;
    }

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

    body {
      background: radial-gradient(circle at 50% 40%, #0d1933 0%, var(--bg-space) 85%);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }

    /* 科技背景网格 */
    .grid-overlay {
      position: absolute;
      inset: 0;
      background-image: 
        linear-gradient(rgba(56, 189, 248, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.04) 1px, transparent 1px);
      background-size: 36px 36px;
      pointer-events: none;
      z-index: 0;
    }

    /* 顶部精简微标头 - 严格限制面积与字号 */
    header {
      position: absolute;
      top: 14px;
      left: 18px;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 12px;
      pointer-events: none;
    }
    .badge {
      font-family: var(--mono-font);
      font-size: 11px;
      background: rgba(0, 240, 255, 0.12);
      border: 1px solid rgba(0, 240, 255, 0.35);
      color: var(--cyan-neon);
      padding: 3px 8px;
      border-radius: 4px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .title-group h1 {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.8px;
      color: #f8fafc;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .title-group p {
      font-size: 11px;
      color: var(--text-dim);
      font-family: var(--mono-font);
    }

    /* 右上角遥测微型数据卡片 */
    .telemetry-card {
      position: absolute;
      top: 14px;
      right: 18px;
      z-index: 10;
      background: var(--bg-panel);
      border: 1px solid var(--border-line);
      backdrop-filter: blur(8px);
      border-radius: 6px;
      padding: 8px 14px;
      display: grid;
      grid-template-columns: repeat(3, auto);
      gap: 16px;
      font-family: var(--mono-font);
    }
    .metric-item {
      display: flex;
      flex-direction: column;
    }
    .metric-label {
      font-size: 10px;
      color: var(--text-dim);
      text-transform: uppercase;
    }
    .metric-value {
      font-size: 13px;
      font-weight: 700;
      color: var(--cyan-neon);
    }

    /* 中央核心无遮挡大舞台 */
    main {
      flex: 1;
      width: 100vw;
      height: 100vh;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }

    svg#stage {
      width: 100%;
      height: 100%;
      max-width: 1380px;
      max-height: 860px;
      filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.6));
    }

    /* 底部悬浮控制台 - 极简边缘化条 */
    .control-deck {
      position: absolute;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      background: var(--bg-panel);
      border: 1px solid var(--border-line);
      backdrop-filter: blur(10px);
      padding: 6px 14px;
      border-radius: 30px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 12px;
    }
    .btn-mode {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-dim);
      font-size: 11px;
      font-family: var(--mono-font);
      padding: 4px 10px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-mode:hover {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.2);
    }
    .btn-mode.active {
      color: var(--cyan-neon);
      background: rgba(0, 240, 255, 0.12);
      border-color: rgba(0, 240, 255, 0.4);
      box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
    }
    .divider {
      width: 1px;
      height: 14px;
      background: var(--border-line);
    }
    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: var(--text-dim);
      font-family: var(--mono-font);
    }
    input[type="range"] {
      -webkit-appearance: none;
      background: #1e293b;
      height: 4px;
      border-radius: 2px;
      outline: none;
      width: 90px;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--cyan-neon);
      cursor: pointer;
      box-shadow: 0 0 6px var(--cyan-neon);
    }

    /* 左下角图例微标签 */
    .legend-box {
      position: absolute;
      bottom: 16px;
      left: 18px;
      z-index: 10;
      pointer-events: none;
      font-size: 11px;
      font-family: var(--mono-font);
      color: var(--text-dim);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .legend-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
    }

    /* 动效与微调 */
    .pulse-ring {
      animation: pulse 2s infinite ease-out;
      transform-origin: center;
    }
    @keyframes pulse {
      0% { r: 6; opacity: 1; stroke-width: 1.5; }
      100% { r: 24; opacity: 0; stroke-width: 0.5; }
    }
  </style>
</head>
<body>
  <div class="grid-overlay"></div>

  <!-- 顶部轻量标题 (极小字号、边缘贴附,绝不遮挡主体) -->
  <header>
    <span class="badge">TRIZ · IFR 理想解</span>
    <div class="title-group">
      <h1>自适应柔性翼型与微型对冲涡消减系统</h1>
      <p>Continuous Camber Reconfiguration &amp; Counter-Vortex System</p>
    </div>
  </header>

  <!-- 右上角性能遥测面板 -->
  <div class="telemetry-card">
    <div class="metric-item">
      <span class="metric-label">后缘偏角 δ</span>
      <span class="metric-value" id="valDeflect">+8.0°</span>
    </div>
    <div class="metric-item">
      <span class="metric-label">巡航净升阻比</span>
      <span class="metric-value" style="color:var(--emerald-glow)" id="valClCd">+11.4%</span>
    </div>
    <div class="metric-item">
      <span class="metric-label">诱导功率损失</span>
      <span class="metric-value" style="color:var(--cyan-neon)" id="valPower">-9.8%</span>
    </div>
  </div>

  <!-- 核心主舞台 (完全居中自适应的大幅动态 SVG) -->
  <main>
    <svg id="stage" viewBox="0 0 1200 700" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- 线性与径向渐变 -->
        <linearGradient id="bladeGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#1e293b" stop-opacity="0.9" />
          <stop offset="35%" stop-color="#334155" stop-opacity="0.95" />
          <stop offset="85%" stop-color="#0f172a" stop-opacity="0.95" />
          <stop offset="100%" stop-color="#00f0ff" stop-opacity="0.3" />
        </linearGradient>

        <linearGradient id="streamGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#00f0ff" stop-opacity="0.05" />
          <stop offset="40%" stop-color="#00f0ff" stop-opacity="0.6" />
          <stop offset="100%" stop-color="#10b981" stop-opacity="0.1" />
        </linearGradient>

        <linearGradient id="vortexNeutralGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#00f0ff" stop-opacity="0.8" />
          <stop offset="100%" stop-color="#a855f7" stop-opacity="0.1" />
        </linearGradient>

        <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation="4" result="blur" />
          <feComposite in="SourceGraphic" in2="blur" operator="over" />
        </filter>
        <filter id="glowStrong" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="7" result="blur" />
          <feComposite in="SourceGraphic" in2="blur" operator="over" />
        </filter>

        <!-- 动效流线粒子模板 -->
        <circle id="particle" r="2.2" fill="#00f0ff" filter="url(#glow)" />
      </defs>

      <!-- 坐标标尺与参考基线 (工程设计图风格) -->
      <g stroke="#1e293b" stroke-width="0.8" stroke-dasharray="3,6">
        <line x1="120" y1="230" x2="1080" y2="230" />
        <line x1="120" y1="480" x2="1080" y2="480" />
        <line x1="300" y1="80" x2="300" y2="620" />
        <line x1="720" y1="80" x2="720" y2="620" />
      </g>

      <!-- ==================== 区域 1:宏观展向全桨叶透视 (TOP VIEW) ==================== -->
      <g id="fullBladeGroup" transform="translate(140, 90)">
        <!-- 标题标注 (极轻量) -->
        <text x="0" y="22" fill="#94a3b8" font-size="11" font-family="var(--mono-font)" letter-spacing="1">
          AREA A: 展向 3 段式微电机驱动柔性变形与反旋桨尖
        </text>

        <!-- 桨根旋转轮毂与滑环 -->
        <g id="bladeRoot" transform="translate(40, 100)">
          <rect x="-35" y="-30" width="35" height="60" rx="4" fill="#1e293b" stroke="#475569" stroke-width="1.2" />
          <circle cx="-15" cy="0" r="14" fill="#0f172a" stroke="#00f0ff" stroke-width="1.2" stroke-dasharray="2,2" />
          <!-- 旋转指示动效 -->
          <circle cx="-15" cy="0" r="8" fill="none" stroke="#00f0ff" stroke-width="1.5">
            <animateTransform attributeName="transform" type="rotate" from="0 -15 0" to="360 -15 0" dur="2s" repeatCount="indefinite" />
          </circle>
          <text x="-48" y="48" fill="#64748b" font-size="10" font-family="var(--mono-font)">空心滑环/根部</text>
        </g>

        <!-- 桨叶主体外形 (采用动态路径绑定) -->
        <path id="bladeMainBody" d="M 40,85 C 220,70 600,68 760,78 L 760,122 C 600,132 220,130 40,115 Z" 
              fill="url(#bladeGrad)" stroke="#38bdf8" stroke-width="1.2" />

        <!-- 柔性后缘 3 段可变形活动翼面 (展向分段) -->
        <g id="flapsGroup">
          <!-- 根段后缘段 (Stage 1) -->
          <path id="flapSeg1" d="M 160,126 L 340,128 L 340,144 L 160,140 Z" fill="#00f0ff" fill-opacity="0.15" stroke="#00f0ff" stroke-width="1" />
          <!-- 中段后缘段 (Stage 2) -->
          <path id="flapSeg2" d="M 350,128 L 540,129 L 540,148 L 350,145 Z" fill="#00f0ff" fill-opacity="0.18" stroke="#00f0ff" stroke-width="1" />
          <!-- 梢段后缘段 (Stage 3) -->
          <path id="flapSeg3" d="M 550,129 L 750,124 L 750,146 L 550,148 Z" fill="#00f0ff" fill-opacity="0.22" stroke="#00f0ff" stroke-width="1" />
        </g>

        <!-- 内部微型无刷电机与微伺服连杆 (Ø12mm 超轻构型) -->
        <g id="actuators">
          <!-- Actuator 1 -->
          <g transform="translate(250, 110)">
            <rect x="-14" y="-8" width="28" height="16" rx="3" fill="#0f172a" stroke="#f59e0b" stroke-width="1.2" />
            <circle cx="0" cy="0" r="3" fill="#f59e0b" filter="url(#glow)" />
            <line id="link1" x1="0" y1="0" x2="0" y2="24" stroke="#f59e0b" stroke-width="1.5" stroke-linecap="round" />
            <text x="-24" y="-12" fill="#f59e0b" font-size="9" font-family="var(--mono-font)">M1 8g/12mm</text>
          </g>
          <!-- Actuator 2 -->
          <g transform="translate(450, 110)">
            <rect x="-14" y="-8" width="28" height="16" rx="3" fill="#0f172a" stroke="#f59e0b" stroke-width="1.2" />
            <circle cx="0" cy="0" r="3" fill="#f59e0b" filter="url(#glow)" />
            <line id="link2" x1="0" y1="0" x2="0" y2="26" stroke="#f59e0b" stroke-width="1.5" stroke-linecap="round" />
            <text x="-24" y="-12" fill="#f59e0b" font-size="9" font-family="var(--mono-font)">M2 扭转伺服</text>
          </g>
          <!-- Actuator 3 -->
          <g transform="translate(650, 110)">
            <rect x="-14" y="-8" width="28" height="16" rx="3" fill="#0f172a" stroke="#f59e0b" stroke-width="1.2" />
            <circle cx="0" cy="0" r="3" fill="#f59e0b" filter="url(#glow)" />
            <line id="link3" x1="0" y1="0" x2="0" y2="26" stroke="#f59e0b" stroke-width="1.5" stroke-linecap="round" />
            <text x="-24" y="-12" fill="#f59e0b" font-size="9" font-family="var(--mono-font)">M3 快速响应</text>
          </g>
        </g>

        <!-- 桨尖 4 寸微型主动涡流中和推进器 -->
        <g id="tipThruster" transform="translate(765, 96)">
          <!-- 推进器短舱底座 -->
          <rect x="0" y="-12" width="24" height="24" rx="4" fill="#0284c7" stroke="#38bdf8" stroke-width="1.2" />
          <path d="M 24,-16 L 36,-10 L 36,10 L 24,16 Z" fill="rgba(56, 189, 248, 0.25)" stroke="#38bdf8" stroke-width="1" />
          <!-- 微型叶轮高速旋转 -->
          <line x1="30" y1="-14" x2="30" y2="14" stroke="#00f0ff" stroke-width="2">
            <animateTransform attributeName="transform" type="rotate" from="0 30 0" to="360 30 0" dur="0.25s" repeatCount="indefinite" />
          </line>
          <!-- 反向旋流射流 (Counter-Swirl Jet) 喷射动画 -->
          <path d="M 38,0 Q 60,-18 90,-8 T 140,-15" fill="none" stroke="#00f0ff" stroke-width="2" stroke-dasharray="4,3" opacity="0.8">
            <animate attributeName="stroke-dashoffset" from="30" to="0" dur="0.8s" repeatCount="indefinite" />
          </path>
          <path d="M 38,0 Q 60,18 90,8 T 140,15" fill="none" stroke="#00f0ff" stroke-width="2" stroke-dasharray="4,3" opacity="0.8">
            <animate attributeName="stroke-dashoffset" from="30" to="0" dur="0.8s" repeatCount="indefinite" />
          </path>
          
          <!-- 桨尖涡消减中和扩散云 (消除传统大能耗诱导涡) -->
          <g transform="translate(130, 0)">
            <ellipse cx="0" cy="0" rx="35" ry="26" fill="url(#vortexNeutralGrad)" opacity="0.35" />
            <circle cx="0" cy="0" r="16" fill="none" stroke="#a855f7" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.8">
              <animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1.2s" repeatCount="indefinite" />
            </circle>
            <circle cx="0" cy="0" r="28" fill="none" stroke="#00f0ff" stroke-width="1.2" stroke-dasharray="4,4" opacity="0.6">
              <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="0.9s" repeatCount="indefinite" />
            </circle>
            <text x="-40" y="44" fill="#a855f7" font-size="9" font-family="var(--mono-font)">反向旋流主动中和桨尖涡</text>
            <text x="-40" y="56" fill="#10b981" font-size="9" font-family="var(--mono-font)">诱导下洗阻力大幅衰减</text>
          </g>
        </g>
      </g>

      <!-- ==================== 区域 2:柔性翼型剖面弯度变形与流场测试 (SECTION VIEW) ==================== -->
      <g id="airfoilSectionGroup" transform="translate(140, 360)">
        <text x="0" y="0" fill="#94a3b8" font-size="11" font-family="var(--mono-font)" letter-spacing="1">
          AREA B: 弦向剖面连续无缝变弯度(Camber-Morphing)与附面层流线
        </text>

        <!-- 背景角度量角器弧线 -->
        <g transform="translate(480, 110)" stroke="#1e293b" stroke-width="1">
          <path d="M 80,-40 A 100 100 0 0 1 80,70" fill="none" stroke-dasharray="2,3" />
          <line x1="0" y1="0" x2="90" y2="-20" stroke="#334155" stroke-dasharray="2,2" />
          <line x1="0" y1="0" x2="90" y2="45" stroke="#334155" stroke-dasharray="2,2" />
          <text x="96" y="-22" fill="#64748b" font-size="9" font-family="var(--mono-font)">-4° 巡航低阻</text>
          <text x="96" y="52" fill="#00f0ff" font-size="9" font-family="var(--mono-font)">+14° 悬停大升力</text>
        </g>

        <!-- 连续气流流线 (通过 JS 驱动流线粒子点位) -->
        <g id="streamlines" opacity="0.85">
          <!-- 上翼面流线 -->
          <path id="streamTop1" d="M -40,40 C 120,-30 350,-25 680,120" fill="none" stroke="url(#streamGrad)" stroke-width="1.4" />
          <path id="streamTop2" d="M -40,15 C 130,-55 350,-45 680,95" fill="none" stroke="url(#streamGrad)" stroke-width="1.2" />
          <path id="streamTop3" d="M -40,-10 C 140,-80 360,-65 680,75" fill="none" stroke="url(#streamGrad)" stroke-width="0.9" />
          
          <!-- 下翼面流线 -->
          <path id="streamBot1" d="M -40,85 C 130,135 340,140 680,180" fill="none" stroke="url(#streamGrad)" stroke-width="1.4" />
          <path id="streamBot2" d="M -40,110 C 130,165 350,165 680,205" fill="none" stroke="url(#streamGrad)" stroke-width="1.2" />
        </g>

        <!-- 柔性翼型本体 (前缘刚性 + 中后缘弹性平滑蒙皮) -->
        <!-- 翼型基准位置:前缘 (80, 90),旋转柔性关节 (320, 90),后缘 (540, 110) -->
        <path id="airfoilPath" d="M 80,90 C 80,35 220,40 340,58 C 430,70 510,95 550,125 C 490,125 410,115 320,115 C 190,115 80,110 80,90 Z"
              fill="rgba(15, 23, 42, 0.95)" stroke="#00f0ff" stroke-width="2" filter="url(#glow)" />

        <!-- 翼型内部微型骨架与联动推杆 -->
        <g id="internalMechanics">
          <!-- 前缘主受力碳纤维梁 -->
          <polygon points="120,70 200,66 195,112 120,105" fill="#1e293b" stroke="#475569" stroke-width="1" />
          <circle cx="150" cy="88" r="9" fill="#0b1329" stroke="#38bdf8" stroke-width="1.2" />
          <text x="135" y="128" fill="#64748b" font-size="9" font-family="var(--mono-font)">主承载翼梁</text>

          <!-- 内部嵌入驱动电机与偏心推杆机构 -->
          <g transform="translate(300, 85)">
            <rect x="-16" y="-12" width="32" height="24" rx="4" fill="#0f172a" stroke="#f59e0b" stroke-width="1.5" />
            <circle cx="0" cy="0" r="5" fill="#f59e0b" />
            <!-- 推拉连杆 -->
            <line id="pushRod" x1="0" y1="0" x2="110" y2="25" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" />
            <circle id="hingeJoint" cx="110" cy="25" r="4" fill="#00f0ff" stroke="#fff" stroke-width="1" />
          </g>

          <!-- 柔性无铰缝弹性后缘蒙皮骨架 -->
          <path id="flexibleRib" d="M 330,85 Q 420,95 540,122" fill="none" stroke="#38bdf8" stroke-width="1.5" stroke-dasharray="4,2" />
        </g>

        <!-- 翼型攻角及弯度实时量化引线 -->
        <g id="angleDimension" transform="translate(565, 125)">
          <line x1="0" y1="0" x2="35" y2="0" stroke="#00f0ff" stroke-width="1" stroke-dasharray="2,2" />
          <path id="arcDeflect" d="M 28,-14 A 30 30 0 0 1 28,14" fill="none" stroke="#00f0ff" stroke-width="1.2" />
          <text id="txtDeflect" x="42" y="4" fill="#00f0ff" font-size="11" font-family="var(--mono-font)">δ = +8.0°</text>
        </g>
      </g>

      <!-- 动态游动流线粒子容器 -->
      <g id="particlesContainer"></g>

      <!-- 视觉引导光标与状态指示 -->
      <g transform="translate(940, 520)" filter="url(#glow)">
        <rect x="0" y="0" width="190" height="96" rx="6" fill="rgba(10, 17, 34, 0.85)" stroke="var(--border-line)" stroke-width="1" />
        <circle cx="20" cy="24" r="5" fill="#10b981" />
        <circle class="pulse-ring" cx="20" cy="24" r="5" fill="none" stroke="#10b981" />
        <text x="34" y="28" fill="#f8fafc" font-size="11" font-weight="600">自适应闭环驱动中</text>
        <text x="18" y="52" fill="#94a3b8" font-size="10" font-family="var(--mono-font)">响应时间: ≤120 ms</text>
        <text x="18" y="70" fill="#94a3b8" font-size="10" font-family="var(--mono-font)">弯度范围: -4° ~ +14°</text>
        <text x="18" y="86" fill="#00f0ff" font-size="10" font-family="var(--mono-font)">涡损降低: ≈10% (主动消除)</text>
      </g>
    </svg>
  </main>

  <!-- 左下角微型图例说明 (不占主要视线) -->
  <div class="legend-box">
    <div class="legend-item">
      <span class="legend-dot" style="background:#00f0ff"></span>
      <span>柔性自适应后缘 (变弯度/变扭转)</span>
    </div>
    <div class="legend-item">
      <span class="legend-dot" style="background:#f59e0b"></span>
      <span>微型无刷电机与连杆伺服 (内嵌式)</span>
    </div>
    <div class="legend-item">
      <span class="legend-dot" style="background:#a855f7"></span>
      <span>桨尖主动反转涡中和喷流</span>
    </div>
  </div>

  <!-- 底部微交互控制栏 -->
  <div class="control-deck">
    <button class="btn-mode active" id="btnAuto">自动循迹演变</button>
    <button class="btn-mode" id="btnHover">悬停大弯度 (+14°)</button>
    <button class="btn-mode" id="btnCruise">巡航最优 (+4°)</button>
    <button class="btn-mode" id="btnHighSpeed">高速冲刺 (-2°)</button>
    <div class="divider"></div>
    <div class="slider-wrap">
      <span>微调 δ:</span>
      <input type="range" id="angleSlider" min="-4" max="14" step="0.5" value="8" />
    </div>
  </div>

  <script>
    /**
     * 智能柔性自适应桨叶与反向涡流中和 - 原理与流体力学高保真动效驱动
     */
    document.addEventListener("DOMContentLoaded", () => {
      // DOM 元素引用
      const airfoilPath = document.getElementById("airfoilPath");
      const pushRod = document.getElementById("pushRod");
      const hingeJoint = document.getElementById("hingeJoint");
      const flapSeg1 = document.getElementById("flapSeg1");
      const flapSeg2 = document.getElementById("flapSeg2");
      const flapSeg3 = document.getElementById("flapSeg3");
      const link1 = document.getElementById("link1");
      const link2 = document.getElementById("link2");
      const link3 = document.getElementById("link3");
      const txtDeflect = document.getElementById("txtDeflect");
      const valDeflect = document.getElementById("valDeflect");
      const valClCd = document.getElementById("valClCd");
      const valPower = document.getElementById("valPower");
      const angleSlider = document.getElementById("angleSlider");
      const particlesContainer = document.getElementById("particlesContainer");

      const btnAuto = document.getElementById("btnAuto");
      const btnHover = document.getElementById("btnHover");
      const btnCruise = document.getElementById("btnCruise");
      const btnHighSpeed = document.getElementById("btnHighSpeed");
      const modeButtons = [btnAuto, btnHover, btnCruise, btnHighSpeed];

      // 状态变量
      let isAuto = true;
      let currentAngle = 8.0; // 襟翼偏角 (-4° 到 +14°)
      let targetAngle = 8.0;
      let autoTime = 0;

      // 粒子流动系统 (模拟附面层风洞无粘层流与微流线)
      const particles = [];
      const particleCount = 28;

      // 创建沿翼型流动的发光微粒子
      for (let i = 0; i < particleCount; i++) {
        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        circle.setAttribute("r", (Math.random() * 1.5 + 1.2).toFixed(1));
        circle.setAttribute("fill", i % 3 === 0 ? "#10b981" : "#00f0ff");
        circle.setAttribute("opacity", (Math.random() * 0.6 + 0.3).toFixed(2));
        particlesContainer.appendChild(circle);

        particles.push({
          el: circle,
          lane: i % 4, // 0: 上翼面内侧, 1: 上翼面外侧, 2: 下翼面, 3: 桨尖中和区
          progress: Math.random(),
          speed: 0.0035 + Math.random() * 0.0045,
          offsetY: (Math.random() - 0.5) * 8
        });
      }

      /**
       * 核心数学几何更新函数:根据偏角重新计算柔性翼型贝塞尔曲线与展向连杆位移
       * @param {number} angle - 襟翼偏角 (-4° 到 +14°)
       */
      function updateAeroGeometry(angle) {
        // 偏角映射计算后缘点坐标位移
        // 旋转铰接基准点: (340, 85),弦长延伸至约 550
        const rad = (angle * Math.PI) / 180;
        const teX = 340 + 205 * Math.cos(rad * 0.85);
        const teY = 85 + 205 * Math.sin(rad * 0.85);

        // 柔性上表面切向控制点计算 (保证曲率 C1 连续无缝隙破损)
        const topCtrlX1 = 220;
        const topCtrlY1 = 38 - angle * 0.4;
        const topCtrlX2 = 340 + 90 * Math.cos(rad * 0.5);
        const topCtrlY2 = 55 + 90 * Math.sin(rad * 0.5);

        // 下表面控制点
        const botCtrlX1 = 340 + 80 * Math.cos(rad * 0.7);
        const botCtrlY1 = 115 + 80 * Math.sin(rad * 0.7);

        // 拼接全新柔顺变形翼型 Path
        const pathData = `M 80,90 
          C 80,32 ${topCtrlX1},${topCtrlY1} 340,${56 + angle * 0.6}
          C ${topCtrlX2},${topCtrlY2} ${teX - 35},${teY - 12} ${teX},${teY}
          C ${teX - 25},${teY + 6} ${botCtrlX1},${botCtrlY1} 320,${114 + angle * 0.3}
          C 190,116 80,112 80,90 Z`;
        airfoilPath.setAttribute("d", pathData);

        // 内部机械连杆伺服位移
        const jointX = 300 + 105 * Math.cos(rad * 0.8);
        const jointY = 85 + 105 * Math.sin(rad * 0.8);
        pushRod.setAttribute("x2", jointX - 300);
        pushRod.setAttribute("y2", jointY - 85);
        hingeJoint.setAttribute("cx", jointX - 300);
        hingeJoint.setAttribute("cy", jointY - 85);

        // 宏观展向全桨叶视图的后缘偏转联动 (带展向扭转渐变分布)
        const tipDeflectPx = angle * 2.2;
        // 分段 1 (根段:变形较小)
        const d1 = `M 160,126 L 340,128 L 340,${144 + tipDeflectPx * 0.4} L 160,${140 + tipDeflectPx * 0.25} Z`;
        flapSeg1.setAttribute("d", d1);
        link1.setAttribute("y2", 24 + tipDeflectPx * 0.3);

        // 分段 2 (中段)
        const d2 = `M 350,128 L 540,129 L 540,${148 + tipDeflectPx * 0.7} L 350,${145 + tipDeflectPx * 0.45} Z`;
        flapSeg2.setAttribute("d", d2);
        link2.setAttribute("y2", 26 + tipDeflectPx * 0.55);

        // 分段 3 (梢段:变形最大,配合主动涡中和)
        const d3 = `M 550,129 L 750,124 L 750,${146 + tipDeflectPx} L 550,${148 + tipDeflectPx * 0.75} Z`;
        flapSeg3.setAttribute("d", d3);
        link3.setAttribute("y2", 26 + tipDeflectPx * 0.85);

        // 数据文本刷新
        const signStr = angle >= 0 ? "+" : "";
        const formattedAngle = `${signStr}${angle.toFixed(1)}°`;
        txtDeflect.textContent = `δ = ${formattedAngle}`;
        valDeflect.textContent = formattedAngle;

        // 动力学理论预估数值更新 (基于翼型变弯度升阻比模型)
        // 巡航效率在偏角 +3°~+6° 达到峰值;大偏角时升力极大,适用于爬升/悬停
        let clGain, inducedSaving;
        if (angle >= 0) {
          clGain = (8.5 + (angle > 5 ? 5 - (angle - 5) * 0.5 : angle * 0.8)).toFixed(1);
          inducedSaving = (7.5 + (angle * 0.35)).toFixed(1);
        } else {
          clGain = (6.0 + angle * 0.8).toFixed(1);
          inducedSaving = (5.0 + angle * 0.5).toFixed(1);
        }
        valClCd.textContent = `+${clGain}%`;
        valPower.textContent = `-${inducedSaving}%`;
      }

      /**
       * 粒子流动轨迹计算:沿上翼面、下翼面及桨尖喷流流线实时步进
       */
      function animateParticles() {
        const rad = (currentAngle * Math.PI) / 180;
        const teYOffset = currentAngle * 2.2;

        particles.forEach((p) => {
          p.progress += p.speed;
          if (p.progress > 1) p.progress = 0;

          let px = 0;
          let py = 0;
          const u = p.progress;

          if (p.lane === 0) {
            // 上翼面层流 (紧贴壁面)
            px = 100 + u * 600;
            // 贝塞尔近似高度
            const curve = Math.sin(u * Math.PI);
            py = 445 - curve * 52 + u * (teYOffset * 0.9) + p.offsetY;
          } else if (p.lane === 1) {
            // 上翼面外侧流动
            px = 100 + u * 610;
            const curve = Math.sin(u * Math.PI * 0.9);
            py = 415 - curve * 70 + u * (teYOffset * 0.6) + p.offsetY;
          } else if (p.lane === 2) {
            // 下翼面平缓压力面
            px = 100 + u * 590;
            py = 475 + Math.sin(u * Math.PI) * 18 + u * (teYOffset * 1.1) + p.offsetY;
          } else {
            // 桨尖微型推进器主动中和反向涡流粒子
            px = 905 + u * 150;
            // 螺旋旋流发散轨迹
            const spiral = Math.sin(u * 18) * (14 + u * 16);
            py = 186 + spiral + (Math.cos(u * 18) * 8);
          }

          p.el.setAttribute("cx", px.toFixed(1));
          p.el.setAttribute("cy", py.toFixed(1));
        });
      }

      /**
       * 主渲染循环 (平滑过渡与自动巡航演变)
       */
      function mainLoop(timestamp) {
        if (isAuto) {
          autoTime += 0.016;
          // 正弦波动模拟自适应随飞行状态实时无级微调 (-2° ~ +13°)
          targetAngle = 5.5 + Math.sin(autoTime * 0.9) * 7.5;
          angleSlider.value = targetAngle;
        }

        // 平滑阻尼跟踪目标角 (模拟实际微电机 ≤120ms 高动态响应特性)
        currentAngle += (targetAngle - currentAngle) * 0.12;

        updateAeroGeometry(currentAngle);
        animateParticles();

        requestAnimationFrame(mainLoop);
      }

      // 启动自动播放
      requestAnimationFrame(mainLoop);

      // ==================== 交互事件绑定 ====================
      function setActiveBtn(activeBtn) {
        modeButtons.forEach((b) => b.classList.remove("active"));
        if (activeBtn) activeBtn.classList.add("active");
      }

      btnAuto.addEventListener("click", () => {
        isAuto = true;
        setActiveBtn(btnAuto);
      });

      btnHover.addEventListener("click", () => {
        isAuto = false;
        targetAngle = 14.0;
        angleSlider.value = 14;
        setActiveBtn(btnHover);
      });

      btnCruise.addEventListener("click", () => {
        isAuto = false;
        targetAngle = 4.0;
        angleSlider.value = 4;
        setActiveBtn(btnCruise);
      });

      btnHighSpeed.addEventListener("click", () => {
        isAuto = false;
        targetAngle = -2.0;
        angleSlider.value = -2;
        setActiveBtn(btnHighSpeed);
      });

      angleSlider.addEventListener("input", (e) => {
        isAuto = false;
        targetAngle = parseFloat(e.target.value);
        setActiveBtn(null);
      });
    });
  </script>
</body>
</html>
积分规则:每轮对话扣10分