<!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 rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--bg: #060a12;
--fg: #dce3f0;
--muted: #4a5670;
--accent: #00e5ff;
--accent2: #ff6b35;
--card: #0c1220;
--border: #162035;
--ptfe: #d4c5a9;
--shaft: #8a9bb0;
--sleeve: #3d4a5c;
--fluid: #00e5ff;
--pressure: #ff6b35;
--bearing: #c9a84c;
}
*{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;
background-image:
radial-gradient(ellipse 80% 60% at 50% 30%, rgba(0,229,255,.04) 0%, transparent 70%),
radial-gradient(ellipse 60% 40% at 80% 70%, rgba(255,107,53,.03) 0%, transparent 70%);
}
header{
width:100%;max-width:1300px;
padding:28px 32px 10px;
display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
}
header h1{
font-family:'Rajdhani',sans-serif;
font-weight:700;font-size:28px;letter-spacing:1px;
color:#fff;
}
header h1 span{color:var(--accent)}
header p{
font-size:13px;color:var(--muted);letter-spacing:.5px;
}
.viz-wrapper{
width:100%;max-width:1300px;
padding:0 20px;
}
svg#mainSvg{
width:100%;height:auto;
border-radius:14px;
background:linear-gradient(170deg,#080e1a 0%,#0a1020 50%,#0c0e18 100%);
box-shadow:0 0 60px rgba(0,229,255,.06),0 2px 20px rgba(0,0,0,.5);
border:1px solid var(--border);
}
.control-panel{
width:100%;max-width:1300px;
padding:18px 20px 32px;
display:flex;flex-wrap:wrap;gap:16px;align-items:stretch;
}
.ctrl-card{
background:var(--card);
border:1px solid var(--border);
border-radius:10px;
padding:16px 20px;
flex:1;min-width:240px;
}
.ctrl-card h3{
font-family:'Rajdhani',sans-serif;
font-size:14px;font-weight:500;
color:var(--muted);letter-spacing:1px;
text-transform:uppercase;
margin-bottom:10px;
}
.ctrl-card .value-display{
font-family:'Rajdhani',sans-serif;
font-size:36px;font-weight:700;
color:#fff;line-height:1;
margin-bottom:6px;
}
.ctrl-card .value-display .unit{font-size:16px;color:var(--muted);font-weight:300;margin-left:4px}
.ctrl-card .value-display.accent-cyan{color:var(--accent)}
.ctrl-card .value-display.accent-amber{color:var(--accent2)}
input[type=range]{
-webkit-appearance:none;width:100%;height:6px;
background:var(--border);border-radius:3px;outline:none;
margin-top:8px;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;width:18px;height:18px;
border-radius:50%;background:var(--accent);cursor:pointer;
box-shadow:0 0 10px rgba(0,229,255,.5);
}
input[type=range].amber::-webkit-slider-thumb{
background:var(--accent2);
box-shadow:0 0 10px rgba(255,107,53,.5);
}
.mode-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mode-btn{
font-family:'Rajdhani',sans-serif;
font-size:13px;font-weight:500;
padding:8px 16px;border-radius:6px;
border:1px solid var(--border);
background:transparent;color:var(--muted);
cursor:pointer;transition:all .25s;letter-spacing:.5px;
}
.mode-btn:hover{border-color:var(--accent);color:var(--fg)}
.mode-btn.active{
background:rgba(0,229,255,.12);
border-color:var(--accent);color:var(--accent);
box-shadow:0 0 12px rgba(0,229,255,.15);
}
.mode-btn.active.amber{
background:rgba(255,107,53,.12);
border-color:var(--accent2);color:var(--accent2);
box-shadow:0 0 12px rgba(255,107,53,.15);
}
.status-bar{
display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;
}
.status-item{
display:flex;align-items:center;gap:6px;
font-size:12px;color:var(--muted);
}
.status-dot{
width:8px;height:8px;border-radius:50%;
background:var(--muted);
transition:all .4s;
}
.status-dot.on-cyan{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.status-dot.on-amber{background:var(--accent2);box-shadow:0 0 8px var(--accent2)}
.status-dot.on-red{background:#ff4444;box-shadow:0 0 8px #ff4444}
@keyframes pulse-glow{
0%,100%{opacity:.6}
50%{opacity:1}
}
@media(max-width:700px){
header{padding:18px 16px 6px}
header h1{font-size:20px}
.ctrl-card{min-width:100%}
}
</style>
</head>
<body>
<header>
<h1>自润滑浮动导流支撑套 <span>· IFR</span></h1>
<p>最终理想解 · 流固耦合自适应支撑原理演示</p>
</header>
<div class="viz-wrapper">
<svg id="mainSvg" viewBox="0 0 1200 660" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 金属渐变 - 轴 -->
<linearGradient id="shaftGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#7a8da3"/><stop offset="25%" stop-color="#9fb5cc"/>
<stop offset="50%" stop-color="#b5cee3"/><stop offset="75%" stop-color="#9fb5cc"/>
<stop offset="100%" stop-color="#6a7d93"/>
</linearGradient>
<!-- 外轴套渐变 -->
<linearGradient id="sleeveGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#3a4758"/><stop offset="40%" stop-color="#4d5d72"/>
<stop offset="60%" stop-color="#4d5d72"/><stop offset="100%" stop-color="#2e3a4a"/>
</linearGradient>
<!-- PTFE渐变 -->
<linearGradient id="ptfeGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#c8b898"/><stop offset="30%" stop-color="#d8caad"/>
<stop offset="70%" stop-color="#d8caad"/><stop offset="100%" stop-color="#b8a888"/>
</linearGradient>
<linearGradient id="ptfeGradB" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#b8a888"/><stop offset="30%" stop-color="#d0c0a0"/>
<stop offset="70%" stop-color="#d0c0a0"/><stop offset="100%" stop-color="#c8b898"/>
</linearGradient>
<!-- 轴承渐变 -->
<linearGradient id="bearingGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#8a7530"/><stop offset="50%" stop-color="#c9a84c"/>
<stop offset="100%" stop-color="#8a7530"/>
</linearGradient>
<!-- 流体发光 -->
<filter id="fluidGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="strongGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/>
<feComposite in="blur" operator="over"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<!-- 螺旋槽纹样 -->
<pattern id="groovePatTop" x="0" y="0" width="48" height="40" patternUnits="userSpaceOnUse" patternTransform="rotate(-35)">
<rect width="48" height="40" fill="none"/>
<line x1="0" y1="10" x2="48" y2="10" stroke="#a89870" stroke-width="1.5" opacity="0.5"/>
<line x1="0" y1="30" x2="48" y2="30" stroke="#a89870" stroke-width="1.5" opacity="0.5"/>
</pattern>
<pattern id="groovePatBot" x="0" y="0" width="48" height="40" patternUnits="userSpaceOnUse" patternTransform="rotate(35)">
<rect width="48" height="40" fill="none"/>
<line x1="0" y1="10" x2="48" y2="10" stroke="#a89870" stroke-width="1.5" opacity="0.5"/>
<line x1="0" y1="30" x2="48" y2="30" stroke="#a89870" stroke-width="1.5" opacity="0.5"/>
</pattern>
<!-- 网格背景 -->
<pattern id="gridPat" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#111a2a" stroke-width="0.5"/>
</pattern>
<!-- 压力渐变 -->
<linearGradient id="pressureGradH" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="rgba(255,107,53,0)" />
<stop offset="40%" stop-color="rgba(255,107,53,0.5)" />
<stop offset="60%" stop-color="rgba(255,107,53,0.5)" />
<stop offset="100%" stop-color="rgba(255,107,53,0)" />
</linearGradient>
</defs>
<!-- 背景网格 -->
<rect width="1200" height="660" fill="url(#gridPat)" opacity="0.5"/>
<!-- ==================== 纵向剖面图 ==================== -->
<g id="longSection">
<!-- 外轴套 60mm -->
<rect x="80" y="188" width="700" height="22" rx="2" fill="url(#sleeveGrad)" stroke="#2a3545" stroke-width="1"/>
<rect x="80" y="378" width="700" height="22" rx="2" fill="url(#sleeveGrad)" stroke="#2a3545" stroke-width="1"/>
<!-- 外轴套端面 -->
<rect x="60" y="188" width="20" height="212" rx="2" fill="#3a4758" stroke="#2a3545" stroke-width="1"/>
<!-- 外轴套标注 -->
<text x="50" y="300" fill="#5a6a80" font-family="Rajdhani,sans-serif" font-size="11" text-anchor="end" transform="rotate(-90,50,300)">60mm 外轴套</text>
<!-- PTFE支撑套 - 上 -->
<g id="ptfeTop">
<rect x="100" y="210" width="660" height="42" rx="1" fill="url(#ptfeGrad)" opacity="0.85"/>
<rect x="100" y="240" width="660" height="12" fill="url(#groovePatTop)" opacity="0.7"/>
<!-- PTFE固体接触发光层 -->
<rect id="ptfeContactTop" x="100" y="248" width="660" height="4" rx="1" fill="#ffe0a0" opacity="0"/>
</g>
<!-- PTFE支撑套 - 下 -->
<g id="ptfeBot">
<rect x="100" y="336" width="660" height="42" rx="1" fill="url(#ptfeGradB)" opacity="0.85"/>
<rect x="100" y="336" width="660" height="12" fill="url(#groovePatBot)" opacity="0.7"/>
<rect id="ptfeContactBot" x="100" y="332" width="660" height="4" rx="1" fill="#ffe0a0" opacity="0"/>
</g>
<!-- PTFE标注 -->
<line x1="95" y1="225" x2="95" y2="255" stroke="#8a7a5a" stroke-width="0.8"/>
<text x="88" y="244" fill="#a89870" font-family="Rajdhani,sans-serif" font-size="9" text-anchor="end">PTFE</text>
<!-- 流体动压间隙 - 上 -->
<rect id="fluidGapTop" x="100" y="252" width="660" height="14" rx="1" fill="rgba(0,229,255,0.0)"/>
<!-- 流体动压间隙 - 下 -->
<rect id="fluidGapBot" x="100" y="332" width="660" height="14" rx="1" fill="rgba(0,229,255,0.0)"/>
<!-- 压力分布可视化 -->
<rect id="pressureZoneTop" x="100" y="252" width="660" height="14" rx="1" fill="url(#pressureGradH)" opacity="0"/>
<rect id="pressureZoneBot" x="100" y="332" width="660" height="14" rx="1" fill="url(#pressureGradH)" opacity="0"/>
<!-- 35mm内轴 -->
<g id="shaftGroup">
<rect id="shaftBody" x="60" y="266" width="740" height="66" rx="3" fill="url(#shaftGrad)" stroke="#5a6d82" stroke-width="1"/>
<!-- 轴上旋转指示线 -->
<g id="shaftLines" opacity="0.3">
<line x1="120" y1="268" x2="120" y2="330" stroke="#5a7a9a" stroke-width="0.6" stroke-dasharray="4,8"/>
<line x1="200" y1="268" x2="200" y2="330" stroke="#5a7a9a" stroke-width="0.6" stroke-dasharray="4,8"/>
<line x1="280" y1="268" x2="280" y2="330" stroke="#5a7a9a" stroke-width="0.6" stroke-dasharray="4,8"/>
<line x1="360" y1="268" x2="360" y2="330" stroke="#5a7a9a" stroke-width="0.6" stroke-dasharray="4,8"/>
<line x1="440" y1="268" x2="440" y2="330" stroke="#5a7a9a" stroke-width="0.6" stroke-dasharray="4,8"/>
<line x1="520" y1="268" x2="520" y2="330" stroke="#5a7a9a" stroke-width="0.6" stroke-dasharray="4,8"/>
<line x1="600" y1="268" x2="600" y2="330" stroke="#5a7a9a" stroke-width="0.6" stroke-dasharray="4,8"/>
<line x1="680" y1="268" x2="680" y2="330" stroke="#5a7a9a" stroke-width="0.6" stroke-dasharray="4,8"/>
</g>
<!-- 轴标注 -->
<text x="430" y="303" fill="#4a6080" font-family="Rajdhani,sans-serif" font-size="13" text-anchor="middle" font-weight="500" letter-spacing="3">35mm 实心轴</text>
</g>
<!-- 调心滚针轴承组 -->
<g id="bearingGroup">
<!-- 轴承外壳 -->
<rect x="738" y="196" width="52" height="196" rx="4" fill="#1a2030" stroke="#2a3a50" stroke-width="1.5"/>
<!-- 轴承外圈 -->
<rect x="744" y="202" width="40" height="184" rx="3" fill="url(#bearingGrad)" opacity="0.7" stroke="#aa8830" stroke-width="0.8"/>
<!-- 滚针 - 上 -->
<g id="needleTop">
<rect x="750" y="220" width="28" height="6" rx="3" fill="#e0c860" stroke="#aa8830" stroke-width="0.5"/>
<rect x="750" y="234" width="28" height="6" rx="3" fill="#e0c860" stroke="#aa8830" stroke-width="0.5"/>
<rect x="750" y="248" width="28" height="6" rx="3" fill="#e0c860" stroke="#aa8830" stroke-width="0.5"/>
</g>
<!-- 滚针 - 下 -->
<g id="needleBot">
<rect x="750" y="340" width="28" height="6" rx="3" fill="#e0c860" stroke="#aa8830" stroke-width="0.5"/>
<rect x="750" y="354" width="28" height="6" rx="3" fill="#e0c860" stroke="#aa8830" stroke-width="0.5"/>
<rect x="750" y="368" width="28" height="6" rx="3" fill="#e0c860" stroke="#aa8830" stroke-width="0.5"/>
</g>
<!-- 调心角度标注弧 -->
<path id="alignArc" d="" fill="none" stroke="var(--accent2)" stroke-width="1.2" opacity="0"/>
<text id="alignLabel" x="790" y="415" fill="var(--accent2)" font-family="Rajdhani,sans-serif" font-size="10" text-anchor="middle" opacity="0">±1.5°</text>
</g>
<!-- 搅拌桨示意 -->
<g id="paddleGroup">
<line x1="790" y1="299" x2="840" y2="299" stroke="#6a7d93" stroke-width="4"/>
<line x1="830" y1="260" x2="830" y2="338" stroke="#6a7d93" stroke-width="5" stroke-linecap="round"/>
<line x1="830" y1="260" x2="855" y2="250" stroke="#6a7d93" stroke-width="4" stroke-linecap="round"/>
<line x1="830" y1="338" x2="855" y2="348" stroke="#6a7d93" stroke-width="4" stroke-linecap="round"/>
<text x="860" y="303" fill="#5a6a80" font-family="Rajdhani,sans-serif" font-size="10">搅拌桨</text>
</g>
<!-- 驱动端标注 -->
<g id="driveEnd">
<polygon points="50,295 60,285 60,305" fill="#4a5a70"/>
<text x="42" y="320" fill="#5a6a80" font-family="Rajdhani,sans-serif" font-size="10" text-anchor="middle">驱动端</text>
</g>
<!-- 螺旋导流槽标注 -->
<g id="grooveAnnotation" opacity="0.9">
<line x1="350" y1="240" x2="350" y2="155" stroke="#00e5ff" stroke-width="0.8" stroke-dasharray="3,3"/>
<circle cx="350" cy="152" r="2" fill="#00e5ff"/>
<rect x="270" y="130" width="160" height="24" rx="4" fill="rgba(0,229,255,0.08)" stroke="rgba(0,229,255,0.25)" stroke-width="0.8"/>
<text x="350" y="146" fill="#00e5ff" font-family="Rajdhani,sans-serif" font-size="11" text-anchor="middle" font-weight="500">螺旋导流槽 导程150mm</text>
</g>
<!-- IFR标注：已有资源 -->
<g id="ifrAnnotation" opacity="0.85">
<rect x="420" y="74" width="260" height="40" rx="6" fill="rgba(0,229,255,0.05)" stroke="rgba(0,229,255,0.2)" stroke-width="1"/>
<text x="550" y="92" fill="#00e5ff" font-family="Rajdhani,sans-serif" font-size="12" text-anchor="middle" font-weight="500">IFR：利用已有资源</text>
<text x="550" y="106" fill="#5a8aa0" font-family="Noto Sans SC,sans-serif" font-size="10" text-anchor="middle">旋转动力 + 残留流体 → 自适应支撑</text>
<line x1="550" y1="114" x2="550" y2="130" stroke="rgba(0,229,255,0.3)" stroke-width="0.8"/>
<line x1="550" y1="130" x2="430" y2="210" stroke="rgba(0,229,255,0.2)" stroke-width="0.8" stroke-dasharray="4,4"/>
<line x1="550" y1="130" x2="670" y2="350" stroke="rgba(0,229,255,0.2)" stroke-width="0.8" stroke-dasharray="4,4"/>
</g>
<!-- 流体粒子容器 -->
<g id="particleContainer"></g>
<!-- 流向箭头 -->
<g id="flowArrows" opacity="0">
<polygon points="180,258 195,254 195,262" fill="#00e5ff" opacity="0.7"/>
<polygon points="350,258 365,254 365,262" fill="#00e5ff" opacity="0.7"/>
<polygon points="520,258 535,254 535,262" fill="#00e5ff" opacity="0.7"/>
<polygon points="180,340 195,336 195,344" fill="#00e5ff" opacity="0.7"/>
<polygon points="350,340 365,336 365,344" fill="#00e5ff" opacity="0.7"/>
<polygon points="520,340 535,336 535,344" fill="#00e5ff" opacity="0.7"/>
</g>
<!-- 动压托举力箭头 -->
<g id="liftArrows" opacity="0">
<line x1="300" y1="330" x2="300" y2="320" stroke="#00e5ff" stroke-width="2" marker-end="url(#arrowCyan)"/>
<line x1="430" y1="330" x2="430" y2="318" stroke="#00e5ff" stroke-width="2" marker-end="url(#arrowCyan)"/>
<line x1="560" y1="330" x2="560" y2="320" stroke="#00e5ff" stroke-width="2" marker-end="url(#arrowCyan)"/>
</g>
<defs>
<marker id="arrowCyan" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
<polygon points="0,0 8,3 0,6" fill="#00e5ff"/>
</marker>
</defs>
<!-- 旋转方向标记 -->
<g id="rotationIndicator" opacity="0.5">
<path d="M 68,280 A 20,20 0 0 1 68,318" fill="none" stroke="#5a8aaa" stroke-width="1.5"/>
<polygon points="68,318 63,310 73,310" fill="#5a8aaa"/>
<text x="56" y="342" fill="#5a8aaa" font-family="Rajdhani,sans-serif" font-size="9">n</text>
</g>
</g>
<!-- ==================== 横截面图 ==================== -->
<g id="crossSection" transform="translate(1020,210)">
<text x="0" y="-100" fill="#5a6a80" font-family="Rajdhani,sans-serif" font-size="13" text-anchor="middle" font-weight="500" letter-spacing="1">横截面 A-A</text>
<line x1="-80" y1="-92" x2="80" y2="-92" stroke="#2a3a50" stroke-width="0.5" stroke-dasharray="4,4"/>
<!-- 外轴套圆 -->
<circle cx="0" cy="0" r="88" fill="none" stroke="#4d5d72" stroke-width="14" opacity="0.7"/>
<!-- PTFE环 -->
<circle cx="0" cy="0" r="72" fill="none" stroke="#c8b898" stroke-width="22" opacity="0.6"/>
<!-- 螺旋槽标记 -->
<g id="crossGrooves" opacity="0.5">
<line x1="-52" y1="-38" x2="-30" y2="-52" stroke="#a09070" stroke-width="2"/>
<line x1="30" y1="-52" x2="52" y2="-38" stroke="#a09070" stroke-width="2"/>
<line x1="52" y1="38" x2="30" y2="52" stroke="#a09070" stroke-width="2"/>
<line x1="-30" y1="52" x2="-52" y2="38" stroke="#a09070" stroke-width="2"/>
<line x1="-58" y1="0" x2="-48" y2="-14" stroke="#a09070" stroke-width="2"/>
<line x1="58" y1="0" x2="48" y2="14" stroke="#a09070" stroke-width="2"/>
<line x1="0" y1="-58" x2="-14" y2="-48" stroke="#a09070" stroke-width="2"/>
<line x1="0" y1="58" x2="14" y2="48" stroke="#a09070" stroke-width="2"/>
</g>
<!-- 流体间隙环 -->
<circle id="fluidRing" cx="0" cy="0" r="48" fill="none" stroke="rgba(0,229,255,0)" stroke-width="6"/>
<!-- 内轴 -->
<circle id="crossShaft" cx="0" cy="0" r="40" fill="url(#shaftGrad)" stroke="#5a6d82" stroke-width="1.5"/>
<!-- 轴上十字 -->
<g id="crossShaftMark">
<line x1="-30" y1="0" x2="30" y2="0" stroke="#6a8aaa" stroke-width="1" opacity="0.4"/>
<line x1="0" y1="-30" x2="0" y2="30" stroke="#6a8aaa" stroke-width="1" opacity="0.4"/>
</g>
<!-- 标注 -->
<text x="0" y="5" fill="#4a6080" font-family="Rajdhani,sans-serif" font-size="11" text-anchor="middle" font-weight="500">35mm</text>
<line x1="42" y1="-30" x2="60" y2="-55" stroke="#5a6a80" stroke-width="0.6"/>
<text x="62" y="-58" fill="#5a6a80" font-family="Rajdhani,sans-serif" font-size="9">60mm</text>
<!-- 动压偏心指示 -->
<g id="eccentricIndicator" opacity="0">
<circle cx="0" cy="0" r="48" fill="none" stroke="rgba(0,229,255,0.3)" stroke-width="1" stroke-dasharray="3,3"/>
<line x1="0" y1="48" x2="0" y2="60" stroke="#00e5ff" stroke-width="1.5" marker-end="url(#arrowCyan)"/>
<text x="8" y="70" fill="#00e5ff" font-family="Rajdhani,sans-serif" font-size="9">动压托举</text>
</g>
</g>
<!-- ==================== 状态信息面板 ==================== -->
<g id="infoPanel" transform="translate(920,380)">
<rect x="0" y="0" width="250" height="240" rx="8" fill="rgba(12,18,32,0.9)" stroke="#162035" stroke-width="1"/>
<text x="125" y="24" fill="#5a6a80" font-family="Rajdhani,sans-serif" font-size="11" text-anchor="middle" letter-spacing="2" font-weight="500">实时状态</text>
<line x1="20" y1="34" x2="230" y2="34" stroke="#162035" stroke-width="1"/>
<!-- 当前模式 -->
<text x="20" y="58" fill="#5a6a80" font-family="Noto Sans SC,sans-serif" font-size="11">支撑模式</text>
<text id="modeLabel" x="230" y="58" fill="#00e5ff" font-family="Rajdhani,sans-serif" font-size="12" text-anchor="end" font-weight="700">固体自润滑</text>
<!-- 转速 -->
<text x="20" y="84" fill="#5a6a80" font-family="Noto Sans SC,sans-serif" font-size="11">转速</text>
<text id="rpmLabel" x="230" y="84" fill="#fff" font-family="Rajdhani,sans-serif" font-size="13" text-anchor="end" font-weight="700">0 <tspan fill="#5a6a80" font-size="10">RPM</tspan></text>
<!-- 动压承载力 -->
<text x="20" y="110" fill="#5a6a80" font-family="Noto Sans SC,sans-serif" font-size="11">动压承载力</text>
<rect x="120" y="100" width="110" height="8" rx="4" fill="#162035"/>
<rect id="pressureBar" x="120" y="100" width="0" height="8" rx="4" fill="#00e5ff" opacity="0.8"/>
<!-- 间隙状态 -->
<text x="20" y="140" fill="#5a6a80" font-family="Noto Sans SC,sans-serif" font-size="11">轴-套间隙</text>
<text id="gapLabel" x="230" y="140" fill="#ffe0a0" font-family="Rajdhani,sans-serif" font-size="12" text-anchor="end" font-weight="500">接触</text>
<!-- 调心角度 -->
<text x="20" y="166" fill="#5a6a80" font-family="Noto Sans SC,sans-serif" font-size="11">调心偏转</text>
<text id="alignAngleLabel" x="230" y="166" fill="#5a6a80" font-family="Rajdhani,sans-serif" font-size="12" text-anchor="end" font-weight="500">0.0°</text>
<!-- 槽道状态 -->
<text x="20" y="192" fill="#5a6a80" font-family="Noto Sans SC,sans-serif" font-size="11">导流槽</text>
<text id="grooveStatusLabel" x="230" y="192" fill="#5a6a80" font-family="Rajdhani,sans-serif" font-size="12" text-anchor="end" font-weight="500">畅通</text>
<!-- IFR提示 -->
<rect x="12" y="208" width="226" height="24" rx="4" fill="rgba(0,229,255,0.06)" stroke="rgba(0,229,255,0.15)" stroke-width="0.8"/>
<text id="ifrTip" x="125" y="224" fill="#00e5ff" font-family="Noto Sans SC,sans-serif" font-size="10" text-anchor="middle" opacity="0.8">旋转即产生支撑 · 问题自我消除</text>
</g>
<!-- A-A剖面线 -->
<line x1="780" y1="180" x2="780" y2="410" stroke="#2a3a50" stroke-width="0.8" stroke-dasharray="6,4"/>
<text x="780" y="174" fill="#3a4a60" font-family="Rajdhani,sans-serif" font-size="10" text-anchor="middle">A-A</text>
</svg>
</div>
<!-- 控制面板 -->
<div class="control-panel">
<div class="ctrl-card" style="flex:2">
<h3>轴转速 RPM</h3>
<div class="value-display accent-cyan"><span id="rpmValue">0</span><span class="unit">RPM</span></div>
<input type="range" id="rpmSlider" min="0" max="3000" value="0" step="10">
<div style="display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:4px">
<span>0</span><span style="color:var(--accent)">500 流体轴承阈值</span><span>3000</span>
</div>
</div>
<div class="ctrl-card" style="flex:1.2">
<h3>工况模式</h3>
<div class="mode-btns">
<button class="mode-btn active" id="btnNormal" data-mode="normal">正常运行</button>
<button class="mode-btn amber" id="btnFlip" data-mode="flip">翻转出料</button>
<button class="mode-btn" id="btnHighVisc" data-mode="highvisc">高粘度</button>
</div>
<div class="status-bar" style="margin-top:12px">
<div class="status-item"><span class="status-dot" id="dotSolid"></span>固体润滑</div>
<div class="status-item"><span class="status-dot" id="dotFluid"></span>流体动压</div>
<div class="status-item"><span class="status-dot" id="dotAlign"></span>调心补偿</div>
</div>
</div>
<div class="ctrl-card" style="flex:1">
<h3>调心角度</h3>
<div class="value-display accent-amber"><span id="alignValue">0.0</span><span class="unit">deg</span></div>
<input type="range" class="amber" id="alignSlider" min="-1.5" max="1.5" value="0" step="0.1" disabled>
<div style="display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:4px">
<span>-1.5°</span><span>0°</span><span>+1.5°</span>
</div>
</div>
</div>
<script>
// ==================== 状态管理 ====================
const state = {
rpm: 0,
mode: 'normal', // 'normal' | 'flip' | 'highvisc'
alignAngle: 0, // 调心角度
targetAlignAngle: 0,
time: 0,
shaftOffset: 5, // 轴的偏心量（低转速下沉）
targetShaftOffset: 5,
fluidAlpha: 0, // 流体层透明度
targetFluidAlpha: 0,
pressureAlpha: 0, // 压力可视化透明度
contactAlpha: 0.6, // PTFE接触发光
targetContactAlpha: 0.6,
blocked: false, // 槽道是否堵塞
};
// ==================== DOM引用 ====================
const svg = document.getElementById('mainSvg');
const ns = 'http://www.w3.org/2000/svg';
const rpmSlider = document.getElementById('rpmSlider');
const alignSlider = document.getElementById('alignSlider');
const rpmValueEl = document.getElementById('rpmValue');
const alignValueEl = document.getElementById('alignValue');
const btnNormal = document.getElementById('btnNormal');
const btnFlip = document.getElementById('btnFlip');
const btnHighVisc = document.getElementById('btnHighVisc');
const shaftBody = document.getElementById('shaftBody');
const shaftGroup = document.getElementById('shaftGroup');
const shaftLines = document.getElementById('shaftLines');
const fluidGapTop = document.getElementById('fluidGapTop');
const fluidGapBot = document.getElementById('fluidGapBot');
const pressureZoneTop = document.getElementById('pressureZoneTop');
const pressureZoneBot = document.getElementById('pressureZoneBot');
const ptfeContactTop = document.getElementById('ptfeContactTop');
const ptfeContactBot = document.getElementById('ptfeContactBot');
const flowArrows = document.getElementById('flowArrows');
const liftArrows = document.getElementById('liftArrows');
const bearingGroup = document.getElementById('bearingGroup');
const alignArc = document.getElementById('alignArc');
const alignLabel = document.getElementById('alignLabel');
const fluidRing = document.getElementById('fluidRing');
const crossShaft = document.getElementById('crossShaft');
const crossShaftMark = document.getElementById('crossShaftMark');
const eccentricIndicator = document.getElementById('eccentricIndicator');
const particleContainer = document.getElementById('particleContainer');
// 信息面板
const modeLabel = document.getElementById('modeLabel');
const rpmLabel = document.getElementById('rpmLabel');
const pressureBar = document.getElementById('pressureBar');
const gapLabel = document.getElementById('gapLabel');
const alignAngleLabel = document.getElementById('alignAngleLabel');
const grooveStatusLabel = document.getElementById('grooveStatusLabel');
const ifrTip = document.getElementById('ifrTip');
const dotSolid = document.getElementById('dotSolid');
const dotFluid = document.getElementById('dotFluid');
const dotAlign = document.getElementById('dotAlign');
// ==================== 粒子系统 ====================
const particles = [];
const PARTICLE_COUNT = 60;
function createParticle(isTop) {
const x = 110 + Math.random() * 640;
const baseY = isTop ? 257 : 335;
const y = baseY + (Math.random() - 0.5) * 8;
return {
x, y, baseY,
isTop,
speed: 0.3 + Math.random() * 0.5,
size: 1.5 + Math.random() * 2,
alpha: 0.3 + Math.random() * 0.5,
phase: Math.random() * Math.PI * 2
};
}
// 初始化粒子
for (let i = 0; i < PARTICLE_COUNT; i++) {
particles.push(createParticle(i < PARTICLE_COUNT / 2));
}
// 创建粒子SVG元素
const particleEls = [];
particles.forEach((p, i) => {
const c = document.createElementNS(ns, 'circle');
c.setAttribute('r', p.size);
c.setAttribute('fill', '#00e5ff');
c.setAttribute('opacity', '0');
c.setAttribute('filter', 'url(#fluidGlow)');
particleContainer.appendChild(c);
particleEls.push(c);
});
// ==================== 交互逻辑 ====================
rpmSlider.addEventListener('input', function() {
state.rpm = parseInt(this.value);
rpmValueEl.textContent = state.rpm;
});
alignSlider.addEventListener('input', function() {
state.targetAlignAngle = parseFloat(this.value);
alignValueEl.textContent = state.targetAlignAngle.toFixed(1);
});
// 模式按钮
[btnNormal, btnFlip, btnHighVisc].forEach(btn => {
btn.addEventListener('click', function() {
const mode = this.dataset.mode;
state.mode = mode;
[btnNormal, btnFlip, btnHighVisc].forEach(b => b.classList.remove('active'));
this.classList.add('active');
if (mode === 'flip') {
alignSlider.disabled = false;
// 自动设置一个偏转角
state.targetAlignAngle = 1.2;
alignSlider.value = 1.2;
alignValueEl.textContent = '1.2';
} else {
alignSlider.disabled = (mode !== 'flip');
state.targetAlignAngle = 0;
alignSlider.value = 0;
alignValueEl.textContent = '0.0';
}
if (mode === 'highvisc') {
state.blocked = state.rpm > 800;
} else {
state.blocked = false;
}
});
});
// ==================== 动画循环 ====================
let lastTime = 0;
const FLUID_THRESHOLD = 500; // 流体轴承启动阈值RPM
function lerp(a, b, t) { return a + (b - a) * t; }
function animate(timestamp) {
const dt = Math.min((timestamp - lastTime) / 1000, 0.05);
lastTime = timestamp;
state.time += dt;
const rpm = state.rpm;
const isFluidBearing = rpm > FLUID_THRESHOLD && !state.blocked;
const fluidStrength = state.blocked ? 0 : Math.min(1, (rpm - FLUID_THRESHOLD) / 1000);
const rpmNorm = rpm / 3000;
// ---- 目标状态计算 ----
// 轴偏心：低转速下沉，高转速被托举
state.targetShaftOffset = isFluidBearing ? lerp(5, 0, fluidStrength) : 5;
// 流体层透明度
state.targetFluidAlpha = isFluidBearing ? lerp(0.15, 0.5, fluidStrength) : 0;
// PTFE接触发光
state.targetContactAlpha = isFluidBearing ? lerp(0.4, 0, fluidStrength) : 0.6;
// 压力可视化
state.pressureAlpha = isFluidBearing ? lerp(0, 0.7, fluidStrength) : 0;
// 高粘度堵塞判定
if (state.mode === 'highvisc' && rpm > 800) {
state.blocked = true;
} else if (state.mode !== 'highvisc') {
state.blocked = false;
}
// ---- 平滑插值 ----
const smoothT = 1 - Math.pow(0.03, dt);
state.shaftOffset = lerp(state.shaftOffset, state.targetShaftOffset, smoothT);
state.fluidAlpha = lerp(state.fluidAlpha, state.targetFluidAlpha, smoothT);
state.contactAlpha = lerp(state.contactAlpha, state.targetContactAlpha, smoothT);
state.alignAngle = lerp(state.alignAngle, state.targetAlignAngle, smoothT);
// ---- 更新轴位置（偏心） ----
const offsetY = state.shaftOffset;
shaftGroup.setAttribute('transform', `translate(0, ${offsetY})`);
// ---- 更新流体间隙层 ----
const fAlpha = state.fluidAlpha.toFixed(3);
fluidGapTop.setAttribute('fill', `rgba(0,229,255,${fAlpha})`);
fluidGapBot.setAttribute('fill', `rgba(0,229,255,${fAlpha})`);
// ---- 更新压力可视化 ----
const pAlpha = state.pressureAlpha.toFixed(3);
pressureZoneTop.setAttribute('opacity', pAlpha);
pressureZoneBot.setAttribute('opacity', pAlpha);
// ---- PTFE接触发光 ----
const cAlpha = state.contactAlpha.toFixed(3);
ptfeContactTop.setAttribute('opacity', cAlpha);
ptfeContactBot.setAttribute('opacity', cAlpha);
// ---- 流向箭头 ----
const arrowOpacity = isFluidBearing ? Math.min(1, fluidStrength * 1.5) : 0;
flowArrows.setAttribute('opacity', arrowOpacity.toFixed(3));
// ---- 动压托举力箭头 ----
liftArrows.setAttribute('opacity', isFluidBearing ? (fluidStrength * 0.8).toFixed(3) : '0');
// ---- 轴旋转线动画 ----
const rotSpeed = rpm * 0.36; // 度/秒 (视觉速度)
const linesShift = (state.time * rotSpeed * 0.02) % 80;
shaftLines.setAttribute('transform', `translate(${linesShift},0)`);
shaftLines.setAttribute('opacity', (0.15 + rpmNorm * 0.35).toFixed(3));
// ---- 轴承调心 ----
const alignDeg = state.alignAngle;
// 轴承壳体不转，内部组件微调 - 用滚针位置偏移表示
const needleShift = alignDeg * 8; // 像素偏移
document.getElementById('needleTop').setAttribute('transform', `translate(0, ${-needleShift})`);
document.getElementById('needleBot').setAttribute('transform', `translate(0, ${needleShift})`);
// 调心角度弧线
if (Math.abs(alignDeg) > 0.1) {
const arcR = 100;
const angRad = alignDeg * Math.PI / 180;
const x1 = 764 + arcR * Math.sin(-angRad);
const y1 = 299 - arcR * Math.cos(-angRad);
const x2 = 764 + arcR * Math.sin(angRad);
const y2 = 299 - arcR * Math.cos(angRad);
alignArc.setAttribute('d', `M ${x1},${y1} A ${arcR},${arcR} 0 0 1 ${x2},${y2}`);
alignArc.setAttribute('opacity', '0.8');
alignLabel.setAttribute('opacity', '0.9');
alignLabel.textContent = `${alignDeg > 0 ? '+' : ''}${alignDeg.toFixed(1)}°`;
} else {
alignArc.setAttribute('opacity', '0');
alignLabel.setAttribute('opacity', '0');
}
// ---- 横截面更新 ----
// 流体环
const ringAlpha = state.fluidAlpha * 1.5;
fluidRing.setAttribute('stroke', `rgba(0,229,255,${Math.min(1, ringAlpha).toFixed(3)})`);
// 轴偏心（横截面中轴心下移）
crossShaft.setAttribute('cy', offsetY * 0.6);
crossShaftMark.setAttribute('transform', `translate(0, ${offsetY * 0.6})`);
// 横截面旋转
const crossRot = (state.time * rotSpeed * 0.1) % 360;
crossShaftMark.setAttribute('transform', `translate(0, ${offsetY * 0.6}) rotate(${crossRot})`);
// 偏心指示
eccentricIndicator.setAttribute('opacity', isFluidBearing ? '0.8' : '0');
eccentricIndicator.setAttribute('transform', `translate(0, ${offsetY * 0.6})`);
// ---- 粒子动画 ----
const particleVisible = isFluidBearing || rpm > 200;
particles.forEach((p, i) => {
// 更新位置
if (particleVisible && !state.blocked) {
const speedMult = rpm / 1500;
p.x += p.speed * speedMult * 60 * dt;
// 螺旋运动：上下微动
const spiralY = Math.sin(p.x * 0.05 + p.phase) * 3;
// 环绕重置
if (p.x > 750) {
p.x = 110;
}
const drawY = p.baseY + spiralY + (p.isTop ? -offsetY * 0.3 : offsetY * 0.3);
particleEls[i].setAttribute('cx', p.x.toFixed(1));
particleEls[i].setAttribute('cy', drawY.toFixed(1));
particleEls[i].setAttribute('opacity', (p.alpha * fluidStrength * 1.2).toFixed(3));
} else if (state.blocked) {
// 堵塞状态：粒子变红，静止
particleEls[i].setAttribute('fill', '#ff4444');
particleEls[i].setAttribute('opacity', (0.3 + Math.sin(state.time * 2 + i) * 0.15).toFixed(3));
} else {
particleEls[i].setAttribute('opacity', '0');
}
if (!state.blocked) {
particleEls[i].setAttribute('fill', '#00e5ff');
}
});
// ---- 信息面板更新 ----
if (state.blocked) {
modeLabel.textContent = '槽道堵塞';
modeLabel.setAttribute('fill', '#ff4444');
gapLabel.textContent = '干摩擦';
gapLabel.setAttribute('fill', '#ff4444');
grooveStatusLabel.textContent = '堵塞';
grooveStatusLabel.setAttribute('fill', '#ff4444');
ifrTip.textContent = '高粘度导致失效 · 超出适用边界';
ifrTip.setAttribute('fill', '#ff4444');
} else if (isFluidBearing) {
modeLabel.textContent = '流体动压支撑';
modeLabel.setAttribute('fill', '#00e5ff');
gapLabel.textContent = `${(fluidStrength * 12.5).toFixed(1)}μm 液膜`;
gapLabel.setAttribute('fill', '#00e5ff');
grooveStatusLabel.textContent = '畅通';
grooveStatusLabel.setAttribute('fill', '#00e5ff');
ifrTip.textContent = '旋转即产生支撑 · 问题自我消除';
ifrTip.setAttribute('fill', '#00e5ff');
} else {
modeLabel.textContent = '固体自润滑';
modeLabel.setAttribute('fill', '#ffe0a0');
gapLabel.textContent = '接触';
gapLabel.setAttribute('fill', '#ffe0a0');
grooveStatusLabel.textContent = '畅通';
grooveStatusLabel.setAttribute('fill', '#5a8a5a');
ifrTip.textContent = '低速启动 · PTFE固体润滑保护';
ifrTip.setAttribute('fill', '#ffe0a0');
}
rpmLabel.innerHTML = `${rpm} <tspan fill="#5a6a80" font-size="10">RPM</tspan>`;
// 压力条
const barW = Math.min(110, fluidStrength * 110);
pressureBar.setAttribute('width', barW.toFixed(1));
pressureBar.setAttribute('fill', state.blocked ? '#ff4444' : '#00e5ff');
alignAngleLabel.textContent = `${state.alignAngle.toFixed(1)}°`;
alignAngleLabel.setAttribute('fill', Math.abs(state.alignAngle) > 0.3 ? '#ff6b35' : '#5a6a80');
// 状态指示灯
dotSolid.className = 'status-dot' + (!isFluidBearing && !state.blocked ? ' on-amber' : '');
dotFluid.className = 'status-dot' + (isFluidBearing ? ' on-cyan' : '');
dotAlign.className = 'status-dot' + (Math.abs(state.alignAngle) > 0.3 ? ' on-amber' : '');
// ---- PTFE螺旋槽纹样动态 ----
const grooveFlowOffset = (state.time * rpm * 0.005) % 48;
document.getElementById('groovePatTop').setAttribute('patternTransform', `rotate(-35) translate(${grooveFlowOffset},0)`);
document.getElementById('groovePatBot').setAttribute('patternTransform', `rotate(35) translate(${-grooveFlowOffset},0)`);
requestAnimationFrame(animate);
}
// 启动动画
requestAnimationFrame(animate);
</script>
</body>
</html>
实现说明
设计理念与 IFR 体现
本动画严格遵循 TRIZ「最终理想解」思想，直接展示问题被消除后的理想运作状态，不做前后对比：
资源利用可视化：右上角 IFR 标注明确指出——"旋转动力 + 残留流体 → 自适应支撑"。螺旋槽将已有的旋转和已有的残留流体两个存量资源，转化为动压托举力，无需外加能源或复杂机构。
问题自我消除：当转速超过 500 RPM 阈值，轴自然从 PTFE 表面"浮起"（轴心下移量渐变为零），流体层发光明亮，刚体摩擦消失——矛盾被系统自身运作所化解。
视觉引导：
- 青色（#00e5ff）：流体动压效应——间隙层、粒子流、托举力箭头、横截面流体环
- 暖黄（#ffe0a0）：固体自润滑接触——PTFE 接触发光层
- 琥珀（#ff6b35）：调心补偿与压力分布
- 红色（#ff4444）：失效警告——高粘度堵塞状态
三段式工况协同
| 阶段 | RPM 范围 | 视觉表现 |
|---|---|---|
| 启动期 | 0–500 | PTFE 接触发光，轴下沉偏心，粒子隐匿 |
| 运行期 | 500–3000 | 流体层亮起，轴上浮归心，粒子沿螺旋槽流动，压力条渐满 |
| 翻转出料 | 任意 | 调心轴承偏转，滚针位移，角度弧线标注 |
交互设计
- 转速滑块：实时控制 0–3000 RPM，驱动所有视觉状态的连续过渡
- 工况模式按钮：正常运行 / 翻转出料（解锁调心角度滑块）/ 高粘度（演示失效边界）
- 调心角度滑块：翻转出料模式下可手动调节 ±1.5°，观察轴承自适应响应
- 右侧信息面板：实时显示支撑模式、动压承载力、间隙状态、调心偏转、槽道畅通度
关键技术细节
- 轴的偏心量（
shaftOffset）通过lerp平滑插值，模拟从重力下沉到流体托举的物理过渡 - 粒子系统 60 个粒子沿螺旋路径运动，Y 方向正弦微动模拟螺旋槽内的三维流动
- PTFE 螺旋槽纹样（
<pattern>）随转速平移，产生槽道内流体流动的视觉暗示 - 横截面视图同步显示轴的偏心归位与流体环的生成，配合旋转标记表达动态
积分规则：第一轮对话扣减6分，后续每轮扣4分
等待动画代码生成...