123 - 原理动画演示 | 萃智引擎(TRIZ Engine)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TRIZ IFR - 翻阶平稳运载系统</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/MotionPathPlugin.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;400;700&family=Noto+Sans+SC:wght@300;500;700&display=swap');

        :root {
            --bg-color: #050914;
            --grid-color: #1a2235;
            --primary-cyan: #00f0ff;
            --primary-cyan-dim: rgba(0, 240, 255, 0.2);
            --accent-amber: #ffaa00;
            --accent-amber-dim: rgba(255, 170, 0, 0.2);
            --text-main: #e2e8f0;
            --text-muted: #64748b;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: var(--bg-color);
            color: var(--text-main);
            font-family: 'Noto Sans SC', sans-serif;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        #animation-container {
            width: 100%;
            height: 100%;
            max-width: 1600px;
            position: relative;
        }

        svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        .tech-text {
            font-family: 'JetBrains Mono', monospace;
        }

        /* Micro UI Overlays - Kept absolutely minimal and at edges */
        .hud-panel {
            position: absolute;
            pointer-events: none;
            padding: 1rem;
            border-left: 2px solid var(--primary-cyan);
            background: linear-gradient(90deg, rgba(0, 240, 255, 0.05) 0%, transparent 100%);
        }

        .hud-panel.top-left { top: 2rem; left: 2rem; }
        .hud-panel.bottom-right { bottom: 2rem; right: 2rem; border-left: none; border-right: 2px solid var(--accent-amber); background: linear-gradient(-90deg, rgba(255, 170, 0, 0.05) 0%, transparent 100%); text-align: right;}

        .hud-title { font-size: 0.875rem; font-weight: 700; color: var(--primary-cyan); letter-spacing: 0.1em; margin-bottom: 0.25rem; }
        .hud-title.amber { color: var(--accent-amber); }
        .hud-desc { font-size: 0.7rem; color: var(--text-muted); line-height: 1.4; max-width: 200px; }
        .hud-data { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--text-main); margin-top: 0.5rem; }

        /* SVG Styles */
        .grid-line { stroke: var(--grid-color); stroke-width: 1; }
        .stair-path { fill: none; stroke: #1e293b; stroke-width: 4; stroke-linejoin: miter; }
        .stair-fill { fill: #0f172a; }
        
        .mech-line { fill: none; stroke: var(--primary-cyan); stroke-width: 2; stroke-linecap: round; }
        .mech-fill { fill: rgba(0, 240, 255, 0.1); stroke: var(--primary-cyan); stroke-width: 1; }
        .mech-accent { fill: none; stroke: var(--accent-amber); stroke-width: 2; }
        
        .wheel-tire { fill: #1e293b; stroke: var(--primary-cyan); stroke-width: 1.5; }
        .wheel-hub { fill: var(--primary-cyan); }
        .star-arm { stroke: var(--accent-amber); stroke-width: 4; stroke-linecap: round; }
        .star-center { fill: var(--bg-color); stroke: var(--accent-amber); stroke-width: 2; }

        .cargo-box { fill: #0f172a; stroke: #fff; stroke-width: 1.5; }
        .cargo-goods { fill: rgba(255, 255, 255, 0.8); }
        .arc-rail { fill: none; stroke: var(--text-muted); stroke-width: 4; stroke-dasharray: 4 4; }
        .arc-active { fill: none; stroke: var(--primary-cyan); stroke-width: 2; filter: drop-shadow(0 0 5px var(--primary-cyan)); }
        
        .force-vector { fill: none; stroke: var(--accent-amber); stroke-width: 1.5; marker-end: url(#arrow-amber); }
        .sensor-ring { fill: none; stroke: var(--accent-amber); stroke-width: 1; opacity: 0; }

        .glow { filter: drop-shadow(0 0 8px var(--primary-cyan)); }
        .glow-amber { filter: drop-shadow(0 0 10px var(--accent-amber)); }
    </style>
</head>
<body>

    <div id="animation-container">
        <!-- Minimal UI Overlays -->
        <div class="hud-panel top-left">
            <div class="hud-title">TRIZ IFR 最终理想解</div>
            <div class="hud-desc">利用矛盾要素（不规则台阶的物理阻力）作为系统翻滚的支点动力；利用势能与重力配合弧形导轨维持载荷零倾角。</div>
            <div class="hud-data">
                SYS_STATE: <span id="sys-state" style="color:var(--primary-cyan)">APPROACH</span><br>
                TILT_COMP: <span id="tilt-comp">0.00</span>°
            </div>
        </div>

        <div class="hud-panel bottom-right">
            <div class="hud-title amber">三角星形轮组 / 弧形减振</div>
            <div class="hud-desc" style="margin-left: auto;">以极少活动部件实现连续翻越。电机堵转0.3s保护激活翻转逻辑。单轮D110mm，翻转载距170mm。</div>
            <div class="hud-data">
                FRONT_TORQUE: <span id="torque-val">0.00</span> Nm<br>
                STEP_H: 155mm MAX
            </div>
        </div>

        <svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice">
            <defs>
                <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                    <path d="M 40 0 L 0 0 0 40" fill="none" class="grid-line" />
                </pattern>
                <marker id="arrow-amber" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                    <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--accent-amber)" />
                </marker>
                
                <!-- Tri-Star Wheel Assembly Template -->
                <g id="tri-star-assy">
                    <circle cx="0" cy="0" r="45" class="sensor-ring" id="sensor-front" />
                    <!-- Arms -->
                    <line x1="0" y1="0" x2="0" y2="-45" class="star-arm" />
                    <line x1="0" y1="0" x2="38.97" y2="22.5" class="star-arm" />
                    <line x1="0" y1="0" x2="-38.97" y2="22.5" class="star-arm" />
                    <!-- Wheels (D=110mm -> R=15 roughly for scale) -->
                    <g transform="translate(0, -45)"><circle cx="0" cy="0" r="15" class="wheel-tire"/><circle cx="0" cy="0" r="3" class="wheel-hub"/></g>
                    <g transform="translate(38.97, 22.5)"><circle cx="0" cy="0" r="15" class="wheel-tire"/><circle cx="0" cy="0" r="3" class="wheel-hub"/></g>
                    <g transform="translate(-38.97, 22.5)"><circle cx="0" cy="0" r="15" class="wheel-tire"/><circle cx="0" cy="0" r="3" class="wheel-hub"/></g>
                    <!-- Center Hub -->
                    <circle cx="0" cy="0" r="8" class="star-center" />
                    <circle cx="0" cy="0" r="3" fill="var(--accent-amber)" />
                </g>
            </defs>

            <!-- Background -->
            <rect width="100%" height="100%" fill="url(#grid)" />

            <!-- Environment: Stairs -->
            <!-- Step height approx 100px, depth 200px for visual clarity -->
            <path class="stair-fill" d="M 0 800 L 1200 800 L 1200 700 L 950 700 L 950 580 L 700 580 L 700 460 L 450 460 L 450 340 L 0 340 Z" />
            <path class="stair-path" d="M -50 700 L 950 700 L 950 580 L 700 580 L 700 460 L 450 460 L 450 340 L 0 340" />
            
            <!-- Dimensional Lines / Tech accents -->
            <g class="tech-text" font-size="10" fill="var(--text-muted)">
                <line x1="720" y1="580" x2="720" y2="460" stroke="var(--text-muted)" stroke-dasharray="2 2" />
                <text x="730" y="525">H: 155mm (Δh MAX)</text>
            </g>

            <!-- Main Rover Group -->
            <g id="rover-master" transform="translate(1050, 685)">
                <!-- Virtual center for arc motion (far below the vehicle) -->
                <!-- The chassis -->
                <g id="chassis-group">
                    <!-- Base frame -->
                    <path d="M -140 -20 L 140 -20 L 120 -50 L -120 -50 Z" class="mech-fill" />
                    <line x1="-140" y1="-20" x2="140" y2="-20" class="mech-line" />
                    
                    <!-- Arc Rail system on chassis -->
                    <!-- R=200, center at (0, -220) relative to chassis -->
                    <path d="M -80 -70 A 200 200 0 0 0 80 -70" class="arc-rail" />
                    <path d="M -80 -70 A 200 200 0 0 0 80 -70" class="arc-active" stroke-dasharray="100 200" stroke-dashoffset="50" id="arc-highlight" />
                    <path d="M -70 -75 L -90 -65 M 70 -75 L 90 -65" stroke="var(--text-muted)" stroke-width="2" /> <!-- end stops -->
                    
                    <!-- Front Tri-Star -->
                    <g id="front-star" transform="translate(-140, 0)">
                        <use href="#tri-star-assy" />
                        <!-- Torque visualizer -->
                        <path id="torque-arrow-f" d="M -30 -30 A 42 42 0 0 1 30 -30" fill="none" stroke="var(--accent-amber)" stroke-width="2" marker-end="url(#arrow-amber)" opacity="0" />
                    </g>
                    
                    <!-- Rear Tri-Star -->
                    <g id="rear-star" transform="translate(140, 0)">
                        <use href="#tri-star-assy" />
                        <path id="torque-arrow-r" d="M -30 -30 A 42 42 0 0 1 30 -30" fill="none" stroke="var(--accent-amber)" stroke-width="2" marker-end="url(#arrow-amber)" opacity="0" />
                    </g>

                    <!-- Drive shaft/connector line -->
                    <line x1="-140" y1="0" x2="140" y2="0" stroke="var(--primary-cyan)" stroke-width="4" stroke-dasharray="5 5" opacity="0.5" />

                    <!-- Cargo Assembly (Mounted on the arc rail) -->
                    <!-- transformOrigin will be set via GSAP to create the arc swing -->
                    <g id="cargo-assembly">
                        <!-- Connecting struts to arc -->
                        <line x1="-60" y1="-76" x2="-60" y2="-100" class="mech-line" />
                        <line x1="60" y1="-76" x2="60" y2="-100" class="mech-line" />
                        <circle cx="-60" cy="-7