独立渲染引擎就绪引擎就绪
<!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-dark: #070a10;
--panel-bg: rgba(13, 19, 33, 0.78);
--panel-border: rgba(56, 189, 248, 0.2);
--cyan-glow: #00f0ff;
--cyan-dim: #0284c7;
--purple-vac: #c084fc;
--purple-glow: #a855f7;
--amber-act: #f59e0b;
--emerald-flow: #10b981;
--text-main: #f1f5f9;
--text-muted: #94a3b8;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
user-select: none;
}
body {
background-color: var(--bg-dark);
color: var(--text-main);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
overflow: hidden;
position: relative;
}
/* 工业暗色背景网格与光晕 */
.bg-grid {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 50% 38%, rgba(0, 240, 255, 0.08) 0%, transparent 60%),
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 100% 100%, 32px 32px, 32px 32px;
pointer-events: none;
z-index: 0;
}
/* 顶栏紧凑信息 */
header {
width: 100%;
max-width: 1380px;
padding: 12px 24px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: linear-gradient(180deg, rgba(7, 10, 16, 0.9) 0%, transparent 100%);
}
.brand-box {
display: flex;
align-items: center;
gap: 12px;
}
.brand-tag {
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
padding: 3px 8px;
border-radius: 4px;
background: rgba(0, 240, 255, 0.12);
color: var(--cyan-glow);
border: 1px solid rgba(0, 240, 255, 0.3);
}
h1 {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
color: #fff;
}
.status-pill {
font-size: 12px;
font-family: "JetBrains Mono", Consolas, monospace;
padding: 4px 12px;
border-radius: 20px;
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #34d399;
display: flex;
align-items: center;
gap: 6px;
}
.status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #34d399;
box-shadow: 0 0 8px #34d399;
animation: blink 1.2s infinite ease-in-out;
}
@keyframes blink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
/* 核心动画工作区：占据最大无遮挡空间 */
main {
position: relative;
flex: 1;
width: 100%;
max-width: 1380px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
padding: 8px 16px;
}
.stage-container {
position: relative;
width: 100%;
height: 100%;
max-height: 640px;
display: flex;
align-items: center;
justify-content: center;
}
svg#main-vis {
width: 100%;
height: 100%;
max-height: 620px;
filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
}
/* 左右微型浮动指示面板 (字体小、边角放置、绝不遮挡居中主图) */
.hud-panel {
position: absolute;
background: var(--panel-bg);
border: 1px solid var(--panel-border);
backdrop-filter: blur(10px);
border-radius: 8px;
padding: 10px 14px;
pointer-events: none;
font-size: 11px;
z-index: 5;
}
.hud-left {
top: 14px;
left: 18px;
width: 220px;
}
.hud-right {
top: 14px;
right: 18px;
width: 230px;
}
.hud-title {
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 8px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-bottom: 4px;
}
.metric-row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 5px 0;
font-family: "JetBrains Mono", Consolas, monospace;
}
.metric-val {
font-weight: 700;
color: var(--cyan-glow);
}
.metric-vac {
color: var(--purple-vac);
}
/* 压力条动画 */
.bar-wrap {
width: 100%;
height: 5px;
background: rgba(255, 255, 255, 0.08);
border-radius: 3px;
overflow: hidden;
margin-top: 4px;
}
.bar-fill-vac {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #8b5cf6, #ec4899);
transition: width 0.08s linear;
box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}
.bar-fill-pz {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #0284c7, #00f0ff);
transition: width 0.05s linear;
}
/* 底部极简时序控制区 */
footer {
width: 100%;
max-width: 1380px;
padding: 10px 24px 16px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 10;
}
.timeline-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.phase-chip {
background: rgba(15, 23, 42, 0.65);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 6px;
padding: 6px 10px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.25s ease;
}
.phase-chip.active {
background: rgba(0, 240, 255, 0.1);
border-color: var(--cyan-glow);
box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
}
.phase-chip .phase-name {
font-size: 11px;
font-weight: 600;
color: var(--text-main);
}
.phase-chip .phase-time {
font-size: 10px;
font-family: monospace;
color: var(--text-muted);
}
.phase-chip.active .phase-time {
color: var(--cyan-glow);
}
.ctrl-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
color: var(--text-muted);
}
.btn-group {
display: flex;
gap: 8px;
}
.btn-ctrl {
background: rgba(30, 41, 59, 0.8);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--text-main);
padding: 4px 12px;
border-radius: 4px;
font-size: 11px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
transition: all 0.2s;
}
.btn-ctrl:hover {
background: rgba(56, 189, 248, 0.2);
border-color: var(--cyan-glow);
color: #fff;
}
.btn-ctrl.active-play {
background: rgba(0, 240, 255, 0.15);
border-color: var(--cyan-glow);
color: var(--cyan-glow);
}
/* 动态粒子与气流效果 (SVG内部滤镜与渐变) */
.glow-cyan {
filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.7));
}
.glow-purple {
filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.8));
}
</style>
</head>
<body>
<div class="bg-grid"></div>
<!-- 顶栏：系统指标与IFR理想解标语 -->
<header>
<div class="brand-box">
<span class="brand-tag">TRIZ IFR 最终理想解</span>
<h1>零距离压电-文丘里集成吸嘴 (亚毫秒响应/免远端真空管路)</h1>
</div>
<div class="status-pill">
<div class="status-dot"></div>
<span id="system-mode-text">实时运行态: 脉宽调制吸附</span>
</div>
</header>
<!-- 核心主视觉区：高保真剖面动态原理动画 (自适应居中、高占比) -->
<main>
<div class="stage-container">
<!-- 左侧浮动指标 (小字号、边缘布局、不挡主体) -->
<div class="hud-panel hud-left">
<div class="hud-title">
<span>压电阀响应动力学</span>
<span style="color:var(--amber-act);">PZT 500Hz</span>
</div>
<div class="metric-row">
<span>阀门开度 (0.5ms响应)</span>
<span class="metric-val" id="val-piezo-stroke">100 %</span>
</div>
<div class="bar-wrap">
<div class="bar-fill-pz" id="bar-pz"></div>
</div>
<div class="metric-row" style="margin-top:8px;">
<span>供气压力 (稳压源)</span>
<span class="metric-val" id="val-supply-p">0.40 MPa</span>
</div>
<div class="metric-row">
<span>文丘里喉口流速</span>
<span class="metric-val" id="val-jet-speed">330 m/s</span>
</div>
</div>
<!-- 右侧浮动指标 -->
<div class="hud-panel hud-right">
<div class="hud-title">
<span>就地真空度 (0mm管道延时)</span>
<span class="metric-vac" id="txt-vac-status">已锁定</span>
</div>
<div class="metric-row">
<span>腔内负压值</span>
<span class="metric-val metric-vac" id="val-vac-p">-60.0 kPa</span>
</div>
<div class="bar-wrap">
<div class="bar-fill-vac" id="bar-vac"></div>
</div>
<div class="metric-row" style="margin-top:8px;">
<span>吸附建立时间</span>
<span class="metric-val">2.8 ms <span style="font-size:9px;color:var(--text-muted);">(原需>85ms)</span></span>
</div>
<div class="metric-row">
<span>瞬态破真空反吹</span>
<span class="metric-val" id="val-blow-status" style="color:var(--text-muted);">待命</span>
</div>
</div>
<!-- 核心高保真 SVG 剖面与气流动力学图 -->
<svg id="main-vis" viewBox="0 0 1000 600" preserveAspectRatio="xMidYMid meet">
<defs>
<!-- 渐变定义 -->
<linearGradient id="metal-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#1e293b" />
<stop offset="30%" stop-color="#334155" />
<stop offset="70%" stop-color="#1e293b" />
<stop offset="100%" stop-color="#0f172a" />
</linearGradient>
<linearGradient id="piezo-grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#f59e0b" />
<stop offset="25%" stop-color="#fbbf24" />
<stop offset="50%" stop-color="#d97706" />
<stop offset="75%" stop-color="#fbbf24" />
<stop offset="100%" stop-color="#b45309" />
</linearGradient>
<linearGradient id="sup-air-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#0284c7" />
<stop offset="50%" stop-color="#00f0ff" />
<stop offset="100%" stop-color="#38bdf8" />
</linearGradient>
<radialGradient id="vac-chamber-glow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="rgba(168, 85, 247, 0.45)" />
<stop offset="80%" stop-color="rgba(168, 85, 247, 0.08)" />
<stop offset="100%" stop-color="transparent" />
</radialGradient>
<linearGradient id="jet-stream" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#00f0ff" stop-opacity="1" />
<stop offset="40%" stop-color="#38bdf8" stop-opacity="0.9" />
<stop offset="80%" stop-color="#a855f7" stop-opacity="0.6" />
<stop offset="100%" stop-color="#64748b" stop-opacity="0.1" />
</linearGradient>
<!-- 滤网网格图案 -->
<pattern id="filter-mesh" width="6" height="6" patternUnits="userSpaceOnUse">
<line x1="0" y1="3" x2="6" y2="3" stroke="rgba(255,255,255,0.25)" stroke-width="0.8" />
<line x1="3" y1="0" x2="3" y2="6" stroke="rgba(255,255,255,0.25)" stroke-width="0.8" />
</pattern>
<!-- 发光滤镜 -->
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="3.5" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- 背景刻度与辅助基准线 -->
<g stroke="rgba(255,255,255,0.06)" stroke-width="1" stroke-dasharray="4,4">
<line x1="120" y1="300" x2="880" y2="300" />
<line x1="500" y1="60" x2="500" y2="540" />
<!-- 尺寸标注线：零距离集成 -->
<line x1="430" y1="380" x2="430" y2="470" stroke="rgba(0, 240, 255, 0.4)" stroke-dasharray="2,2" />
</g>
<!-- 标尺文字：零延时就地产生真空 -->
<text x="420" y="430" fill="var(--cyan-glow)" font-size="11" text-anchor="end" font-family="monospace">
文丘里发生源至吸嘴仅 8mm (原系统管道>1.5m)
</text>
<path d="M 425 385 L 425 465" stroke="var(--cyan-glow)" stroke-width="1.2" marker-start="url(#dot)" marker-end="url(#dot)"/>
<!-- ==================== 一体化阀体外壳 (剖面) ==================== -->
<!-- 外壳基座 -->
<path d="M 330,70
L 670,70
L 670,220
L 770,220
L 770,360
L 640,360
L 640,460
L 590,490
L 590,510
L 410,510
L 410,490
L 360,460
L 360,360
L 230,360
L 230,220
L 330,220 Z"
fill="url(#metal-grad)"
stroke="#475569"
stroke-width="2.5" />
<!-- 剖面斜剖线纹理 (加强工程感) -->
<g stroke="rgba(255,255,255,0.04)" stroke-width="1.2">
<line x1="340" y1="80" x2="360" y2="100" />
<line x1="340" y1="120" x2="380" y2="160" />
<line x1="630" y1="80" x2="660" y2="110" />
<line x1="640" y1="140" x2="660" y2="160" />
<line x1="240" y1="240" x2="300" y2="300" />
<line x1="700" y1="240" x2="760" y2="300" />
</g>
<!-- ==================== 内部流道与关键腔体 ==================== -->
<!-- 1. 顶部 0.4MPa 压缩空气进气道 -->
<path d="M 470,70 L 530,70 L 530,135 L 470,135 Z" fill="#0b1329" stroke="rgba(56,189,248,0.4)" stroke-width="1.5" />
<!-- 2. 压电陶瓷致动器腔室 (PZT Actuator Chamber) -->
<rect x="380" y="100" width="80" height="90" rx="4" fill="#0f172a" stroke="#334155" />
<!-- PZT 陶瓷叠堆 (动态微位移) -->
<g id="piezo-stack" transform="translate(0, 0)">
<rect x="388" y="106" width="64" height="78" rx="2" fill="url(#piezo-grad)" stroke="#f59e0b" stroke-width="1" />
<!-- 晶格叠层条纹 -->
<line x1="388" y1="119" x2="452" y2="119" stroke="#78350f" stroke-width="1.5" />
<line x1="388" y1="132" x2="452" y2="132" stroke="#78350f" stroke-width="1.5" />
<line x1="388" y1="145" x2="452" y2="145" stroke="#78350f" stroke-width="1.5" />
<line x1="388" y1="158" x2="452" y2="158" stroke="#78350f" stroke-width="1.5" />
<line x1="388" y1="171" x2="452" y2="171" stroke="#78350f" stroke-width="1.5" />
<!-- 阀针连接杆 -->
<path id="valve-needle" d="M 452,145 L 492,145 L 498,141 L 504,145 L 504,151 L 498,155 L 492,151 Z" fill="#e2e8f0" stroke="#94a3b8" />
</g>
<!-- 3. 微型文丘里喷射流道 (收缩喷嘴 0.4mm -> 混合腔 -> 扩散消音排气) -->
<!-- 主供气向下通道 -->
<path d="M 485,145 L 515,145 L 515,240 L 485,240 Z" fill="#0b1329" />
<!-- 文丘里核心管段 (横向高速射流腔) -->
<!-- 喷嘴收缩段 -> 喉口 (0.4mm) -> 扩散段 -->
<path d="M 450,255
L 490,265
L 508,268
L 540,265
L 740,245
L 740,315
L 540,295
L 508,292
L 490,295
L 450,305 Z"
fill="#060d1d"
stroke="rgba(0,240,255,0.4)"
stroke-width="1.5" />
<!-- 混合吸气负压腔 (垂直连通下方吸嘴) -->
<path d="M 480,270
L 535,270
L 550,380
L 570,440
L 570,490
L 430,490
L 430,440
L 465,380 Z"
fill="#080e1e"
stroke="rgba(168,85,247,0.4)"
stroke-width="1.5" />
<!-- 负压发光染色底色 (强度随真空度变化) -->
<path id="vac-glow-path" d="M 480,270 L 535,270 L 550,380 L 570,440 L 570,490 L 430,490 L 430,440 L 465,380 Z" fill="url(#vac-chamber-glow)" opacity="0.8" />
<!-- 4. 并联瞬态破真空微吹支路 (Bypass Blow Channel) -->
<path d="M 470,140
L 330,140
L 330,390
L 440,410"
fill="none"
stroke="rgba(245,158,11,0.25)"
stroke-width="6"
stroke-linecap="round" />
<path id="bypass-air-pulse" d="M 470,140 L 330,140 L 330,390 L 440,410"
fill="none"
stroke="#f59e0b"
stroke-width="4"
stroke-dasharray="12,12"
stroke-dashoffset="0"
opacity="0" />
<!-- 微型单向节流阀在破真空支路上 -->
<circle cx="330" cy="270" r="14" fill="#1e293b" stroke="#f59e0b" stroke-width="1.5" />
<path d="M 324,264 L 336,270 L 324,276 Z" fill="#f59e0b" />
<line x1="336" y1="262" x2="336" y2="278" stroke="#f59e0b" stroke-width="1.5" />
<!-- 5. 集成微孔烧结过滤器 (就地防尘防堵塞) -->
<rect x="440" y="445" width="120" height="14" rx="2" fill="url(#filter-mesh)" stroke="#64748b" stroke-width="1.2" />
<text x="500" y="455" fill="#94a3b8" font-size="8.5" text-anchor="middle" font-family="monospace">多孔微滤芯 (0.1μm)</text>
<!-- 6. 吸嘴末端精密接口 (Nozzle Tip) -->
<path d="M 450,490 L 550,490 L 540,525 L 460,525 Z" fill="#334155" stroke="#64748b" stroke-width="1.5" />
<!-- 柔性高分子吸嘴唇边 (紫色发光) -->
<path d="M 455,525 L 545,525 L 552,538 L 448,538 Z" fill="#0284c7" stroke="var(--cyan-glow)" stroke-width="1" />
<!-- ==================== 射流与气流动态效果 ==================== -->
<!-- 供气主流束 -->
<g id="supply-particles"></g>
<!-- 文丘里高速超音速射流束 (带激波膨胀纹理) -->
<g id="jet-expansion" opacity="1">
<!-- 射流锥 -->
<polygon points="508,278 730,250 730,310 508,282" fill="url(#jet-stream)" opacity="0.85" filter="url(#glow)" />
<!-- 激波菱形纹 (文丘里高速特征) -->
<polygon points="530,280 545,274 560,280 545,286" fill="rgba(255,255,255,0.7)" />
<polygon points="575,280 595,272 615,280 595,288" fill="rgba(255,255,255,0.5)" />
<polygon points="635,280 660,270 685,280 660,290" fill="rgba(255,255,255,0.3)" />
<!-- 消音排气微粒逸出 -->
<g id="exhaust-particles"></g>
</g>
<!-- 负压抽吸流线微粒 (从吸嘴直奔文丘里混合腔) -->
<g id="vacuum-suction-lines"></g>
<!-- ==================== 吸附目标物：半导体芯片 (Chip) ==================== -->
<g id="workpiece" transform="translate(0, 0)">
<!-- 硅片镜面与倒角 -->
<rect x="420" y="540" width="160" height="18" rx="2" fill="#1e1b4b" stroke="#818cf8" stroke-width="1.5" />
<!-- 芯片金线引脚 / 焊盘微结构 -->
<rect x="430" y="544" width="18" height="10" fill="#fbbf24" opacity="0.9" />
<rect x="460" y="544" width="18" height="10" fill="#fbbf24" opacity="0.9" />
<rect x="522" y="544" width="18" height="10" fill="#fbbf24" opacity="0.9" />
<rect x="552" y="544" width="18" height="10" fill="#fbbf24" opacity="0.9" />
<!-- 芯片文字 -->
<text x="500" y="552" fill="#c7d2fe" font-size="8.5" text-anchor="middle" font-family="monospace" font-weight="700">DIE-PKG 0.05g</text>
<!-- 贴合接触面吸力箭头 (吸附建立时显示) -->
<g id="grip-force-arrows" opacity="1">
<path d="M 470,536 L 470,528 M 467,531 L 470,528 L 473,531" stroke="#ec4899" stroke-width="1.8" />
<path d="M 500,536 L 500,528 M 497,531 L 500,528 L 503,531" stroke="#ec4899" stroke-width="1.8" />
<path d="M 530,536 L 530,528 M 527,531 L 530,528 L 533,531" stroke="#ec4899" stroke-width="1.8" />
</g>
</g>
<!-- ==================== 部件技术标注 (精简工业线框) ==================== -->
<!-- 压电阀标注 -->
<g transform="translate(360, 110)">
<line x1="20" y1="35" x2="-80" y2="35" stroke="#64748b" stroke-width="1" />
<circle cx="-80" cy="35" r="3" fill="#f59e0b" />
<text x="-88" y="32" fill="#f59e0b" font-size="10" font-weight="700" text-anchor="end">压电晶体换向阀</text>
<text x="-88" y="44" fill="var(--text-muted)" font-size="9" text-anchor="end">0.5ms 极速启闭 / 500Hz PWM</text>
</g>
<!-- 供气口标注 -->
<g transform="translate(500, 65)">
<text x="0" y="-8" fill="var(--cyan-glow)" font-size="10" font-weight="700" text-anchor="middle">单一气源: 洁净压缩空气 0.4 MPa</text>
<path d="M 500,0 L 500,18 M 496,12 L 500,18 L 504,12" stroke="var(--cyan-glow)" stroke-width="1.5" />
</g>
<!-- 文丘里喷嘴孔径标注 -->
<g transform="translate(508, 260)">
<line x1="0" y1="0" x2="35" y2="-45" stroke="#38bdf8" stroke-width="1" />
<line x1="35" y1="-45" x2="135" y2="-45" stroke="#38bdf8" stroke-width="1" />
<circle cx="0" cy="0" r="2.5" fill="#38bdf8" />
<text x="40" y="-50" fill="#38bdf8" font-size="10" font-weight="700">微型文丘里喷嘴 (Φ0.4mm)</text>
<text x="40" y="-38" fill="var(--text-muted)" font-size="8.5">高速射流就地抽吸 (3ms达-60kPa)</text>
</g>
<!-- 排气口标注 -->
<g transform="translate(740, 280)">
<text x="12" y="4" fill="#94a3b8" font-size="10" font-family="monospace">排气扩散口 →</text>
</g>
<!-- 反吹旁路标注 -->
<g transform="translate(330, 340)">
<line x1="-15" y1="0" x2="-80" y2="0" stroke="#f59e0b" stroke-width="1" />
<circle cx="-15" cy="0" r="2.5" fill="#f59e0b" />
<text x="-85" y="-3" fill="#f59e0b" font-size="10" font-weight="700" text-anchor="end">瞬态破真空支路</text>
<text x="-85" y="9" fill="var(--text-muted)" font-size="8.5" text-anchor="end">反向余压微吹 3ms 瞬间脱附</text>
</g>
</svg>
</div>
</main>
<!-- 底部时序与节拍控制器 (紧凑排布) -->
<footer>
<div class="timeline-strip">
<div class="phase-chip active" id="chip-phase-0" onclick="jumpToPhase(0)">
<div>
<div class="phase-name">1. 压电开启 / 瞬态射流</div>
<div style="font-size:9.5px;color:var(--text-muted);">供气开通 0.5ms • 喉口超音速喷射</div>
</div>
<div class="phase-time">0~1.2s</div>
</div>
<div class="phase-chip" id="chip-phase-1" onclick="jumpToPhase(1)">
<div>
<div class="phase-name">2. 就地真空建立 (-60kPa)</div>
<div style="font-size:9.5px;color:var(--text-muted);">3ms极限抽吸 • 芯片瞬间贴合</div>
</div>
<div class="phase-time">1.2~2.6s</div>
</div>
<div class="phase-chip" id="chip-phase-2" onclick="jumpToPhase(2)">
<div>
<div class="phase-name">3. PWM 高频保压转运</div>
<div style="font-size:9.5px;color:var(--text-muted);">500Hz 脉宽调制 • 节能稳态吸附</div>
</div>
<div class="phase-time">2.6~4.4s</div>
</div>
<div class="phase-chip" id="chip-phase-3" onclick="jumpToPhase(3)">
<div>
<div class="phase-name">4. 极速断气 / 瞬态微吹</div>
<div style="font-size:9.5px;color:var(--text-muted);">反向余压 3ms 破真空 • 零黏连释放</div>
</div>
<div class="phase-time">4.4~6.0s</div>
</div>
</div>
<div class="ctrl-row">
<div class="btn-group">
<button class="btn-ctrl active-play" id="btn-play" onclick="togglePlay()">
<span id="play-icon">⏸</span> <span id="play-text">自动连续循环</span>
</button>
<button class="btn-ctrl" onclick="stepSlowMo()">
<span>⏱</span> <span id="speed-text">1.0x 正常速度</span>
</button>
<button class="btn-ctrl" onclick="resetCycle()">
<span>↺</span> 重置周期
</button>
</div>
<div style="display:flex; gap:16px; font-family:monospace; font-size:11px;">
<span>节拍周期: <strong style="color:var(--cyan-glow);">6.0 s</strong></span>
<span>当前时序: <strong style="color:var(--text-main);" id="clock-display">0.00 s</strong></span>
<span style="color:rgba(255,255,255,0.4);">| 消除矛盾: 速度与管路体积的物理矛盾 (IFR)</span>
</div>
</div>
</footer>
<!-- ==================== 仿真驱动核心脚本 ==================== -->
<script>
// 状态与时序变量
let isPlaying = true;
let timeScale = 1.0;
let cycleTime = 0.0; // 0.0 ~ 6.0 秒
const CYCLE_DURATION = 6.0;
// DOM 元素引用
const valPiezoStroke = document.getElementById('val-piezo-stroke');
const barPz = document.getElementById('bar-pz');
const valJetSpeed = document.getElementById('val-jet-speed');
const valVacP = document.getElementById('val-vac-p');
const barVac = document.getElementById('bar-vac');
const txtVacStatus = document.getElementById('txt-vac-status');
const valBlowStatus = document.getElementById('val-blow-status');
const systemModeText = document.getElementById('system-mode-text');
const clockDisplay = document.getElementById('clock-display');
// SVG 动态图形元素
const piezoStack = document.getElementById('piezo-stack');
const valveNeedle = document.getElementById('valve-needle');
const jetExpansion = document.getElementById('jet-expansion');
const vacGlowPath = document.getElementById('vac-glow-path');
const bypassAirPulse = document.getElementById('bypass-air-pulse');
const workpiece = document.getElementById('workpiece');
const gripForceArrows = document.getElementById('grip-force-arrows');
const supplyParticles = document.getElementById('supply-particles');
const exhaustParticles = document.getElementById('exhaust-particles');
const vacuumSuctionLines = document.getElementById('vacuum-suction-lines');
// 预建粒子池
const particlesSupply = [];
const particlesExhaust = [];
const particlesSuction = [];
function initParticles() {
// 1. 顶部供气粒子
for (let i = 0; i < 18; i++) {
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("r", (1.5 + Math.random() * 1.5).toFixed(1));
circle.setAttribute("fill", "#00f0ff");
circle.setAttribute("opacity", "0.8");
supplyParticles.appendChild(circle);
particlesSupply.push({
el: circle,
x: 480 + Math.random() * 40,
y: 75 + Math.random() * 60,
speed: 2 + Math.random() * 3
});
}
// 2. 排气口高速逸出微粒
for (let i = 0; i < 25; i++) {
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("r", (1.2 + Math.random() * 2).toFixed(1));
circle.setAttribute("fill", "#38bdf8");
circle.setAttribute("opacity", "0.7");
exhaustParticles.appendChild(circle);
particlesExhaust.push({
el: circle,
x: 720 + Math.random() * 20,
y: 255 + Math.random() * 50,
vx: 3 + Math.random() * 5,
vy: (Math.random() - 0.5) * 2,
life: Math.random()
});
}
// 3. 底部负压抽吸流线微粒 (就地流向文丘里)
for (let i = 0; i < 20; i++) {
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("r", (1.2 + Math.random() * 1.6).toFixed(1));
circle.setAttribute("fill", "#c084fc");
circle.setAttribute("opacity", "0.85");
vacuumSuctionLines.appendChild(circle);
particlesSuction.push({
el: circle,
x: 460 + Math.random() * 80,
y: 490 - Math.random() * 200,
vy: 2 + Math.random() * 3.5,
baseX: 460 + Math.random() * 80
});
}
}
initParticles();
// 动画主循环 (页面加载即自启动)
let lastTimestamp = performance.now();
function updateSimulation(now) {
const deltaSec = (now - lastTimestamp) / 1000;
lastTimestamp = now;
if (isPlaying) {
cycleTime = (cycleTime + deltaSec * timeScale) % CYCLE_DURATION;
}
clockDisplay.innerText = cycleTime.toFixed(2) + ' s';
// ==================== 4 个工作阶段动力学计算 ====================
// 阶段 1 (0.0 ~ 1.2s): 压电极速开启 (0.5ms) 与 射流喷射
// 阶段 2 (1.2 ~ 2.6s): 就地真空极限建立 (-60kPa)，芯片吸附到位
// 阶段 3 (2.6 ~ 4.4s): PWM 高频调制保持 (500Hz 微动)，工件稳定转运
// 阶段 4 (4.4 ~ 6.0s): 压电断气，并联支路 3ms 极速微吹破真空，芯片脱附
let piezoOpening = 0.0; // 0.0 ~ 1.0
let vacuumKPa = 0.0; // 0.0 ~ -60.0 kPa
let jetActive = false;
let bypassBlow = false;
let chipY = 0; // 0 = 紧贴吸附, >0 = 落下脱附
let phaseIndex = 0;
if (cycleTime < 1.2) {
// --- 阶段 1: 瞬态触发 ---
phaseIndex = 0;
const subT = cycleTime / 1.2;
piezoOpening = Math.min(1.0, subT * 8.0); // 迅速拉满
vacuumKPa = -60.0 * Math.min(1.0, subT * 3.5); // 毫秒级负压建立
jetActive = true;
bypassBlow = false;
chipY = Math.max(0, (1 - subT * 2.5) * 8); // 快速吸附贴紧
} else if (cycleTime < 2.6) {
// --- 阶段 2: 稳态真空吸附 ---
phaseIndex = 1;
piezoOpening = 1.0;
vacuumKPa = -60.0;
jetActive = true;
bypassBlow = false;
chipY = 0;
} else if (cycleTime < 4.4) {
// --- 阶段 3: PWM 调制阶段 (模拟 500Hz 高频占空比通断波动) ---
phaseIndex = 2;
const pwmWave = 0.85 + 0.15 * Math.sin(cycleTime * 40.0);
piezoOpening = pwmWave;
vacuumKPa = -58.0 + 3.0 * Math.sin(cycleTime * 40.0);
jetActive = true;
bypassBlow = false;
chipY = 0;
} else {
// --- 阶段 4: 瞬态断气与破真空微吹 ---
phaseIndex = 3;
const subT = (cycleTime - 4.4) / 1.6;
piezoOpening = Math.max(0.0, 1.0 - subT * 6.0); // 极速切断
if (subT < 0.35) {
// 3ms 瞬态反吹
bypassBlow = true;
vacuumKPa = 5.0 * (1 - subT / 0.35); // 正压脉冲
} else {
bypassBlow = false;
vacuumKPa = 0.0;
}
jetActive = false;
chipY = Math.min(12, subT * 18); // 脱附掉落到位
}
// ==================== 更新 UI 指标 ====================
updateUI(phaseIndex, piezoOpening, vacuumKPa, jetActive, bypassBlow);
// ==================== 更新 SVG 图形与物理运动 ====================
renderGraphics(piezoOpening, vacuumKPa, jetActive, bypassBlow, chipY, now);
requestAnimationFrame(updateSimulation);
}
// 更新界面数字与高亮芯片
function updateUI(phaseIdx, piezoOpening, vacuumKPa, jetActive, bypassBlow) {
// 切换底部阶段高亮
for (let i = 0; i < 4; i++) {
const chip = document.getElementById(`chip-phase-${i}`);
if (i === phaseIdx) {
chip.classList.add('active');
} else {
chip.classList.remove('active');
}
}
// 压电阀开度与状态
const pzPercent = Math.round(piezoOpening * 100);
valPiezoStroke.innerText = `${pzPercent} %`;
barPz.style.width = `${pzPercent}%`;
// 流速与压力
valJetSpeed.innerText = jetActive ? (320 + pzPercent * 0.2).toFixed(0) + ' m/s (超音速)' : '0 m/s';
// 真空读数
valVacP.innerText = `${vacuumKPa.toFixed(1)} kPa`;
const vacRatio = Math.max(0, Math.min(100, (-vacuumKPa / 60.0) * 100));
barVac.style.width = `${vacRatio}%`;
if (vacuumKPa < -40.0) {
txtVacStatus.innerText = '已锁定 (极度稳固)';
txtVacStatus.style.color = 'var(--purple-vac)';
} else if (vacuumKPa < -10.0) {
txtVacStatus.innerText = '建压抽吸中...';
txtVacStatus.style.color = 'var(--cyan-glow)';
} else if (bypassBlow) {
txtVacStatus.innerText = '正压瞬态反吹';
txtVacStatus.style.color = 'var(--amber-act)';
} else {
txtVacStatus.innerText = '待命释放';
txtVacStatus.style.color = 'var(--text-muted)';
}
// 破真空状态
valBlowStatus.innerText = bypassBlow ? '3ms 脉冲反吹中' : '常闭待命';
valBlowStatus.style.color = bypassBlow ? 'var(--amber-act)' : 'var(--text-muted)';
// 顶栏模式文字
const modeTexts = [
'阶段 1: 压电毫秒级启闭 • 喉口射流瞬间就绪',
'阶段 2: 零距离就地真空建立 (-60 kPa)',
'阶段 3: 500Hz PWM 微调 • 稳态恒力转运',
'阶段 4: 残余反向微吹 • 3ms 零滞后脱附'
];
systemModeText.innerText = modeTexts[phaseIdx];
}
// 渲染 SVG 内部物理与气流
function renderGraphics(piezoOpening, vacuumKPa, jetActive, bypassBlow, chipY, timestamp) {
// 1. 压电叠堆微位移与阀针 (视觉上微放大位移强化表达)
const pzOffset = piezoOpening * 6; // 向右微推
piezoStack.setAttribute('transform', `translate(${pzOffset}, 0)`);
// 2. 射流管视觉强度
jetExpansion.setAttribute('opacity', jetActive ? (0.3 + piezoOpening * 0.7).toString() : '0');
// 3. 真空腔紫色发光底色
const vacAlpha = Math.max(0, -vacuumKPa / 60.0);
vacGlowPath.setAttribute('opacity', (vacAlpha * 0.85).toFixed(2));
// 4. 破真空支路脉冲动画
if (bypassBlow) {
bypassAirPulse.setAttribute('opacity', '1');
const dashOffset = -((timestamp * 0.3) % 24);
bypassAirPulse.setAttribute('stroke-dashoffset', dashOffset.toString());
} else {
bypassAirPulse.setAttribute('opacity', '0');
}
// 5. 工件芯片位置与抓紧箭头
workpiece.setAttribute('transform', `translate(0, ${chipY})`);
if (vacuumKPa < -35 && chipY <= 1) {
gripForceArrows.setAttribute('opacity', '1');
} else {
gripForceArrows.setAttribute('opacity', '0');
}
// 6. 粒子系统更新
// 供气粒子
particlesSupply.forEach(p => {
if (piezoOpening > 0.05) {
p.y += p.speed * (0.4 + piezoOpening * 0.8);
if (p.y > 140) {
p.y = 75;
p.x = 480 + Math.random() * 40;
}
p.el.setAttribute('cx', p.x.toFixed(1));
p.el.setAttribute('cy', p.y.toFixed(1));
p.el.setAttribute('opacity', (0.3 + piezoOpening * 0.7).toFixed(2));
} else {
p.el.setAttribute('opacity', '0.1');
}
});
// 排气粒子
particlesExhaust.forEach(p => {
if (jetActive) {
p.x += p.vx * piezoOpening;
p.y += p.vy;
p.life += 0.03;
if (p.life > 1 || p.x > 820) {
p.x = 720 + Math.random() * 15;
p.y = 265 + Math.random() * 30;
p.life = 0;
}
p.el.setAttribute('cx', p.x.toFixed(1));
p.el.setAttribute('cy', p.y.toFixed(1));
p.el.setAttribute('opacity', ((1 - p.life) * piezoOpening * 0.8).toFixed(2));
} else {
p.el.setAttribute('opacity', '0');
}
});
// 抽吸粒子 (向上涌入文丘里混合腔)
particlesSuction.forEach(p => {
if (vacuumKPa < -15) {
p.y -= p.vy * (-vacuumKPa / 60.0);
p.x = p.baseX + Math.sin(p.y * 0.05) * 8;
if (p.y < 280) {
p.y = 490 - Math.random() * 20;
p.baseX = 460 + Math.random() * 80;
}
p.el.setAttribute('cx', p.x.toFixed(1));
p.el.setAttribute('cy', p.y.toFixed(1));
p.el.setAttribute('opacity', ((-vacuumKPa / 60.0) * 0.8).toFixed(2));
} else {
p.el.setAttribute('opacity', '0');
}
});
}
// ==================== 交互控制函数 ====================
function togglePlay() {
isPlaying = !isPlaying;
const btn = document.getElementById('btn-play');
const icon = document.getElementById('play-icon');
const text = document.getElementById('play-text');
if (isPlaying) {
btn.classList.add('active-play');
icon.innerText = '⏸';
text.innerText = '自动连续循环';
} else {
btn.classList.remove('active-play');
icon.innerText = '▶';
text.innerText = '已暂停播放';
}
}
function stepSlowMo() {
if (timeScale === 1.0) {
timeScale = 0.3;
document.getElementById('speed-text').innerText = '0.3x 慢动作剖析';
} else {
timeScale = 1.0;
document.getElementById('speed-text').innerText = '1.0x 正常速度';
}
}
function resetCycle() {
cycleTime = 0.0;
}
function jumpToPhase(phaseIdx) {
const targetTimes = [0.1, 1.4, 2.8, 4.5];
cycleTime = targetTimes[phaseIdx];
if (!isPlaying) {
togglePlay();
}
}
// 页面加载完成后立即自动启动动画
window.addEventListener('DOMContentLoaded', () => {
requestAnimationFrame(updateSimulation);
});
</script>
</body>
</html>
积分规则：每轮对话扣10分
等待动画代码生成...