独立渲染引擎就绪引擎就绪
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>硬岩微波致裂与低压水射流协同破岩原理动画</title>
<style>
:root {
--bg-dark: #070a12;
--bg-card: rgba(14, 21, 37, 0.7);
--border-subtle: rgba(255, 255, 255, 0.08);
--accent-microwave: #ff8c00;
--accent-microwave-glow: rgba(255, 140, 0, 0.4);
--accent-water: #00d2ff;
--accent-water-glow: rgba(0, 210, 255, 0.4);
--accent-stress: #ff3366;
--accent-quartz: #a3c4f3;
--accent-biotite: #3b2a26;
--accent-feldspar: #e2b49a;
--text-muted: #7e8c9f;
--text-main: #e2e8f0;
}
* {
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", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
overflow: hidden;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
/* 顶部精简微型状态栏 - 边缘化微型排版 */
header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 42px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border-subtle);
background: linear-gradient(180deg, rgba(7,10,18,0.9) 0%, rgba(7,10,18,0.2) 100%);
z-index: 100;
pointer-events: none;
}
.header-title {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 8px;
color: #cbd5e1;
}
.header-title .tag {
font-size: 10px;
padding: 1px 6px;
background: rgba(255, 140, 0, 0.15);
border: 1px solid rgba(255, 140, 0, 0.35);
color: #ffaa33;
border-radius: 3px;
font-family: monospace;
}
.telemetry-row {
display: flex;
gap: 16px;
font-size: 11px;
font-family: "JetBrains Mono", Consolas, monospace;
color: var(--text-muted);
}
.telemetry-item span {
color: #38bdf8;
font-weight: 500;
}
/* 核心舞台区域 - 居中且占据绝对支配地位 */
main {
flex: 1;
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.stage-svg {
width: 100%;
height: 100%;
max-width: 1400px;
max-height: 860px;
}
/* 边缘微型指示说明 - 紧凑角落悬浮 */
.hud-corner-left {
position: absolute;
top: 50px;
left: 20px;
font-size: 11px;
background: var(--bg-card);
border: 1px solid var(--border-subtle);
padding: 10px 14px;
border-radius: 6px;
backdrop-filter: blur(10px);
max-width: 220px;
pointer-events: none;
z-index: 10;
}
.hud-title {
font-size: 11px;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
margin-bottom: 6px;
letter-spacing: 0.5px;
}
.mineral-legend {
display: grid;
grid-template-columns: 1fr;
gap: 4px;
}
.mineral-item {
display: flex;
align-items: center;
gap: 6px;
color: #cbd5e1;
font-size: 11px;
}
.mineral-color {
width: 8px;
height: 8px;
border-radius: 2px;
}
/* 底部悬浮紧凑控制栏 */
.bottom-dock {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
height: 48px;
padding: 0 16px;
background: rgba(13, 19, 33, 0.85);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
backdrop-filter: blur(16px);
display: flex;
align-items: center;
gap: 16px;
z-index: 100;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.step-pill-group {
display: flex;
gap: 6px;
}
.step-pill {
font-size: 11px;
padding: 5px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
color: #94a3b8;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.25s ease;
display: flex;
align-items: center;
gap: 6px;
}
.step-pill.active {
background: rgba(255, 140, 0, 0.15);
color: #ffaa33;
border-color: rgba(255, 140, 0, 0.4);
}
.step-pill.active-water {
background: rgba(0, 210, 255, 0.15);
color: #38bdf8;
border-color: rgba(0, 210, 255, 0.4);
}
.step-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
.dock-divider {
width: 1px;
height: 20px;
background: var(--border-subtle);
}
.dock-btn {
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--border-subtle);
color: #e2e8f0;
border-radius: 6px;
padding: 5px 10px;
font-size: 11px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
transition: background 0.2s;
}
.dock-btn:hover {
background: rgba(255, 255, 255, 0.12);
}
/* 动画关键帧 */
@keyframes microwaveWave {
0% { stroke-dashoffset: 60; opacity: 0.2; }
50% { opacity: 0.9; }
100% { stroke-dashoffset: 0; opacity: 0.2; }
}
@keyframes waterJetFlow {
0% { stroke-dashoffset: 40; }
100% { stroke-dashoffset: 0; }
}
@keyframes heatPulse {
0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 60, 0, 0.4)); opacity: 0.8; }
50% { filter: drop-shadow(0 0 16px rgba(255, 120, 0, 0.9)); opacity: 1; }
}
@keyframes crackGlow {
0% { stroke: #ff3300; opacity: 0.3; }
50% { stroke: #ffffaa; opacity: 1; filter: drop-shadow(0 0 3px #ff7700); }
100% { stroke: #ffffff; opacity: 0.8; }
}
.microwave-ray {
stroke-dasharray: 8 4;
animation: microwaveWave 1.2s linear infinite;
}
.water-stream {
stroke-dasharray: 6 3;
animation: waterJetFlow 0.5s linear infinite;
}
</style>
</head>
<body>
<!-- 顶部超轻量技术状态标头 -->
<header>
<div class="header-title">
<span>微波热应力致裂与低压水射流协同破岩系统</span>
<span class="tag">无源静态致裂头</span>
<span class="tag">IFR 最终理想解</span>
</div>
<div class="telemetry-row">
<div class="telemetry-item">微波功率: <span>220 kW @ 2.45 GHz</span></div>
<div class="telemetry-item">岩石单轴抗压强度: <span id="telemetry-strength">180 MPa (-52%)</span></div>
<div class="telemetry-item">清岩射流压强: <span>95 MPa</span></div>
<div class="telemetry-item">致裂层厚度: <span>22 mm</span></div>
</div>
</header>
<!-- 左上角图例HUD（微型化，无中央遮挡） -->
<aside class="hud-corner-left">
<div class="hud-title">花岗岩非均质矿物相</div>
<div class="mineral-legend">
<div class="mineral-item">
<div class="mineral-color" style="background:#261e1b; border:1px solid #5d463e;"></div>
<span>黑云母 (强吸波·极速升温相)</span>
</div>
<div class="mineral-item">
<div class="mineral-color" style="background:#8eb5e8; border:1px solid #c7dcfc;"></div>
<span>石英 (各向异性高膨胀相)</span>
</div>
<div class="mineral-item">
<div class="mineral-color" style="background:#e4b39b; border:1px solid #f3d4c3;"></div>
<span>长石 (基体骨架·低介电损耗)</span>
</div>
</div>
</aside>
<!-- 核心交互式原理动画视窗 -->
<main>
<svg class="stage-svg" viewBox="0 0 1280 720" preserveAspectRatio="xMidYMid meet">
<defs>
<!-- 滤镜与发光效果 -->
<filter id="glow-microwave" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="5" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="glow-water" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<radialGradient id="heat-spot" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ff3b00" stop-opacity="0.85" />
<stop offset="60%" stop-color="#ff9900" stop-opacity="0.4" />
<stop offset="100%" stop-color="#ffaa00" stop-opacity="0" />
</radialGradient>
<linearGradient id="waveguide-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#334155" />
<stop offset="50%" stop-color="#64748b" />
<stop offset="100%" stop-color="#1e293b" />
</linearGradient>
<linearGradient id="drill-head-grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#475569" />
<stop offset="100%" stop-color="#1e293b" />
</linearGradient>
</defs>
<!-- 背景网格与参考线 -->
<g opacity="0.12">
<path d="M 0 100 H 1280 M 0 200 H 1280 M 0 300 H 1280 M 0 400 H 1280 M 0 500 H 1280 M 0 600 H 1280" stroke="#94a3b8" stroke-width="1" stroke-dasharray="4 8" />
<path d="M 160 0 V 720 M 320 0 V 720 M 480 0 V 720 M 640 0 V 720 M 800 0 V 720 M 960 0 V 720 M 1120 0 V 720" stroke="#94a3b8" stroke-width="1" stroke-dasharray="4 8" />
</g>
<!-- ================= 左侧区域：宏观井下致裂与清岩钻进剖面 (X: 60 - 580) ================= -->
<g id="macro-drilling-assembly" transform="translate(60, 40)">
<!-- 井筒与岩体轮廓 -->
<rect x="20" y="40" width="460" height="580" rx="8" fill="#0d131f" stroke="#1e293b" stroke-width="2" />
<!-- 原状深部硬岩区 -->
<rect x="50" y="280" width="400" height="320" fill="#141a29" />
<!-- 岩石纹理与预置晶粒点阵 -->
<g opacity="0.35">
<circle cx="80" cy="340" r="14" fill="#3b2a26" />
<polygon points="120,310 145,325 135,350 105,335" fill="#8eb5e8" />
<polygon points="180,330 210,320 220,350 190,360" fill="#e4b39b" />
<circle cx="260" cy="340" r="16" fill="#3b2a26" />
<polygon points="310,315 340,330 330,355 295,340" fill="#8eb5e8" />
<polygon points="380,330 410,320 425,355 390,365" fill="#e4b39b" />
<!-- 下层深岩 -->
<circle cx="110" cy="450" r="18" fill="#3b2a26" />
<polygon points="160,420 190,435 180,470 150,450" fill="#8eb5e8" />
<polygon points="240,430 280,425 270,465 230,460" fill="#e4b39b" />
<circle cx="340" cy="460" r="19" fill="#3b2a26" />
<polygon points="400,430 430,450 415,480 380,470" fill="#8eb5e8" />
</g>
<!-- 井底待破岩面致裂影响层 (10~30mm 深度示意) -->
<g id="rock-fracture-zone">
<rect id="damage-layer" x="60" y="300" width="380" height="42" rx="4" fill="url(#heat-spot)" opacity="0.75" />
<!-- 宏观裂纹网格 -->
<g id="macro-cracks" stroke="#ffcc88" stroke-width="1.6" fill="none" opacity="0.9">
<path class="crack-line" d="M 80,300 L 95,315 L 90,325 L 110,335 M 95,315 L 120,318" />
<path class="crack-line" d="M 150,300 L 165,312 L 155,330 L 175,340 M 165,312 L 190,315" />
<path class="crack-line" d="M 230,300 L 245,318 L 260,322 L 250,340 M 245,318 L 225,335" />
<path class="crack-line" d="M 310,300 L 325,315 L 345,320 L 340,338 M 325,315 L 310,332" />
<path class="crack-line" d="M 380,300 L 395,318 L 415,322 L 410,340 M 395,318 L 385,335" />
</g>
<!-- 碎屑剥落粒子群容器 -->
<g id="debris-container"></g>
</g>
<!-- 静态破岩钻具组合体 (无运动部件，向下慢速进给) -->
<g id="drill-tool-group" transform="translate(0, 0)">
<!-- 主波导杆体 -->
<rect x="220" y="40" width="60" height="190" fill="url(#waveguide-grad)" stroke="#64748b" stroke-width="1.5" />
<!-- 同轴高功率微波传输同轴芯 -->
<line x1="250" y1="40" x2="250" y2="230" stroke="#ffaa00" stroke-width="3" stroke-dasharray="8 4" />
<!-- 水射流高压环管 (双侧) -->
<rect x="188" y="50" width="16" height="180" rx="3" fill="#1e293b" stroke="#0ea5e9" stroke-width="1.2" />
<rect x="296" y="50" width="16" height="180" rx="3" fill="#1e293b" stroke="#0ea5e9" stroke-width="1.2" />
<line x1="196" y1="50" x2="196" y2="230" stroke="#00d2ff" stroke-width="2" />
<line x1="304" y1="50" x2="304" y2="230" stroke="#00d2ff" stroke-width="2" />
<!-- 井下无源微波辐射天线头 (Horn/Lens) -->
<polygon points="210,230 290,230 315,270 185,270" fill="url(#drill-head-grad)" stroke="#94a3b8" stroke-width="2" />
<!-- 介质透镜窗面 -->
<ellipse cx="250" cy="270" rx="65" ry="10" fill="#334155" stroke="#ff9900" stroke-width="2" />
<!-- 水射流喷嘴 (Nozzles) -->
<polygon points="182,260 200,260 195,275 180,275" fill="#0284c7" stroke="#38bdf8" stroke-width="1" />
<polygon points="300,260 318,260 320,275 305,275" fill="#0284c7" stroke="#38bdf8" stroke-width="1" />
<!-- 能量束层：微波辐射光锥 (动态) -->
<g id="microwave-beam-group">
<polygon points="195,272 305,272 430,315 70,315" fill="url(#heat-spot)" opacity="0.45" />
<!-- 微波电磁波阵面弧线 -->
<path d="M 205,280 Q 250,292 295,280" stroke="#ffaa00" stroke-width="2" fill="none" class="microwave-ray" filter="url(#glow-microwave)" />
<path d="M 180,292 Q 250,308 320,292" stroke="#ff7700" stroke-width="2.5" fill="none" class="microwave-ray" filter="url(#glow-microwave)" style="animation-delay: -0.4s;" />
<path d="M 150,306 Q 250,324 350,306" stroke="#ff3300" stroke-width="3" fill="none" class="microwave-ray" filter="url(#glow-microwave)" style="animation-delay: -0.8s;" />
</g>
<!-- 水射流喷射柱 (动态) -->
<g id="water-jets-group">
<line x1="187" y1="275" x2="130" y2="318" stroke="#00f0ff" stroke-width="4" stroke-linecap="round" class="water-stream" filter="url(#glow-water)" />
<line x1="312" y1="275" x2="370" y2="318" stroke="#00f0ff" stroke-width="4" stroke-linecap="round" class="water-stream" filter="url(#glow-water)" />
<line x1="192" y1="275" x2="220" y2="315" stroke="#38bdf8" stroke-width="3" stroke-linecap="round" class="water-stream" />
<line x1="308" y1="275" x2="280" y2="315" stroke="#38bdf8" stroke-width="3" stroke-linecap="round" class="water-stream" />
</g>
</g>
<!-- 宏观视图注解标尺 -->
<g transform="translate(435, 270)">
<line x1="0" y1="0" x2="0" y2="72" stroke="#64748b" stroke-width="1.5" />
<line x1="-5" y1="0" x2="5" y2="0" stroke="#64748b" stroke-width="1.5" />
<line x1="-5" y1="30" x2="5" y2="30" stroke="#ff8c00" stroke-width="2" />
<line x1="-5" y1="72" x2="5" y2="72" stroke="#64748b" stroke-width="1.5" />
<text x="12" y="24" fill="#ffaa33" font-size="10" font-family="monospace">致裂层 10~30mm</text>
<text x="12" y="42" fill="#64748b" font-size="9" font-family="monospace">强度降幅 ≥40%</text>
</g>
<text x="30" y="32" fill="#64748b" font-size="11" font-weight="600" letter-spacing="1">井下宏观协同钻进剖面</text>
</g>
<!-- ================= 右侧区域：微观矿物晶界界面热应力剪切破坏透视 (X: 620 - 1220) ================= -->
<g id="micro-physics-assembly" transform="translate(620, 40)">
<rect x="0" y="40" width="600" height="580" rx="8" fill="#0b101c" stroke="#1e293b" stroke-width="2" />
<!-- 视窗标题栏 -->
<g transform="translate(20, 30)">
<text x="0" y="0" fill="#94a3b8" font-size="11" font-weight="600" letter-spacing="1">微观尺度：相间热膨胀失配与沿晶/穿晶微裂纹演化</text>
</g>
<!-- 微观矿物颗粒集群 -->
<g id="micro-minerals" transform="translate(50, 80)">
<!-- 颗粒 1: 黑云母 (强吸波介质, 极度升温) -->
<g id="grain-biotite" class="mineral-grain" style="transform-origin: 160px 180px;">
<polygon points="110,130 210,120 250,190 190,260 100,220" fill="#241916" stroke="#4a332c" stroke-width="3" />
<!-- 内部热斑辐射 -->
<circle id="biotite-heat-core" cx="170" cy="185" r="50" fill="url(#heat-spot)" opacity="0.9" style="animation: heatPulse 1.8s ease-in-out infinite;" />
<text x="145" y="180" fill="#ffaa44" font-size="12" font-weight="700">黑云母</text>
<text x="135" y="196" fill="#ffd599" font-size="10" font-family="monospace">tan δ ≈ 0.28 (高损耗)</text>
<text x="145" y="210" fill="#ff4400" font-size="10" font-weight="bold">ΔT > +320°C</text>
</g>
<!-- 颗粒 2: 石英颗粒 (各向异性剧烈热膨胀) -->
<g id="grain-quartz" class="mineral-grain" style="transform-origin: 340px 150px;">
<polygon points="250,190 210,120 310,80 410,130 380,220" fill="#1b2a47" stroke="#4169a8" stroke-width="3" />
<text x="300" y="145" fill="#93c5fd" font-size="13" font-weight="700">石英晶体</text>
<text x="275" y="162" fill="#bfdbfe" font-size="10" font-family="monospace">膨胀系数 α: 14×10⁻⁶/K</text>
<text x="290" y="178" fill="#60a5fa" font-size="10">产生极大剪切压应力</text>
<!-- 热膨胀位移矢量箭头 -->
<g id="expansion-vectors" stroke="#38bdf8" stroke-width="2" opacity="0.8">
<line x1="250" y1="170" x2="225" y2="180" marker-end="url(#arrow)" />
<line x1="330" y1="100" x2="335" y2="75" />
<line x1="390" y1="150" x2="420" y2="150" />
</g>
</g>
<!-- 颗粒 3: 斜长石基体 (低介电响应) -->
<g id="grain-feldspar" class="mineral-grain" style="transform-origin: 230px 340px;">
<polygon points="100,220 190,260 250,190 380,220 400,340 260,400 120,360" fill="#2d221e" stroke="#5c443b" stroke-width="3" />
<text x="220" y="300" fill="#fbcfe8" font-size="13" font-weight="700">长石基体骨架</text>
<text x="200" y="318" fill="#e2b49a" font-size="10" font-family="monospace">中低介电损耗相</text>
<text x="195" y="334" fill="#a8a29e" font-size="10">抗拉极限较低 (σt ≈ 8 MPa)</text>
</g>
<!-- 晶界热应力失配集中区与动态裂纹演化系统 (CRACKS SYSTEM) -->
<g id="micro-crack-network" fill="none" stroke-linecap="round" stroke-linejoin="round">
<!-- 沿晶界面主裂纹 1 (黑云母-石英界面) -->
<path class="micro-crack" d="M 210,120 L 230,155 L 250,190" stroke="#ffeedd" stroke-width="3.5" style="animation: crackGlow 2s infinite;" />
<!-- 沿晶界面主裂纹 2 (黑云母-长石界面) -->
<path class="micro-crack" d="M 250,190 L 220,230 L 190,260" stroke="#ffeedd" stroke-width="3.5" style="animation: crackGlow 2s infinite 0.3s;" />
<!-- 沿晶界面主裂纹 3 (石英-长石界面) -->
<path class="micro-crack" d="M 250,190 L 310,205 L 380,220" stroke="#ffeedd" stroke-width="3" style="animation: crackGlow 2s infinite 0.6s;" />
<!-- 穿晶微裂纹分支 (穿入脆化长石) -->
<path class="micro-branch" d="M 220,230 L 205,280 L 180,310" stroke="#ff7733" stroke-width="2" stroke-dasharray="2 2" />
<path class="micro-branch" d="M 310,205 L 320,260 L 340,300" stroke="#ff7733" stroke-width="2" stroke-dasharray="2 2" />
<path class="micro-branch" d="M 230,155 L 270,140 L 310,150" stroke="#ff5500" stroke-width="2" stroke-dasharray="2 2" />
<!-- 剪切应力集中警示符号 -->
<g id="stress-markers" transform="translate(235, 175)">
<circle cx="0" cy="0" r="14" fill="none" stroke="#ff0055" stroke-width="2" stroke-dasharray="3 3" />
<text x="-8" y="4" fill="#ff3366" font-size="10" font-weight="bold">τmax</text>
</g>
</g>
<!-- 低压水射流楔进与颗粒剥离动画 (微观) -->
<g id="micro-water-wedge" opacity="0.85">
<path d="M 250,100 L 245,160 L 250,190" stroke="#00f0ff" stroke-width="4" stroke-linecap="round" class="water-stream" />
<circle cx="250" cy="190" r="5" fill="#38bdf8" filter="url(#glow-water)" />
<text x="260" y="125" fill="#38bdf8" font-size="10" font-family="monospace">80~120 MPa 射流楔入裂纹</text>
</g>
</g>
<!-- 机理说明轻量卡片（置于微观图右下，绝不挡住晶界中心） -->
<g transform="translate(260, 480)">
<rect x="0" y="0" width="310" height="85" rx="6" fill="rgba(15, 23, 42, 0.85)" stroke="#334155" stroke-width="1" />
<text x="12" y="20" fill="#f8fafc" font-size="11" font-weight="600">破岩能耗转移原理 (TRIZ 理想解)</text>
<text x="12" y="38" fill="#94a3b8" font-size="10">1. 吸波差异 ➔ 晶界温差剪应力 > 颗粒胶结抗剪强度</text>
<text x="12" y="54" fill="#94a3b8" font-size="10">2. 裂纹网格瓦解宏观骨架 ➔ 抗压强度骤降 >40%</text>
<text x="12" y="70" fill="#38bdf8" font-size="10">3. 钻头无需强力高磨损扭转，仅需低推力连续剥离</text>
</g>
</g>
</svg>
</main>
<!-- 底部精简交互控制器 (自动循环播放 + 可手动切换工况) -->
<footer class="bottom-dock">
<div class="step-pill-group">
<div class="step-pill active" id="btn-step-1" onclick="setCycleStep(1)">
<span class="step-dot"></span>
<span>阶段 1: 微波介电差异致热</span>
</div>
<div class="step-pill" id="btn-step-2" onclick="setCycleStep(2)">
<span class="step-dot"></span>
<span>阶段 2: 晶界剪切微裂纹扩展</span>
</div>
<div class="step-pill active-water" id="btn-step-3" onclick="setCycleStep(3)">
<span class="step-dot"></span>
<span>阶段 3: 低压射流碎屑清除</span>
</div>
</div>
<div class="dock-divider"></div>
<button class="dock-btn" id="btn-play-pause" onclick="toggleAutoPlay()">
<span id="play-icon">⏸ 暂停循环</span>
</button>
<button class="dock-btn" onclick="resetAnimationSequence()">
<span>↺ 初始重放</span>
</button>
</footer>
<script>
// 动画状态与时序引擎
let currentStep = 1;
let isAutoPlaying = true;
let cycleTimer = null;
let debrisAnimationId = null;
const drillToolGroup = document.getElementById('drill-tool-group');
const microwaveBeams = document.getElementById('microwave-beam-group');
const waterJets = document.getElementById('water-jets-group');
const damageLayer = document.getElementById('damage-layer');
const macroCracks = document.getElementById('macro-cracks');
const debrisContainer = document.getElementById('debris-container');
const microCrackNetwork = document.getElementById('micro-crack-network');
const microWaterWedge = document.getElementById('micro-water-wedge');
const biotiteHeat = document.getElementById('biotite-heat-core');
const telemetryStrength = document.getElementById('telemetry-strength');
// 动态岩屑脱落粒子
function spawnDebrisParticles() {
debrisContainer.innerHTML = '';
const particleCount = 18;
for (let i = 0; i < particleCount; i++) {
const chip = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
const x = 90 + Math.random() * 320;
const y = 300 + Math.random() * 15;
const size = 3 + Math.random() * 5;
chip.setAttribute("points", `${x},${y} ${x+size},${y+size*0.8} ${x+size*0.3},${y+size*1.5}`);
chip.setAttribute("fill", i % 2 === 0 ? "#8eb5e8" : "#e4b39b");
chip.setAttribute("opacity", "0.9");
debrisContainer.appendChild(chip);
// 碎屑剥落位移动画
let posY = y;
let posX = x;
const speedY = -(1.5 + Math.random() * 3.5);
const speedX = (Math.random() - 0.5) * 4;
let life = 1.0;
function animateChip() {
posY += speedY;
posX += speedX;
life -= 0.025;
chip.setAttribute("transform", `translate(${posX - x}, ${posY - y}) rotate(${life*180})`);
chip.setAttribute("opacity", Math.max(0, life).toString());
if (life > 0) {
requestAnimationFrame(animateChip);
} else {
chip.remove();
}
}
requestAnimationFrame(animateChip);
}
}
// 更新各个步骤的视觉状态
function applyStepVisuals(step) {
// 样式 Pill 激活状态切换
document.querySelectorAll('.step-pill').forEach((pill, idx) => {
pill.classList.remove('active', 'active-water');
if (idx + 1 === step) {
pill.classList.add(step === 3 ? 'active-water' : 'active');
}
});
if (step === 1) {
// 阶段 1: 微波高能注入，黑云母强烈加热，微波束全开，水射流关闭
microwaveBeams.style.display = 'block';
microwaveBeams.style.opacity = '1';
waterJets.style.opacity = '0.15';
damageLayer.style.opacity = '0.4';
macroCracks.style.opacity = '0.2';
microCrackNetwork.style.opacity = '0.3';
microWaterWedge.style.opacity = '0.1';
biotiteHeat.setAttribute('r', '55');
telemetryStrength.textContent = '165 MPa (-12%)';
telemetryStrength.style.color = '#ffaa33';
drillToolGroup.style.transform = 'translateY(0px)';
} else if (step === 2) {
// 阶段 2: 剪切应力超限，微裂纹网格大面积剧烈扩展，宏观骨架瓦解
microwaveBeams.style.display = 'block';
microwaveBeams.style.opacity = '0.8';
waterJets.style.opacity = '0.3';
damageLayer.style.opacity = '0.9';
macroCracks.style.opacity = '1';
microCrackNetwork.style.opacity = '1';
microWaterWedge.style.opacity = '0.4';
biotiteHeat.setAttribute('r', '65');
telemetryStrength.textContent = '95 MPa (-48%)';
telemetryStrength.style.color = '#ff3366';
drillToolGroup.style.transform = 'translateY(3px)';
} else if (step === 3) {
// 阶段 3: 低压水射流强力冲蚀剥离碎屑层，钻具顺畅向下推进
microwaveBeams.style.opacity = '0.3';
waterJets.style.opacity = '1';
damageLayer.style.opacity = '0.3';
macroCracks.style.opacity = '0.6';
microCrackNetwork.style.opacity = '0.8';
microWaterWedge.style.opacity = '1';
telemetryStrength.textContent = '80 MPa (-55% 破碎剥落)';
telemetryStrength.style.color = '#38bdf8';
drillToolGroup.style.transform = 'translateY(10px)';
spawnDebrisParticles();
}
}
function setCycleStep(step) {
currentStep = step;
applyStepVisuals(currentStep);
}
// 自动连续播放引擎（页面加载后默认自动循环）
function startAutoCycle() {
if (cycleTimer) clearInterval(cycleTimer);
cycleTimer = setInterval(() => {
currentStep = (currentStep % 3) + 1;
applyStepVisuals(currentStep);
}, 3200);
}
function toggleAutoPlay() {
isAutoPlaying = !isAutoPlaying;
const playIcon = document.getElementById('play-icon');
if (isAutoPlaying) {
playIcon.textContent = '⏸ 暂停循环';
startAutoCycle();
} else {
playIcon.textContent = '▶ 恢复播放';
if (cycleTimer) clearInterval(cycleTimer);
}
}
function resetAnimationSequence() {
currentStep = 1;
applyStepVisuals(1);
if (isAutoPlaying) {
startAutoCycle();
}
}
// 页面加载完成后立即自动执行
window.addEventListener('DOMContentLoaded', () => {
applyStepVisuals(1);
startAutoCycle();
});
// 确保在 iframe 重新激活或 Tab 返回时持续保持动画状态
document.addEventListener('visibilitychange', () => {
if (!document.hidden && isAutoPlaying) {
startAutoCycle();
}
});
</script>
</body>
</html>
积分规则：每轮对话扣10分
等待动画代码生成...