独立渲染引擎就绪引擎就绪
<!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-base: #060913;
--bg-glow: #111a30;
--grid-line: rgba(30, 41, 59, 0.4);
--color-motor: #38bdf8;
--color-clutch-engage: #10b981;
--color-clutch-slip: #f43f5e;
--color-spring: #f59e0b;
--color-brake: #a855f7;
--color-arm: #e2e8f0;
--color-text-main: #94a3b8;
--color-text-hl: #f8fafc;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--bg-base);
background-image:
radial-gradient(circle at 50% 50%, var(--bg-glow) 0%, transparent 60%),
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 100% 100%, 40px 40px, 40px 40px;
background-position: center center, center center, center center;
color: var(--color-text-main);
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
overflow: hidden;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* 核心动画容器，占满屏幕但保留内边距以防遮挡 */
#animation-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
svg {
width: 100%;
height: 100%;
max-width: 1200px;
max-height: 800px;
filter: drop-shadow(0 0 20px rgba(0,0,0,0.5));
}
/* 边缘悬浮UI面板 - 严格限制绝对定位与小字号 */
.hud-panel {
position: absolute;
background: rgba(10, 15, 30, 0.7);
border: 1px solid rgba(56, 189, 248, 0.2);
backdrop-filter: blur(8px);
border-radius: 4px;
padding: 12px;
font-size: 12px;
line-height: 1.5;
z-index: 20;
box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
.hud-panel h1, .hud-panel h2 {
font-size: 14px;
color: var(--color-text-hl);
margin-bottom: 8px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding-bottom: 4px;
}
.top-left { top: 20px; left: 20px; width: 280px; }
.top-right { top: 20px; right: 20px; width: 240px; }
.bottom-left { bottom: 20px; left: 20px; width: 320px; }
.bottom-right { bottom: 20px; right: 20px; width: 240px; }
.data-row {
display: flex;
justify-content: space-between;
margin: 4px 0;
border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.data-label { color: #64748b; }
.data-value { font-weight: bold; font-family: monospace; }
.status-indicator {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
}
/* 状态颜色类 */
.color-motor { color: var(--color-motor); }
.color-brake { color: var(--color-brake); }
.color-spring { color: var(--color-spring); }
.color-engage { color: var(--color-clutch-engage); }
.color-slip { color: var(--color-clutch-slip); }
/* SVG 动画特效 */
@keyframes dashRotate {
to { stroke-dashoffset: -40; }
}
.flow-line {
stroke-dasharray: 4 6;
animation: dashRotate 1s linear infinite;
}
.pulse-glow {
transition: all 0.3s ease;
}
</style>
</head>
<body>
<!-- 绝对边缘 UI 层 -->
<div class="hud-panel top-left">
<h1>TRIZ 最终理想解 (IFR)</h1>
<p style="color:#94a3b8; margin-bottom: 8px;">引入超越离合器，消除大扭矩传动与瞬间释放之间的物理矛盾。利用现有资源实现零拖拽解耦。</p>
<div class="data-row"><span class="data-label">核心机制:</span> <span class="data-value color-engage">单向轴承定向锁定</span></div>
<div class="data-row"><span class="data-label">矛盾破除:</span> <span class="data-value color-slip">反转时彻底物理滑脱</span></div>
</div>
<div class="hud-panel top-right">
<h2>系统实时遥测</h2>
<div class="data-row">
<span class="data-label">工作阶段:</span>
<span class="data-value" id="sys-phase">待机</span>
</div>
<div class="data-row">
<span class="data-label">电机角度(Outer):</span>
<span class="data-value" id="sys-motor-ang">0.0°</span>
</div>
<div class="data-row">
<span class="data-label">主轴角度(Inner):</span>
<span class="data-value" id="sys-shaft-ang">0.0°</span>
</div>
<div class="data-row">
<span class="data-label">弹簧势能:</span>
<span class="data-value" id="sys-spring-en">0%</span>
</div>
</div>
<div class="hud-panel bottom-left">
<h2>关键部件时序状态</h2>
<div class="data-row">
<span class="data-label">[M] 电机减速箱:</span>
<span class="data-value color-motor" id="st-motor">停机</span>
</div>
<div class="data-row">
<span class="data-label">[C] 单向轴承 (IFR焦点):</span>
<span class="data-value" id="st-clutch">空转</span>
</div>
<div class="data-row">
<span class="data-label">[B] 常闭式电磁抱闸:</span>
<span class="data-value color-brake" id="st-brake">抱死锁定</span>
</div>
<div class="data-row">
<span class="data-label">[S] 高扭矩扭转弹簧:</span>
<span class="data-value color-spring" id="st-spring">静态</span>
</div>
</div>
<div class="hud-panel bottom-right">
<h2>工程参数边界</h2>
<div class="data-row"><span class="data-label">单向滑脱扭矩:</span> <span class="data-value">≥ 150 N·m</span></div>
<div class="data-row"><span class="data-label">电磁保持扭矩:</span> <span class="data-value">80 N·m</span></div>
<div class="data-row"><span class="data-label">弹簧预紧角:</span> <span class="data-value">15°</span></div>
<div class="data-row"><span class="data-label">响应延迟:</span> <span class="data-value">< 50ms</span></div>
</div>
<!-- 核心 SVG 动画区 -->
<div id="animation-container">
<svg viewBox="0 0 1000 600" preserveAspectRatio="xMidYMid meet">
<!-- 滤镜定义 -->
<defs>
<filter id="glow-motor" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="5" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<filter id="glow-engage" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="6" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<filter id="glow-slip" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- 中心坐标系背景 -->
<g transform="translate(400, 300)" stroke="rgba(255,255,255,0.05)" stroke-width="1">
<line x1="-300" y1="0" x2="300" y2="0" />
<line x1="0" y1="-250" x2="0" y2="250" />
<circle cx="0" cy="0" r="150" fill="none" />
<circle cx="0" cy="0" r="220" fill="none" stroke-dasharray="5 15" />
</g>
<!-- 结构连线 (概念抽象) -->
<path d="M 400,300 L 750,300" stroke="rgba(255,255,255,0.1)" stroke-width="2" id="arm-base-line" />
<!-- 主动画轴心组 (位于 400, 300) -->
<g transform="translate(400, 300)">
<!-- 扭转弹簧可视化指示器 (最外层) -->
<path id="spring-track" d="M 180,0 A 180,180 0 0,0 0,-180" fill="none" stroke="#334155" stroke-width="6" stroke-linecap="round"/>
<path id="spring-fill" d="M 180,0 A 180,180 0 0,0 0,-180" fill="none" stroke="var(--color-spring)" stroke-width="6" stroke-linecap="round" stroke-dasharray="283" stroke-dashoffset="283" filter="url(#glow-motor)" />
<text x="140" y="-140" fill="var(--color-spring)" font-size="10" font-weight="bold" id="spring-label" opacity="0">SPRING TENSION</text>
<!-- 电磁抱闸指示器 (固定在外部) -->
<g id="brake-caliper">
<path d="M -25,-105 L 25,-105 L 15,-85 L -15,-85 Z" fill="#1e293b" stroke="var(--color-brake)" stroke-width="2" />
<path d="M -25,105 L 25,105 L 15,85 L -15,85 Z" fill="#1e293b" stroke="var(--color-brake)" stroke-width="2" />
<circle cx="0" cy="-95" r="3" fill="var(--color-brake)" />
<circle cx="0" cy="95" r="3" fill="var(--color-brake)" />
<!-- 抱死波纹 -->
<circle cx="0" cy="0" r="90" fill="none" stroke="var(--color-brake)" stroke-width="4" id="brake-glow" opacity="0.8" stroke-dasharray="10 10"/>
</g>
<!-- 电机驱动外环 (Outer Ring) -->
<g id="outer-rotor">
<circle cx="0" cy="0" r="85" fill="#0f172a" stroke="#1e293b" stroke-width="15" />
<!-- 齿轮齿 -->
<circle cx="0" cy="0" r="95" fill="none" stroke="#38bdf8" stroke-width="4" stroke-dasharray="8 12" />
<circle cx="0" cy="0" r="77" fill="none" stroke="#475569" stroke-width="2" />
<!-- 驱动指示标识 -->
<polygon points="70,-10 85,0 70,10" fill="#38bdf8" opacity="0.8" />
<polygon points="-70,10 -85,0 -70,-10" fill="#38bdf8" opacity="0.8" />
<polygon points="-10,-70 0,-85 10,-70" fill="#38bdf8" opacity="0.8" />
<polygon points="10,70 0,85 -10,70" fill="#38bdf8" opacity="0.8" />
</g>
<!-- 主轴与杆件 (Inner Ring) -->
<g id="inner-rotor">
<!-- 杆件 (Arm) - 跟随内环旋转 -->
<g id="barrier-arm">
<!-- 杆身 -->
<path d="M 40,-12 L 350,-6 L 350,6 L 40,12 Z" fill="#1e293b" stroke="#334155" stroke-width="2" />
<!-- 杆身荧光带 -->
<path d="M 60,-3 L 340,-1 L 340,1 L 60,3 Z" fill="#e2e8f0" id="arm-glow" />
<!-- 警告纹理 -->
<line x1="100" y1="-8" x2="110" y2="8" stroke="#000" stroke-width="3" />
<line x1="120" y1="-8" x2="130" y2="8" stroke="#000" stroke-width="3" />
<line x1="140" y1="-7" x2="150" y2="7" stroke="#000" stroke-width="3" />
<!-- 载荷标识 -->
<text x="320" y="-15" fill="#94a3b8" font-size="10">LOAD</text>
</g>
<!-- 内环本体 -->
<circle cx="0" cy="0" r="55" fill="#1e293b" stroke="#94a3b8" stroke-width="3" />
<circle cx="0" cy="0" r="20" fill="#0f172a" stroke="#64748b" stroke-width="2" />
<!-- 楔块/滚柱 (Sprags - 位于内外环之间 R=66) -->
<g id="sprags-container">
<!-- 由JS动态生成8个滚柱 -->
</g>
</g>
<!-- 摩擦/滑脱特效层 -->
<circle cx="0" cy="0" r="66" fill="none" stroke="var(--color-clutch-slip)" stroke-width="12" id="slip-effect" opacity="0" stroke-dasharray="20 40" />
</g>
<!-- 右上角概念原理图 (Abstract Flow) -->
<g transform="translate(680, 50)" id="schematic-view">
<rect x="0" y="0" width="280" height="100" fill="rgba(15, 23, 42, 0.6)" rx="4" stroke="#1e293b" />
<text x="10" y="20" fill="#64748b" font-size="10">动力流向拓扑图</text>
<g transform="translate(20, 50)">
<!-- 节点框 -->
<rect x="0" y="-15" width="40" height="30" fill="#0f172a" stroke="var(--color-motor)" rx="2" id="node-M" />
<text x="20" y="4" fill="var(--color-text-hl)" font-size="11" text-anchor="middle">电机</text>
<rect x="70" y="-15" width="40" height="30" fill="#0f172a" stroke="#64748b" rx="2" id="node-C" />
<text x="90" y="4" fill="var(--color-text-hl)" font-size="11" text-anchor="middle">离合</text>
<rect x="140" y="-15" width="40" height="30" fill="#0f172a" stroke="var(--color-brake)" rx="2" id="node-B" />
<text x="160" y="4" fill="var(--color-text-hl)" font-size="11" text-anchor="middle">抱闸</text>
<rect x="210" y="-15" width="40" height="30" fill="#0f172a" stroke="#64748b" rx="2" id="node-S" />
<text x="230" y="4" fill="var(--color-text-hl)" font-size="11" text-anchor="middle">弹簧</text>
<!-- 连接线 -->
<line x1="40" y1="0" x2="70" y2="0" stroke="#334155" stroke-width="2" />
<line x1="110" y1="0" x2="140" y2="0" stroke="#334155" stroke-width="2" />
<line x1="180" y1="0" x2="210" y2="0" stroke="#334155" stroke-width="2" />
<!-- 动能流指示 -->
<line x1="40" y1="0" x2="70" y2="0" stroke="var(--color-motor)" stroke-width="2" id="flow-M-C" class="flow-line" opacity="0" />
<line x1="110" y1="0" x2="140" y2="0" stroke="var(--color-clutch-engage)" stroke-width="2" id="flow-C-B" class="flow-line" opacity="0" />
<line x1="180" y1="0" x2="210" y2="0" stroke="var(--color-spring)" stroke-width="2" id="flow-B-S" class="flow-line" opacity="0" />
</g>
</g>
</svg>
</div>
<script>
// DOM 元素引用
const outerRotor = document.getElementById('outer-rotor');
const innerRotor = document.getElementById('inner-rotor');
const spragsContainer = document.getElementById('sprags-container');
const springFill = document.getElementById('spring-fill');
const springLabel = document.getElementById('spring-label');
const brakeGlow = document.getElementById('brake-glow');
const brakeCaliper = document.getElementById('brake-caliper');
const armGlow = document.getElementById('arm-glow');
const slipEffect = document.getElementById('slip-effect');
// UI 文本引用
const uiPhase = document.getElementById('sys-phase');
const uiMotorAng = document.getElementById('sys-motor-ang');
const uiShaftAng = document.getElementById('sys-shaft-ang');
const uiSpringEn = document.getElementById('sys-spring-en');
const stMotor = document.getElementById('st-motor');
const stClutch = document.getElementById('st-clutch');
const stBrake = document.getElementById('st-brake');
const stSpring = document.getElementById('st-spring');
const flowMC = document.getElementById('flow-M-C');
const flowCB = document.getElementById('flow-C-B');
const flowBS = document.getElementById('flow-B-S');
const nodeC = document.getElementById('node-C');
const nodeB = document.getElementById('node-B');
// 初始化生成 8 个楔块(滚柱)
const numSprags = 8;
const spragRadius = 66;
const sprags = [];
for (let i = 0; i < numSprags; i++) {
const angle = (i * 360) / numSprags;
const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
// 将中心移动到轨道半径上
g.setAttribute("transform", `rotate(${angle}) translate(${spragRadius}, 0)`);
const ellipse = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
ellipse.setAttribute("cx", "0");
ellipse.setAttribute("cy", "0");
ellipse.setAttribute("rx", "6");
ellipse.setAttribute("ry", "10"); // 稍长的椭圆，用于展示楔入(倾斜)
ellipse.setAttribute("fill", "#64748b");
ellipse.setAttribute("stroke", "#0f172a");
ellipse.setAttribute("stroke-width", "1");
g.appendChild(ellipse);
spragsContainer.appendChild(g);
sprags.push({ el: ellipse, baseAngle: angle });
}
// 动画缓动函数
function easeInOutCubic(x) {
return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
}
function easeOutBounce(x) {
const n1 = 7.5625;
const d1 = 2.75;
if (x < 1 / d1) return n1 * x * x;
else if (x < 2 / d1) return n1 * (x -= 1.5 / d1) * x + 0.75;
else if (x < 2.5 / d1) return n1 * (x -= 2.25 / d1) * x + 0.9375;
else return n1 * (x -= 2.625 / d1) * x + 0.984375;
}
// 核心动画循环状态机
const CYCLE_TIME = 8000;
function updateFrame(timestamp) {
// 计算当前周期内的相对时间 (0 - 8000)
const t = timestamp % CYCLE_TIME;
const cycleCount = Math.floor(timestamp / CYCLE_TIME);
const baseMotorAngle = cycleCount * -90; // 电机每周期累计转-90度
let motorAngle = baseMotorAngle;
let shaftAngle = 0;
let phaseName = "";
let clutchState = "idle"; // idle, engage, slip
let brakeState = "locked";
let tension = 0;
// Phase 1: 抬杆蓄能 (0 - 2000ms)
if (t >= 0 && t < 2000) {
let progress = t / 2000;
let ease = easeInOutCubic(progress);
let delta = -90 * ease;
motorAngle = baseMotorAngle + delta;
shaftAngle = delta;
tension = ease;
phaseName = "升杆蓄能 (电机正转)";
clutchState = "engage";
brakeState = "release";
}
// Phase 2: 抱死保持 (2000 - 4500ms)
else if (t >= 2000 && t < 4500) {
motorAngle = baseMotorAngle - 90;
shaftAngle = -90;
tension = 1;
phaseName = "高位保持 (断电锁死)";
clutchState = "idle";
brakeState = "locked";
}
// Phase 3: 释放解耦落杆 (4500 - 6000ms) - 重点展示 IFR
else if (t >= 4500 && t < 6000) {
let progress = (t - 4500) / 1500;
let ease = Math.min(progress * 1.5, 1); // 快速释放
let bounceEase = easeOutBounce(ease);
motorAngle = baseMotorAngle - 90; // 电机保持不动！核心解耦展示！
shaftAngle = -90 + (90 * bounceEase);
tension = 1 - bounceEase;
phaseName = "断电解耦 (弹簧反转)";
clutchState = "slip";
brakeState = "release";
}
// Phase 4: 静止复位 (6000 - 8000ms)
else {
motorAngle = baseMotorAngle - 90;
shaftAngle = 0;
tension = 0;
phaseName = "低位休眠 (待机)";
clutchState = "idle";
brakeState = "locked";
}
// ================= 视觉属性更新 =================
// 1. 旋转更新
outerRotor.setAttribute('transform', `rotate(${motorAngle})`);
innerRotor.setAttribute('transform', `rotate(${shaftAngle})`);
// 2. UI 数值更新
uiPhase.textContent = phaseName;
uiMotorAng.textContent = Math.abs(motorAngle % 360).toFixed(1) + '°';
uiShaftAng.textContent = Math.abs(shaftAngle).toFixed(1) + '°';
uiSpringEn.textContent = Math.round(tension * 100) + '%';
// 3. 弹簧视觉 (弧线长度通过 dashoffset 控制, 总长 283)
const dashOffset = 283 - (283 * tension);
springFill.setAttribute('stroke-dashoffset', dashOffset);
springLabel.setAttribute('opacity', tension > 0.1 ? 1 : 0);
// 4. 离合器状态可视化 (楔块倾斜 & 颜色)
sprags.forEach(s => {
let tilt = 0;
let color = "#64748b";
let stroke = "#0f172a";
if (clutchState === 'engage') {
tilt = -25; // 咬合倾角
color = "var(--color-clutch-engage)";
stroke = "#fff";
} else if (clutchState === 'slip') {
tilt = 15; // 滑脱倾角
color = "var(--color-clutch-slip)";
stroke = "#000";
}
s.el.setAttribute('transform', `rotate(${tilt})`);
s.el.setAttribute('fill', color);
s.el.setAttribute('stroke', stroke);
});
if (clutchState === 'engage') {
stClutch.innerHTML = '<span class="status-indicator" style="background:var(--color-clutch-engage)"></span>咬合传动';
stClutch.className = "data-value color-engage";
nodeC.setAttribute('stroke', 'var(--color-clutch-engage)');
slipEffect.setAttribute('opacity', '0');
} else if (clutchState === 'slip') {
stClutch.innerHTML = '<span class="status-indicator" style="background:var(--color-clutch-slip)"></span>超越打滑 (IFR)';
stClutch.className = "data-value color-slip";
nodeC.setAttribute('stroke', 'var(--color-clutch-slip)');
slipEffect.setAttribute('opacity', '1');
slipEffect.style.transform = `rotate(${-shaftAngle * 2}deg)`; // 增加滑脱摩擦动感
} else {
stClutch.innerHTML = '<span class="status-indicator" style="background:#64748b"></span>空转待机';
stClutch.className = "data-value";
nodeC.setAttribute('stroke', '#64748b');
slipEffect.setAttribute('opacity', '0');
}
// 5. 抱闸状态
if (brakeState === 'locked') {
stBrake.innerHTML = '<span class="status-indicator" style="background:var(--color-brake)"></span>断电抱死';
stBrake.className = "data-value color-brake";
brakeGlow.setAttribute('opacity', '0.8');
nodeB.setAttribute('stroke', 'var(--color-brake)');
} else {
stBrake.innerHTML = '<span class="status-indicator" style="background:#64748b"></span>通电松开';
stBrake.className = "data-value";
brakeGlow.setAttribute('opacity', '0');
nodeB.setAttribute('stroke', '#64748b');
}
// 6. 电机与弹簧文本状态
if (t >= 0 && t < 2000) {
stMotor.innerHTML = '<span class="status-indicator" style="background:var(--color-motor)"></span>正转做功';
stSpring.innerHTML = '蓄能扭紧 (能量↑)';
stSpring.className = "data-value color-spring";
armGlow.setAttribute('fill', 'var(--color-motor)');
flowMC.setAttribute('opacity', '1');
flowCB.setAttribute('opacity', '1');
flowBS.setAttribute('opacity', '1');
} else if (t >= 4500 && t < 6000) {
stMotor.innerHTML = '<span class="status-indicator" style="background:#64748b"></span>停机不动';
stSpring.innerHTML = '瞬间释放 (能量↓)';
stSpring.className = "data-value color-slip";
armGlow.setAttribute('fill', 'var(--color-clutch-slip)');
flowMC.setAttribute('opacity', '0');
flowCB.setAttribute('opacity', '0');
flowBS.setAttribute('opacity', '1');
flowBS.setAttribute('stroke', 'var(--color-clutch-slip)');
} else {
stMotor.innerHTML = '<span class="status-indicator" style="background:#64748b"></span>停机';
stSpring.innerHTML = tension > 0.5 ? '满载维持' : '静态松弛';
stSpring.className = "data-value";
armGlow.setAttribute('fill', '#e2e8f0');
flowMC.setAttribute('opacity', '0');
flowCB.setAttribute('opacity', '0');
flowBS.setAttribute('opacity', '0');
flowBS.setAttribute('stroke', 'var(--color-spring)');
}
// 继续下一帧
requestAnimationFrame(updateFrame);
}
// 页面加载完成后自动启动动画
window.addEventListener('DOMContentLoaded', () => {
requestAnimationFrame(updateFrame);
});
</script>
</body>
</html>
积分规则：第一轮对话扣减8分，后续每轮扣6分
等待动画代码生成...