分享图
A
动画渲染工坊
就绪
<!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>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
:root{
  --bg:#060b16;--card:#0b1222;--border:#162040;
  --fg:#c0cce0;--muted:#4a5e78;
  --green:#00e676;--amber:#ff9100;--cyan:#00e5ff;--red:#ff5252;
  --steel:#3e5068;--steel-lt:#5a7090;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:'Noto Sans SC',sans-serif;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;overflow-x:hidden}

.header{text-align:center;padding:28px 20px 6px;max-width:860px}
.header h1{font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;
  color:var(--green);letter-spacing:3px;text-transform:uppercase;
  text-shadow:0 0 24px rgba(0,230,118,.25)}
.header .sub{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.7}
.header .sub em{font-style:normal;color:var(--green);font-weight:500}

.svg-wrap{width:96vw;max-width:960px;aspect-ratio:9/11;margin:8px auto 0;position:relative}
.svg-wrap svg{width:100%;height:100%;display:block}

.controls{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  align-items:center;padding:14px 20px;max-width:900px;margin:0 auto}
.ctrl{display:flex;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 14px}
.ctrl label{font-size:12px;color:var(--muted);white-space:nowrap}
.ctrl input[type=range]{-webkit-appearance:none;appearance:none;width:110px;height:4px;
  background:var(--border);border-radius:2px;outline:none}
.ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;background:var(--green);cursor:pointer;
  box-shadow:0 0 8px rgba(0,230,118,.4)}
.speed-val{font-family:'Rajdhani',sans-serif;font-size:13px;color:var(--green);min-width:28px;text-align:right}

.btn{background:var(--card);border:1px solid var(--border);color:var(--muted);
  padding:7px 14px;border-radius:6px;cursor:pointer;font-size:12px;
  font-family:'Noto Sans SC',sans-serif;transition:all .25s}
.btn:hover{background:rgba(255,255,255,.04)}
.btn.on-amber{border-color:var(--amber);color:var(--amber);box-shadow:0 0 10px rgba(255,145,0,.18)}
.btn.on-cyan{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 10px rgba(0,229,255,.18)}
.btn.on-green{border-color:var(--green);color:var(--green);box-shadow:0 0 10px rgba(0,230,118,.18)}
.btn.on-red{border-color:var(--red);color:var(--red);box-shadow:0 0 10px rgba(255,82,82,.18)}

.legend{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
  padding:6px 20px 24px;max-width:900px}
.leg{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.leg i{font-size:9px}

@media(max-width:640px){
  .header h1{font-size:17px;letter-spacing:1px}
  .header .sub{font-size:11px}
  .controls{gap:8px;padding:10px 12px}
  .ctrl{padding:6px 10px}
  .ctrl input[type=range]{width:80px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:0s!important;transition-duration:0s!important}}
</style>
</head>
<body>

<div class="header">
  <h1>Decoupled Reducer Mounting &mdash; IFR Principle</h1>
  <p class="sub">承载连接法兰使高低速减速机受力路径<em>完全解耦</em>，搅拌轴仅承受纯扭矩——最终理想解：问题本身已不存在</p>
</div>

<div class="svg-wrap">
<svg id="mainSvg" viewBox="0 0 900 1100" xmlns="http://www.w3.org/2000/svg">
<defs>
  <!-- 背景网格 -->
  <pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse">
    <path d="M30 0L0 0 0 30" fill="none" stroke="#0e1a30" stroke-width=".5"/>
  </pattern>
  <!-- 金属渐变 -->
  <linearGradient id="gSteel" x1="0" y1="0" x2="1" y2="0">
    <stop offset="0%" stop-color="#2e3e54"/><stop offset="45%" stop-color="#4a6080"/>
    <stop offset="55%" stop-color="#5a7090"/><stop offset="100%" stop-color="#2e3e54"/>
  </linearGradient>
  <linearGradient id="gSteelV" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#3a4e68"/><stop offset="100%" stop-color="#263648"/>
  </linearGradient>
  <linearGradient id="gFlange" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#00c864"/><stop offset="50%" stop-color="#00e676"/>
    <stop offset="100%" stop-color="#00a856"/>
  </linearGradient>
  <linearGradient id="gLid" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#4a5e78"/><stop offset="100%" stop-color="#2a3a50"/>
  </linearGradient>
  <linearGradient id="gVessel" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#141e30"/><stop offset="100%" stop-color="#0a1018"/>
  </linearGradient>
  <linearGradient id="gPillar" x1="0" y1="0" x2="1" y2="0">
    <stop offset="0%" stop-color="#3a506a"/><stop offset="40%" stop-color="#6a8aaa"/>
    <stop offset="60%" stop-color="#7a9aba"/><stop offset="100%" stop-color="#3a506a"/>
  </linearGradient>
  <linearGradient id="gHS" x1="0" y1="0" x2="1" y2="0">
    <stop offset="0%" stop-color="#2a3a50"/><stop offset="45%" stop-color="#405878"/>
    <stop offset="55%" stop-color="#4a6888"/><stop offset="100%" stop-color="#2a3a50"/>
  </linearGradient>
  <linearGradient id="gShaftOut" x1="0" y1="0" x2="1" y2="0">
    <stop offset="0%" stop-color="#40608a"/><stop offset="50%" stop-color="#6a90b8"/>
    <stop offset="100%" stop-color="#40608a"/>
  </linearGradient>
  <linearGradient id="gShaftIn" x1="0" y1="0" x2="1" y2="0">
    <stop offset="0%" stop-color="#b07020"/><stop offset="50%" stop-color="#e8a040"/>
    <stop offset="100%" stop-color="#b07020"/>
  </linearGradient>
  <!-- 发光滤镜 -->
  <filter id="fGlowG" x="-40%" y="-40%" width="180%" height="180%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="b"/>
    <feColorMatrix in="b" type="matrix" values="0 0 0 0 0  0 1 0 0 0.9  0 0 0 0 0.46  0 0 0 0.7 0" result="c"/>
    <feMerge><feMergeNode in="c"/><feMergeNode in="SourceGraphic"/></feMerge>
  </filter>
  <filter id="fGlowA" x="-50%" y="-50%" width="200%" height="200%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b"/>
    <feColorMatrix in="b" type="matrix" values="0 0 0 0 1  0 0 0 0 0.57  0 0 0 0 0  0 0 0 0.8 0" result="c"/>
    <feMerge><feMergeNode in="c"/><feMergeNode in="SourceGraphic"/></feMerge>
  </filter>
  <filter id="fGlowC" x="-50%" y="-50%" width="200%" height="200%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b"/>
    <feColorMatrix in="b" type="matrix" values="0 0 0 0 0  0 0 0 0 0.9  0 0 0 0 1  0 0 0 0.8 0" result="c"/>
    <feMerge><feMergeNode in="c"/><feMergeNode in="SourceGraphic"/></feMerge>
  </filter>
  <filter id="fShadow">
    <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity=".35"/>
  </filter>
  <!-- 密封符号 -->
  <marker id="arrowG" markerWidth="8" markerHeight="6" refX="4" refY="3" orient="auto">
    <path d="M0,0 L8,3 L0,6Z" fill="#00e676"/>
  </marker>
</defs>

<!-- 背景 -->
<rect width="900" height="1100" fill="#060b16"/>
<rect width="900" height="1100" fill="url(#grid)" opacity=".6"/>

<!-- ============ 反应釜体 ============ -->
<g id="vessel">
  <rect x="130" y="720" width="640" height="310" rx="18" fill="url(#gVessel)" stroke="#1a2a40" stroke-width="2"/>
  <!-- 釜内液面 -->
  <path d="M148,820 Q300,800 450,815 Q600,830 752,810 L752,1012 Q752,1012 750,1012 L150,1012 Q148,1012 148,1012Z"
    fill="#0a1828" opacity=".7"/>
  <path d="M148,820 Q300,800 450,815 Q600,830 752,810" fill="none" stroke="#1a3a60" stroke-width="1.5" opacity=".5"/>
  <!-- 搅拌叶片（低速轴） -->
  <g id="bladeLow" transform="translate(450,880)">
    <rect x="-80" y="-5" width="160" height="10" rx="3" fill="#4a6888" opacity=".7"/>
    <rect x="-5" y="-50" width="10" height="100" rx="3" fill="#4a6888" opacity=".7"/>
  </g>
  <!-- 搅拌叶片（高速轴） -->
  <g id="bladeHigh" transform="450,940)">
    <ellipse cx="0" cy="0" rx="35" ry="8" fill="#c08030" opacity=".6"/>
  </g>
</g>

<!-- ============ 釜盖 ============ -->
<g id="lid">
  <rect x="130" y="680" width="640" height="40" rx="4" fill="url(#gLid)" stroke="#3a5068" stroke-width="1.5" filter="url(#fShadow)"/>
  <!-- 釜盖螺栓 -->
  <g fill="#5a7090" stroke="#3a5068" stroke-width=".8">
    <circle cx="170" cy="700" r="6"/><circle cx="230" cy="700" r="6"/>
    <circle cx="670" cy="700" r="6"/><circle cx="730" cy="700" r="6"/>
    <circle cx="350" cy="700" r="5"/><circle cx="550" cy="700" r="5"/>
  </g>
</g>

<!-- ============ 承载连接法兰（核心创新）============ -->
<g id="flangeGroup">
  <!-- 发光底层 -->
  <rect x="225" y="638" width="450" height="42" rx="3" fill="#00e676" opacity=".15" filter="url(#fGlowG)">
    <animate attributeName="opacity" values=".1;.25;.1" dur="2.5s" repeatCount="indefinite"/>
  </rect>
  <!-- 法兰主体 -->
  <rect x="228" y="640" width="444" height="38" rx="2" fill="url(#gFlange)" stroke="#00ff88" stroke-width="1.2" filter="url(#fGlowG)"/>
  <!-- 法兰厚度标注 35mm -->
  <line x1="195" y1="640" x2="195" y2="678" stroke="#00e676" stroke-width=".8" opacity=".6"/>
  <line x1="190" y1="640" x2="200" y2="640" stroke="#00e676" stroke-width=".8" opacity=".6"/>
  <line x1="190" y1="678" x2="200" y2="678" stroke="#00e676" stroke-width=".8" opacity=".6"/>
  <text x="185" y="663" fill="#00e676" font-family="Rajdhani,sans-serif" font-size="11" text-anchor="end" opacity=".8">35mm</text>
  <!-- 焊接标识 -->
  <g stroke="#00e676" stroke-width="1.5" fill="none" opacity=".5">
    <path d="M430,678 L440,690 L450,678 L460,690 L470,678"/>
    <path d="M430,680 L440,692 L450,680 L460,692 L470,680"/>
  </g>
  <!-- 法兰标签 -->
  <text x="450" y="664" fill="#003818" font-family="'Noto Sans SC',sans-serif" font-size="13" font-weight="700" text-anchor="middle">承载连接法兰</text>
</g>

<!-- ============ 低速减速机 ============ -->
<g id="lowSpeedReducer" filter="url(#fShadow)">
  <!-- 主体 -->
  <rect x="285" y="310" width="330" height="330" rx="6" fill="url(#gSteel)" stroke="#3a5068" stroke-width="1.5"/>
  <!-- 散热鳍片 -->
  <g stroke="#3a5068" stroke-width="1" opacity=".5">
    <line x1="290" y1="350" x2="610" y2="350"/>
    <line x1="290" y1="390" x2="610" y2="390"/>
    <line x1="290" y1="430" x2="610" y2="430"/>
    <line x1="290" y1="470" x2="610" y2="470"/>
    <line x1="290" y1="510" x2="610" y2="510"/>
    <line x1="290" y1="550" x2="610" y2="550"/>
    <line x1="290" y1="590" x2="610" y2="590"/>
  </g>
  <!-- 左侧耳 -->
  <rect x="240" y="620" width="45" height="20" rx="2" fill="url(#gSteelV)" stroke="#3a5068" stroke-width="1"/>
  <circle cx="262" cy="630" r="4" fill="#2a3a50" stroke="#5a7090" stroke-width=".8"/>
  <!-- 右侧耳 -->
  <rect x="615" y="620" width="45" height="20" rx="2" fill="url(#gSteelV)" stroke="#3a5068" stroke-width="1"/>
  <circle cx="638" cy="630" r="4" fill="#2a3a50" stroke="#5a7090" stroke-width=".8"/>
  <!-- 标签 -->
  <text x="450" y="470" fill="#8aa0c0" font-family="'Noto Sans SC',sans-serif" font-size="15" font-weight="500" text-anchor="middle">低速减速机</text>
  <text x="450" y="492" fill="#5a7090" font-family="Rajdhani,sans-serif" font-size="12" text-anchor="middle">(大)</text>
</g>

<!-- ============ 高强立柱 ×4 ============ -->
<g id="pillars">
  <!-- 左前立柱 -->
  <rect x="248" y="268" width="24" height="372" rx="2" fill="url(#gPillar)" stroke="#5a7a9a" stroke-width="1"/>
  <!-- 右前立柱 -->
  <rect x="628" y="268" width="24" height="372" rx="2" fill="url(#gPillar)" stroke="#5a7a9a" stroke-width="1"/>
  <!-- 左后立柱（透视缩小） -->
  <rect x="280" y="278" width="16" height="362" rx="2" fill="#3a5068" stroke="#4a6888" stroke-width=".8" opacity=".5"/>
  <!-- 右后立柱 -->
  <rect x="604" y="278" width="16" height="362" rx="2" fill="#3a5068" stroke="#4a6888" stroke-width=".8" opacity=".5"/>
  <!-- 立柱直径标注 -->
  <line x1="248" y1="245" x2="272" y2="245" stroke="#8aa0c0" stroke-width=".8" opacity=".6"/>
  <text x="260" y="240" fill="#8aa0c0" font-family="Rajdhani,sans-serif" font-size="10" text-anchor="middle" opacity=".7">∅40</text>
  <!-- ×4 标识 -->
  <text x="450" y="280" fill="#5a7a9a" font-family="Rajdhani,sans-serif" font-size="13" text-anchor="middle" opacity=".6">×4 高强立柱</text>
</g>

<!-- ============ 高速减速机（悬挂式）============ -->
<g id="highSpeedReducer" filter="url(#fShadow)">
  <!-- 主体 -->
  <rect x="330" y="130" width="240" height="138" rx="5" fill="url(#gHS)" stroke="#3a5068" stroke-width="1.5"/>
  <!-- 电机 -->
  <rect x="390" y="62" width="120" height="68" rx="4" fill="#2a3a50" stroke="#3a5068" stroke-width="1.2"/>
  <rect x="405" y="50" width="90" height="16" rx="3" fill="#223040" stroke="#3a5068" stroke-width=".8"/>
  <!-- 散热鳍 -->
  <g stroke="#3a5068" stroke-width=".8" opacity=".4">
    <line x1="335" y1="170" x2="565" y2="170"/>
    <line x1="335" y1="200" x2="565" y2="200"/>
    <line x1="335" y1="230" x2="565" y2="230"/>
  </g>
  <!-- 悬挂标识 -->
  <text x="450" y="188" fill="#8aa0c0" font-family="'Noto Sans SC',sans-serif" font-size="14" font-weight="500" text-anchor="middle">高速减速机</text>
  <text x="450" y="208" fill="#5a7090" font-family="Rajdhani,sans-serif" font-size="12" text-anchor="middle">(小 · 悬挂式)</text>
  <!-- 悬挂连接点 -->
  <circle cx="260" cy="268" r="5" fill="#5a7a9a" stroke="#8aa0c0" stroke-width="1"/>
  <circle cx="640" cy="268" r="5" fill="#5a7a9a" stroke="#8aa0c0" stroke-width="1"/>
</g>

<!-- ============ 轴系 ============ -->
<g id="shafts">
  <!-- 空心轴 60mm（低速减速机输出）-->
  <rect x="431" y="500" width="38" height="180" rx="1" fill="url(#gShaftOut)" opacity=".8"/>
  <rect x="431" y="680" width="38" height="42" rx="1" fill="url(#gShaftOut)"/>
  <rect x="431" y="722" width="38" height="220" rx="1" fill="url(#gShaftOut)" opacity=".6"/>
  <!-- 空心轴内孔 -->
  <rect x="440" y="500" width="20" height="442" rx="0" fill="#0e1828" opacity=".85"/>
  <!-- 空心轴标注 -->
  <line x1="469" y1="750" x2="510" y2="750" stroke="#6a90b8" stroke-width=".7" opacity=".5"/>
  <text x="516" y="754" fill="#6a90b8" font-family="Rajdhani,sans-serif" font-size="10" opacity=".7">∅60 空心轴</text>

  <!-- 实心轴 35mm（高速减速机输出）-->
  <rect x="441" y="130" width="18" height="170" rx="1" fill="url(#gShaftIn)"/>
  <rect x="441" y="310" width="18" height="330" rx="1" fill="url(#gShaftIn)" opacity=".75"/>
  <rect x="441" y="640" width="18" height="310" rx="1" fill="url(#gShaftIn)" opacity=".55"/>
  <!-- 实心轴标注 -->
  <line x1="441" y1="780" x2="395" y2="780" stroke="#e8a040" stroke-width=".7" opacity=".5"/>
  <text x="390" y="784" fill="#e8a040" font-family="Rajdhani,sans-serif" font-size="10" text-anchor="end" opacity=".7">∅35 实心轴</text>

  <!-- 轴旋转标记（低速） -->
  <g id="rotLow" transform="translate(450,860)">
    <line x1="-12" y1="0" x2="12" y2="0" stroke="#8ab0d8" stroke-width="2" stroke-linecap="round" opacity=".7"/>
    <line x1="0" y1="-12" x2="0" y2="12" stroke="#8ab0d8" stroke-width="2" stroke-linecap="round" opacity=".7"/>
  </g>
  <!-- 轴旋转标记（高速） -->
  <g id="rotHigh" transform="translate(450,940)">
    <line x1="-8" y1="0" x2="8" y2="0" stroke="#e8a040" stroke-width="1.8" stroke-linecap="round" opacity=".7"/>
    <line x1="0" y1="-8" x2="0" y2="8" stroke="#e8a040" stroke-width="1.8" stroke-linecap="round" opacity=".7"/>
  </g>
</g>

<!-- ============ 独立机械密封 ============ -->
<g id="seals">
  <!-- 空心轴密封 -->
  <rect x="426" y="718" width="48" height="8" rx="2" fill="#00e5ff" opacity=".5" stroke="#00e5ff" stroke-width=".8">
    <animate attributeName="opacity" values=".3;.6;.3" dur="3s" repeatCount="indefinite"/>
  </rect>
  <!-- 实心轴密封 -->
  <rect x="437" y="726" width="26" height="8" rx="2" fill="#ff9100" opacity=".5" stroke="#ff9100" stroke-width=".8">
    <animate attributeName="opacity" values=".3;.6;.3" dur="3s" begin=".5s" repeatCount="indefinite"/>
  </rect>
  <!-- 密封标签 -->
  <line x1="474" y1="722" x2="530" y2="710" stroke="#00e5ff" stroke-width=".6" opacity=".5"/>
  <text x="535" y="714" fill="#00e5ff" font-family="'Noto Sans SC',sans-serif" font-size="10" opacity=".7">密封①</text>
  <line x1="463" y1="730" x2="530" y2="738" stroke="#ff9100" stroke-width=".6" opacity=".5"/>
  <text x="535" y="742" fill="#ff9100" font-family="'Noto Sans SC',sans-serif" font-size="10" opacity=".7">密封②</text>
</g>

<!-- ============ 力路径粒子层 ============ -->
<g id="forceParticles"></g>

<!-- ============ 扭矩指示 ============ -->
<g id="torqueIndicator" opacity="0">
  <!-- 低速轴扭矩弧 -->
  <path d="M420,850 A30,30 0 0,1 480,850" fill="none" stroke="#6a90b8" stroke-width="2" marker-end="url(#arrowG)"/>
  <text x="450" y="840" fill="#6a90b8" font-family="Rajdhani,sans-serif" font-size="11" text-anchor="middle">T₁ 纯扭矩</text>
  <!-- 高速轴扭矩弧 -->
  <path d="M432,950 A18,18 0 0,1 468,950" fill="none" stroke="#e8a040" stroke-width="1.5" marker-end="url(#arrowG)"/>
  <text x="450" y="965" fill="#e8a040" font-family="Rajdhani,sans-serif" font-size="11" text-anchor="middle">T₂ 纯扭矩</text>
</g>

<!-- ============ 标注文字 ============ -->
<g id="annotations" font-family="'Noto Sans SC',sans-serif">
  <!-- 悬挂式标注 -->
  <line x1="570" y1="160" x2="640" y2="120" stroke="#5a7090" stroke-width=".7" stroke-dasharray="3,3"/>
  <text x="645" y="115" fill="#8aa0c0" font-size="11">悬挂固定于法兰</text>
  <text x="645" y="130" fill="#5a7090" font-size="10">不自压于低速机壳体</text>

  <!-- 侧耳安装标注 -->
  <line x1="262" y1="630" x2="180" y2="620" stroke="#5a7090" stroke-width=".7" stroke-dasharray="3,3"/>
  <text x="100" y="615" fill="#8aa0c0" font-size="11">侧耳安装</text>
  <text x="100" y="630" fill="#5a7090" font-size="10">重力传至法兰</text>

  <!-- 解耦标注 -->
  <rect x="50" y="440" width="130" height="60" rx="6" fill="none" stroke="#00e676" stroke-width=".8" stroke-dasharray="4,3" opacity=".5"/>
  <text x="115" y="462" fill="#00e676" font-size="12" font-weight="500" text-anchor="middle">完全解耦</text>
  <text x="115" y="480" fill="#5a8a60" font-size="10" text-anchor="middle">受力路径互不干涉</text>
  <line x1="180" y1="470" x2="240" y2="470" stroke="#00e676" stroke-width=".6" stroke-dasharray="3,3" opacity=".4"/>

  <!-- IFR标注 -->
  <rect x="620" y="420" width="160" height="80" rx="8" fill="#0a1a10" stroke="#00e676" stroke-width="1" opacity=".8"/>
  <text x="700" y="445" fill="#00e676" font-size="12" font-weight="700" text-anchor="middle">IFR 最终理想解</text>
  <text x="700" y="462" fill="#4a8a5a" font-size="10" text-anchor="middle">壳体承重变形 → 已消除</text>
  <text x="700" y="478" fill="#4a8a5a" font-size="10" text-anchor="middle">密封频繁失效 → 已消除</text>
  <text x="700" y="494" fill="#4a8a5a" font-size="10" text-anchor="middle">搅拌轴仅受纯扭矩</text>
</g>

<!-- ============ 底部说明 ============ -->
<text x="450" y="1060" fill="#3a4a60" font-family="'Noto Sans SC',sans-serif" font-size="11" text-anchor="middle">液压升降时全部重力经统一法兰均匀分配 · 出料翻转时法兰刚性抵抗管线拉力</text>
<text x="450" y="1080" fill="#2a3a50" font-family="'Noto Sans SC',sans-serif" font-size="10" text-anchor="middle">边界：四周立柱占地较大，不适用于釜盖上方空间极度受限场合</text>

</svg>
</div>

<!-- 控制面板 -->
<div class="controls">
  <div class="ctrl">
    <label><i class="fas fa-gauge-high"></i> 转速</label>
    <input type="range" id="speedSlider" min="0" max="200" value="80">
    <span class="speed-val" id="speedVal">80</span>
  </div>
  <button class="btn on-amber" id="btnForceHS" onclick="toggleForceHS()">
    <i class="fas fa-arrow-down"></i> 高速机力路径
  </button>
  <button class="btn on-cyan" id="btnForceLS" onclick="toggleForceLS()">
    <i class="fas fa-arrow-down"></i> 低速机力路径
  </button>
  <button class="btn on-green" id="btnFlange" onclick="toggleFlangeHL()">
    <i class="fas fa-star"></i> 法兰高亮
  </button>
  <button class="btn" id="btnTorque" onclick="toggleTorque()">
    <i class="fas fa-rotate"></i> 纯扭矩标识
  </button>
</div>

<div class="legend">
  <div class="leg"><i class="fas fa-circle" style="color:#ff9100"></i> 高速减速机重力路径</div>
  <div class="leg"><i class="fas fa-circle" style="color:#00e5ff"></i> 低速减速机重力路径</div>
  <div class="leg"><i class="fas fa-circle" style="color:#00e676"></i> 承载法兰（核心创新）</div>
  <div class="leg"><i class="fas fa-circle" style="color:#e8a040"></i> 实心轴 ∅35</div>
  <div class="leg"><i class="fas fa-circle" style="color:#6a90b8"></i> 空心轴 ∅60</div>
</div>

<script>
/* ===== 全局状态 ===== */
let showForceHS = true, showForceLS = true, showFlangeHL = true, showTorque = false;
let rotSpeed = 80; // 0-200
let angleLow = 0, angleHigh = 0;
let animId = null;
let lastTime = 0;

/* ===== 力路径定义 ===== */
// 高速减速机力路径（琥珀色）：高速机 → 立柱 → 法兰 → 釜盖
const forcePathHS_Left = [
  {x:450, y:180}, {x:260, y:180}, {x:260, y:268},
  {x:260, y:640}, {x:450, y:659}, {x:450, y:700}
];
const forcePathHS_Right = [
  {x:450, y:180}, {x:640, y:180}, {x:640, y:268},
  {x:640, y:640}, {x:450, y:659}, {x:450, y:700}
];

// 低速减速机力路径（青色）：低速机 → 侧耳 → 法兰 → 釜盖
const forcePathLS_Left = [
  {x:450, y:490}, {x:262, y:490}, {x:262, y:620},
  {x:262, y:640}, {x:450, y:659}, {x:450, y:700}
];
const forcePathLS_Right = [
  {x:450, y:490}, {x:638, y:490}, {x:638, y:620},
  {x:638, y:640}, {x:450, y:659}, {x:450, y:700}
];

/* ===== 粒子系统 ===== */
const particles = [];
const PARTICLE_COUNT_PER_PATH = 7;

function createParticles() {
  const svg = document.getElementById('forceParticles');
  svg.innerHTML = '';
  particles.length = 0;

  const configs = [
    { path: forcePathHS_Left,  color: '#ff9100', visible: () => showForceHS },
    { path: forcePathHS_Right, color: '#ff9100', visible: () => showForceHS },
    { path: forcePathLS_Left,  color: '#00e5ff', visible: () => showForceLS },
    { path: forcePathLS_Right, color: '#00e5ff', visible: () => showForceLS },
  ];

  configs.forEach(cfg => {
    for (let i = 0; i < PARTICLE_COUNT_PER_PATH; i++) {
      const el = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      el.setAttribute('r', '4');
      el.setAttribute('fill', cfg.color);
      el.setAttribute('opacity', '0');
      svg.appendChild(el);

      // 尾迹
      const trail = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      trail.setAttribute('r', '7');
      trail.setAttribute('fill', cfg.color);
      trail.setAttribute('opacity', '0');
      svg.insertBefore(trail, el);

      particles.push({
        el, trail, cfg,
        t: i / PARTICLE_COUNT_PER_PATH, // 沿路径 0-1
        speed: 0.12 + Math.random() * 0.03
      });
    }
  });
}

/* 沿路径插值 */
function interpPath(path, t) {
  t = Math.max(0, Math.min(1, t));
  const totalSegs = path.length - 1;
  const seg = Math.min(Math.floor(t * totalSegs), totalSegs - 1);
  const localT = (t * totalSegs) - seg;
  const p0 = path[seg], p1 = path[seg + 1];
  return {
    x: p0.x + (p1.x - p0.x) * localT,
    y: p0.y + (p1.y - p0.y) * localT
  };
}

/* ===== 旋转标记 ===== */
function updateRotation(dt) {
  const s = rotSpeed / 100;
  // 低速轴转速较慢
  angleLow += dt * 0.8 * s;
  // 高速轴转速较快（约3倍）
  angleHigh += dt * 2.4 * s;

  const rotLowEl = document.getElementById('rotLow');
  const rotHighEl = document.getElementById('rotHigh');
  if (rotLowEl) rotLowEl.setAttribute('transform', `translate(450,860) rotate(${angleLow * 180 / Math.PI})`);
  if (rotHighEl) rotHighEl.setAttribute('transform', `translate(450,940) rotate(${angleHigh * 180 / Math.PI})`);

  // 叶片旋转
  const bladeLow = document.getElementById('bladeLow');
  const bladeHigh = document.getElementById('bladeHigh');
  if (bladeLow) bladeLow.setAttribute('transform', `translate(450,880) rotate(${angleLow * 180 / Math.PI})`);
  if (bladeHigh) bladeHigh.setAttribute('transform', `translate(450,940) rotate(${angleHigh * 180 / Math.PI})`);
}

/* ===== 主动画循环 ===== */
function animate(now) {
  if (!lastTime) lastTime = now;
  const dt = Math.min((now - lastTime) / 1000, 0.05);
  lastTime = now;

  // 更新粒子
  particles.forEach(p => {
    p.t += p.speed * dt * (rotSpeed / 80);
    if (p.t > 1) p.t -= 1;

    const pos = interpPath(p.cfg.path, p.t);
    const vis = p.cfg.visible();
    const op = vis ? 0.85 : 0;
    p.el.setAttribute('cx', pos.x);
    p.el.setAttribute('cy', pos.y);
    p.el.setAttribute('opacity', op);
    p.trail.setAttribute('cx', pos.x);
    p.trail.setAttribute('cy', pos.y);
    p.trail.setAttribute('opacity', vis ? 0.15 : 0);
  });

  // 更新旋转
  updateRotation(dt);

  animId = requestAnimationFrame(animate);
}

/* ===== 控制函数 ===== */
function toggleForceHS() {
  showForceHS = !showForceHS;
  document.getElementById('btnForceHS').classList.toggle('on-amber', showForceHS);
}
function toggleForceLS() {
  showForceLS = !showForceLS;
  document.getElementById('btnForceLS').classList.toggle('on-cyan', showForceLS);
}
function toggleFlangeHL() {
  showFlangeHL = !showFlangeHL;
  const fg = document.getElementById('flangeGroup');
  fg.style.opacity = showFlangeHL ? '1' : '0.3';
  document.getElementById('btnFlange').classList.toggle('on-green', showFlangeHL);
}
function toggleTorque() {
  showTorque = !showTorque;
  const ti = document.getElementById('torqueIndicator');
  ti.setAttribute('opacity', showTorque ? '1' : '0');
  document.getElementById('btnTorque').classList.toggle('on-red', showTorque);
}

/* 速度滑块 */
document.getElementById('speedSlider').addEventListener('input', function() {
  rotSpeed = parseInt(this.value);
  document.getElementById('speedVal').textContent = rotSpeed;
});

/* ===== 初始化 ===== */
createParticles();
lastTime = 0;
animId = requestAnimationFrame(animate);

/* ===== 力路径辅助线（虚线） ===== */
(function drawForceLines() {
  const svg = document.getElementById('forceParticles');
  const paths = [
    { pts: forcePathHS_Left,  color: '#ff9100', id: 'flHS_L' },
    { pts: forcePathHS_Right, color: '#ff9100', id: 'flHS_R' },
    { pts: forcePathLS_Left,  color: '#00e5ff', id: 'flLS_L' },
    { pts: forcePathLS_Right, color: '#00e5ff', id: 'flLS_R' },
  ];
  paths.forEach(cfg => {
    const d = cfg.pts.map((p,i) => (i===0?'M':'L') + p.x + ',' + p.y).join(' ');
    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttribute('d', d);
    path.setAttribute('fill', 'none');
    path.setAttribute('stroke', cfg.color);
    path.setAttribute('stroke-width', '1.5');
    path.setAttribute('stroke-dasharray', '6,4');
    path.setAttribute('opacity', '0.25');
    path.id = cfg.id;
    svg.insertBefore(path, svg.firstChild);
  });
})();

/* ===== 力路径方向箭头 ===== */
(function drawForceArrows() {
  const svg = document.getElementById('forceParticles');
  // 立柱上的向下箭头（琥珀色）
  [[260, 450], [640, 450]].forEach(([cx, cy]) => {
    const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    arrow.setAttribute('d', `M${cx-6},${cy-8} L${cx},${cy} L${cx+6},${cy-8}`);
    arrow.setAttribute('fill', 'none');
    arrow.setAttribute('stroke', '#ff9100');
    arrow.setAttribute('stroke-width', '1.5');
    arrow.setAttribute('opacity', '0.4');
    svg.appendChild(arrow);
  });
  // 侧耳上的向下箭头（青色）
  [[262, 570], [638, 570]].forEach(([cx, cy]) => {
    const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    arrow.setAttribute('d', `M${cx-6},${cy-8} L${cx},${cy} L${cx+6},${cy-8}`);
    arrow.setAttribute('fill', 'none');
    arrow.setAttribute('stroke', '#00e5ff');
    arrow.setAttribute('stroke-width', '1.5');
    arrow.setAttribute('opacity', '0.4');
    svg.appendChild(arrow);
  });
  // 法兰中心向下箭头（绿色）
  const arrowG = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  arrowG.setAttribute('d', 'M444,690 L450,700 L456,690');
  arrowG.setAttribute('fill', 'none');
  arrowG.setAttribute('stroke', '#00e676');
  arrowG.setAttribute('stroke-width', '2');
  arrowG.setAttribute('opacity', '0.5');
  svg.appendChild(arrowG);
})();

/* ===== 法兰脉动高亮环 ===== */
(function addFlangePulse() {
  const svg = document.getElementById('flangeGroup');
  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  rect.setAttribute('x', '225');
  rect.setAttribute('y', '635');
  rect.setAttribute('width', '450');
  rect.setAttribute('height', '48');
  rect.setAttribute('rx', '6');
  rect.setAttribute('fill', 'none');
  rect.setAttribute('stroke', '#00e676');
  rect.setAttribute('stroke-width', '2');
  rect.setAttribute('opacity', '0');
  svg.appendChild(rect);

  let phase = 0;
  function pulse() {
    phase += 0.03;
    const op = 0.15 + 0.15 * Math.sin(phase);
    rect.setAttribute('opacity', op.toFixed(3));
    requestAnimationFrame(pulse);
  }
  pulse();
})();
</script>
</body>
</html>

实现说明

本动画聚焦于 IFR（最终理想解）状态，直接呈现"问题已被消除"的理想工作原理，不做前后对比：

  1. 核心创新点可视化：承载连接法兰以绿色渐变 + 脉动光晕突出显示，焊接符号标明其与釜盖的永久连接关系，35mm 厚度标注强化关键参数。

  2. 双路独立力路径：琥珀色粒子流沿高速减速机 → 4根∅40立柱 → 法兰 → 釜盖流动；青色粒子流沿低速减速机 → 左右侧耳 → 法兰 → 釜盖流动。两条路径在法兰汇合但互不干涉，直观展示"完全解耦"的 IFR 本质。

  3. 轴系纯扭矩：∅35 实心轴（琥珀色）穿过 ∅60 空心轴（钢蓝色）向下延伸，两套独立密封分别以对应颜色标识并带呼吸动画。开启"纯扭矩标识"后可见两轴仅传递扭矩、不承受压弯载荷。

  4. 交互控制：

    • 转速滑块：实时调整双轴旋转速度比（高速轴 ≈ 3× 低速轴）
    • 力路径开关：独立切换两路力流可见性，便于专注观察单一路径
    • 法兰高亮：开关法兰脉动特效
    • 纯扭矩标识：显示/隐藏扭矩弧线标注

  5. 视觉设计：深色工程蓝图风格 + 网格背景，金属渐变质感还原机械零部件观感，SVG 滤镜实现绿色/琥珀/青色发光效果，所有标注采用中英双语技术术语。

积分规则：第一轮对话扣减6分，后续每轮扣4分