分享图
动画工坊
引擎就绪
<!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>
        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

        :root {
            --bg-color: #050508;
            --hud-cyan: #00f3ff;
            --hud-cyan-dim: rgba(0, 243, 255, 0.3);
            --hud-amber: #ffb000;
            --hud-red: #ff3333;
            --structure-dark: #1a1a24;
            --structure-mid: #2a2a35;
            --structure-light: #4a4a5a;
            --rocket-body: #e0e0e0;
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            background-color: var(--bg-color);
            background-image: 
                linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
            background-position: center center;
            font-family: 'JetBrains Mono', monospace, sans-serif;
            overflow: hidden;
            color: var(--hud-cyan);
        }

        /* 核心动画容器 */
        .animation-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
        }

        svg {
            height: 95vh;
            max-width: 100vw;
            overflow: visible;
        }

        /* HUD 文本布局：严格限制在边缘，小字号，绝对定位，无遮挡 */
        .hud-panel {
            position: absolute;
            z-index: 10;
            font-size: 12px;
            line-height: 1.6;
            pointer-events: none;
            text-shadow: 0 0 4px rgba(0, 243, 255, 0.4);
            letter-spacing: 0.5px;
        }
        
        .hud-panel.top-left { top: 20px; left: 20px; }
        .hud-panel.top-right { top: 20px; right: 20px; text-align: right; }
        .hud-panel.bottom-left { bottom: 20px; left: 20px; max-width: 300px; }
        .hud-panel.bottom-right { bottom: 20px; right: 20px; text-align: right; max-width: 300px; }

        .hud-title {
            font-weight: 700;
            font-size: 13px;
            margin-bottom: 6px;
            border-bottom: 1px solid var(--hud-cyan-dim);
            padding-bottom: 4px;
            display: inline-block;
        }

        .hud-highlight { color: #fff; font-weight: 700; text-shadow: 0 0 5px var(--hud-cyan); }
        .hud-warning { color: var(--hud-red); text-shadow: 0 0 5px rgba(255, 51, 51, 0.5); }
        .hud-amber { color: var(--hud-amber); text-shadow: 0 0 5px rgba(255, 176, 0, 0.5); }

        /* 装饰性十字准星 */
        .crosshair {
            position: absolute;
            width: 20px;
            height: 20px;
            border: 1px solid var(--hud-cyan-dim);
            z-index: 5;
        }
        .ch-tl { top: 40px; left: 40px; border-right: none; border-bottom: none; }
        .ch-tr { top: 40px; right: 40px; border-left: none; border-bottom: none; }
        .ch-bl { bottom: 40px; left: 40px; border-right: none; border-top: none; }
        .ch-br { bottom: 40px; right: 40px; border-left: none; border-top: none; }

        /* 动画定义区 (循环周期 12s) */
        
        /* 火箭主体运动 */
        .anim-rocket {
            animation: rocket-descent 12s infinite cubic-bezier(0.25, 1, 0.5, 1);
        }
        
        @keyframes rocket-descent {
            0% { transform: translateY(-900px); opacity: 1; }
            15% { transform: translateY(0px); }
            25% { transform: translateY(270px); } /* 减速 */
            35%, 60% { transform: translateY(280px); } /* 精准悬停 Y:280，此时销钉底部刚好到 Y:480 */
            65%, 85% { transform: translateY(340px); opacity: 1; } /* 机械臂接管后放下 */
            90%, 100% { transform: translateY(340px); opacity: 0; } /* 重置 */
        }

        /* 发动机尾焰 */
        .anim-flame {
            transform-origin: center top;
            animation: flame-thrust 12s infinite linear;
        }

        @keyframes flame-thrust {
            0%, 15% { transform: scaleY(2) scaleX(1.2); opacity: 1; } /* 高速反推 */
            20% { transform: scaleY(1.2) scaleX(1); opacity: 0.9; }
            25%, 35% { transform: scaleY(0.7) scaleX(0.8); opacity: 0.8; } /* 缓降/悬停推力 */
            35%, 55% { transform: scaleY(0.6) scaleX(0.7); opacity: 0.7; }
            58%, 100% { transform: scaleY(0) scaleX(0); opacity: 0; } /* 关机 */
        }

        /* 机械臂升降台 (同步火箭下放) */
        .anim-carriage {
            animation: carriage-move 12s infinite cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes carriage-move {
            0%, 60% { transform: translateY(0px); opacity: 1; } /* 保持在捕获高度 Y:480 */
            65%, 85% { transform: translateY(60px); opacity: 1; } /* 捕获后下放 */
            90%, 100% { transform: translateY(60px); opacity: 0; }
        }

        /* 左右机械臂合拢 (动作极快 > 1.5m/s) */
        .anim-arm-left { animation: arm-close-left 12s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .anim-arm-right { animation: arm-close-right 12s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275); }

        @keyframes arm-close-left {
            0%, 45% { transform: translateX(-160px); } /* 张开状态 */
            50%, 95% { transform: translateX(0px); } /* 合拢托住销钉 */
            100% { transform: translateX(-160px); }
        }
        @keyframes arm-close-right {
            0%, 45% { transform: translateX(160px); }
            50%, 95% { transform: translateX(0px); }
            100% { transform: translateX(160px); }
        }

        /* 目标锁定雷达波纹 */
        .anim-radar {
            animation: radar-ping 12s infinite linear;
            transform-origin: 400px 480px;
        }

        @keyframes radar-ping {
            0%, 35% { transform: scale(0); opacity: 0; }
            38% { transform: scale(1); opacity: 0.6; stroke-width: 2px; }
            45% { transform: scale(3); opacity: 0; stroke-width: 1px; }
            46%, 100% { transform: scale(0); opacity: 0; }
        }

        /* 激光制导线 */
        .anim-laser {
            stroke-dasharray: 10 5;
            animation: laser-scan 12s infinite linear;
        }
        @keyframes laser-scan {
            0%, 35% { opacity: 0; stroke-dashoffset: 0; }
            38%, 50% { opacity: 0.8; stroke-dashoffset: -50; }
            52%, 100% { opacity: 0; }
        }

        /* 核心承力销高亮闪烁 (突出创新点) */
        .anim-pin-glow {
            animation: pin-pulse 12s infinite alternate;
        }
        @keyframes pin-pulse {
            0%, 30% { filter: drop-shadow(0 0 2px var(--hud-cyan)); fill: var(--structure-light); }
            40%, 100% { filter: drop-shadow(0 0 15px var(--hud-cyan)) drop-shadow(0 0 5px #fff); fill: #fff; }
        }
    </style>
</head>
<body>

    <!-- 四角准星 -->
    <div class="crosshair ch-tl"></div>
    <div class="crosshair ch-tr"></div>
    <div class="crosshair ch-bl"></div>
    <div class="crosshair ch-br"></div>

    <!-- HUD 信息叠加区 -->
    <div class="hud-panel top-left">
        <div class="hud-title">SYS // 无起落架回收协议 IFR</div><br>
        阶段: <span id="hud-phase" class="hud-highlight">系统初始化</span><br>
        高度: <span id="hud-alt">10000.0</span> m<br>
        速度: <span id="hud-vel">-850.0</span> m/s<br>
        推力: <span id="hud-thrust">100</span>%
    </div>

    <div class="hud-panel top-right">
        <div class="hud-title">捕捉参数监控</div><br>
        液压伺服缓冲: <span class="hud-highlight">ON</span><br>
        机械臂合拢速度: <span class="hud-highlight">> 1.5 m/s</span><br>
        当前横向偏移: <span id="hud-offset" class="hud-cyan">0.00</span> m<br>
        允许悬停公差: ±0.50 m
    </div>

    <div class="hud-panel bottom-left">
        <div class="hud-title">TRIZ 最终理想解展示</div><br>
        <span class="hud-amber">矛盾破除：</span>消除自带起落架的巨大死重，释放有效载荷。<br>
        <span class="hud-amber">资源利用：</span>利用箭体结构加强圈设置<span class="hud-highlight">承力销</span>，将降落缓冲的复杂机构转移至地面发射塔架。
    </div>

    <div class="hud-panel bottom-right">
        <div class="hud-title">失效边界与风险限制</div><br>
        雷达视觉双伺服系统在线。<br>
        <span class="hud-warning">CRITICAL:</span> 极端悬停精度要求。若控制算法延迟导致未能实现零速度悬停，或液压臂未能按时卡入承力销，箭体将砸毁。
    </div>

    <!-- 核心 SVG 动画区 -->
    <div class="animation-container">
        <svg viewBox="0 0 800 1000" preserveAspectRatio="xMidYMid meet">
            <defs>
                <!-- 发动机尾焰渐变 -->
                <linearGradient id="flame-grad" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" stop-color="#ffffff" stop-opacity="1" />
                    <stop offset="20%" stop-color="#ffef99" stop-opacity="0.9" />
                    <stop offset="60%" stop-color="#ffb000" stop-opacity="0.6" />
                    <stop offset="100%" stop-color="#ff3333" stop-opacity="0" />
                </linearGradient>

                <!-- 火箭金属质感 -->
                <linearGradient id="rocket-grad" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" stop-color="#b0b0b0" />
                    <stop offset="20%" stop-color="#ffffff" />
                    <stop offset="80%" stop-color="#d0d0d0" />
                    <stop offset="100%" stop-color="#808080" />
                </linearGradient>

                <!-- 机械臂金属质感 -->
                <linearGradient id="arm-grad" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" stop-color="#5a5a6a" />
                    <stop offset="50%" stop-color="#3a3a4a" />
                    <stop offset="100%" stop-color="#1a1a24" />
                </linearGradient>

                <filter id="glow">
                    <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
                    <feMerge>
                        <feMergeNode in="coloredBlur"/>
                        <feMergeNode in="SourceGraphic"/>
                    </feMerge>
                </filter>
            </defs>

            <!-- 背景参考线 / 雷达网格 -->
            <g stroke="var(--hud-cyan-dim)" stroke-width="1" opacity="0.5">
                <line x1="400" y1="0" x2="400" y2="1000" stroke-dasharray="5 5" />
                <line x1="0" y1="480" x2="800" y2="480" stroke-dasharray="2 8" />
                <!-- 捕捉高度指示 -->
                <text x="410" y="475" fill="var(--hud-cyan)" font-size="10" opacity="0.8">Y-LOCK CATCH PLANE</text>
            </g>

            <!-- 目标锁定雷达波纹 (悬停时触发) -->
            <circle class="anim-radar" cx="400" cy="480" r="100" fill="none" stroke="var(--hud-cyan)" />

            <!-- 发射塔架 (左右) -->
            <g fill="var(--structure-mid)" stroke="var(--structure-dark)" stroke-width="2">
                <!-- 左塔 -->
                <rect x="120" y="100" width="80" height="900" />
                <!-- 左塔桁架结构 -->
                <path d="M120 150 L200 200 M120 250 L200 300 M120 350 L200 400 M120 450 L200 500 M120 550 L200 600 M120 650 L200 700 M120 750 L200 800" stroke="var(--structure-dark)" stroke-width="4" />
                
                <!-- 右塔 -->
                <rect x="600" y="100" width="80" height="900" />
                <!-- 右塔桁架结构 -->
                <path d="M680 150 L600 200 M680 250 L600 300 M680 350 L600 400 M680 450 L600 500 M680 550 L600 600 M680 650 L600 700 M680 750 L600 800" stroke="var(--structure-dark)" stroke-width="4" />
            </g>

            <!-- 移动机械臂平台 (承载火箭下放) -->
            <g class="anim-carriage">
                <!-- 激光制导辅助线 -->
                <line class="anim-laser" x1="200" y1="480" x2="360" y2="480" stroke="var(--hud-cyan)" stroke-width="2" />
                <line class="anim-laser" x1="600" y1="480" x2="440" y2="480" stroke="var(--hud-cyan)" stroke-width="2" />

                <!-- 左侧巨型液压臂 -->
                <g class="anim-arm-left">
                    <!-- 机械臂主体：从塔架内侧 200 伸向箭体 360 -->
                    <!-- 长度 160. 收缩状态下向左平移 -160, 伸出状态向右平移 0 -->
                    <!-- 收缩时躲在塔后，伸出时到达火箭承力销下方 (x:200 到 360, y:480, height:25) -->
                    <rect x="200" y="480" width="160" height="25" fill="url(#arm-grad)" rx="4" />
                    <!-- 液压缓冲结构细节 -->
                    <rect x="220" y="475" width="80" height="10" fill="var(--structure-light)" rx="2" />
                    <line x1="330" y1="480" x2="330" y2="505" stroke="var(--hud-cyan)" stroke-width="2" opacity="0.6" />
                </g>

                <!-- 右侧巨型液压臂 -->
                <g class="anim-arm-right">
                    <!-- 从塔架内侧 600 伸向箭体 440 -->
                    <!-- 长度 160. x: 440 -->
                    <rect x="440" y="480" width="160" height="25" fill="url(#arm-grad)" rx="4" />
                    <rect x="500" y="475" width="80" height="10" fill="var(--structure-light)" rx="2" />
                    <line x1="470" y1="480" x2="470" y2="505" stroke="var(--hud-cyan)" stroke-width="2" opacity="0.6" />
                </g>
            </g>

            <!-- 核心：火箭本体及其动画组合 -->
            <g class="anim-rocket">
                <!-- 尾焰 -->
                <g class="anim-flame" transform="translate(0, 0)">
                    <polygon points="380,520 420,520 405,750 395,750" fill="url(#flame-grad)" />
                    <polygon points="388,520 412,520 402,620 398,620" fill="#ffffff" filter="url(#glow)" />
                </g>

                <!-- 火箭主体：宽度 80 (x:360 到 440), 高度 400 -->
                <rect x="360" y="120" width="80" height="400" fill="url(#rocket-grad)" rx="10" />
                
                <!-- 表面隔热瓦与结构缝隙 -->
                <line x1="360" y1="200" x2="440" y2="200" stroke="#888" stroke-width="1" />
                <line x1="360" y1="300" x2="440" y2="300" stroke="#888" stroke-width="1" />
                <line x1="360" y1="400" x2="440" y2="400" stroke="#888" stroke-width="1" />

                <!-- 顶部栅格舵 (展开状态) -->
                <g fill="var(--structure-dark)" stroke="#aaa" stroke-width="0.5">
                    <rect x="310" y="140" width="50" height="8" rx="2" />
                    <rect x="440" y="140" width="50" height="8" rx="2" />
                </g>

                <!-- 【核心创新】: 承力销 (Load-bearing Pins) -->
                <!-- 火箭静止时销钉初始 Y 坐标：180。当火箭 translateY(280) 时，销钉底侧 Y 为 180+20+280 = 480，刚好压在机械臂上 -->
                <g class="anim-pin-glow">
                    <!-- 左侧承力销: x=330~360, y=180, 宽30, 高20 -->
                    <path d="M330 180 L360 180 L360 200 L340 200 C335 200 330 195 330 190 Z" />
                    <!-- 右侧承力销: x=440~470, y=180, 宽30, 高20 -->
                    <path d="M470 180 L440 180 L440 200 L460 200 C465 200 470 195 470 190 Z" />
                </g>
                <!-- 承力销结构加强圈 -->
                <rect x="360" y="178" width="80" height="24" fill="var(--structure-light)" opacity="0.8" />

                <!-- 底部发动机舱结构 -->
                <path d="M360 520 L375 540 L425 540 L440 520 Z" fill="var(--structure-dark)" />
            </g>

        </svg>
    </div>

    <!-- HUD 动态数据模拟脚本 -->
    <script>
        const phaseEl = document.getElementById('hud-phase');
        const altEl = document.getElementById('hud-alt');
        const velEl = document.getElementById('hud-vel');
        const thrustEl = document.getElementById('hud-thrust');
        const offsetEl = document.getElementById('hud-offset');

        function updateHUD() {
            // 动画周期 12000ms
            const t = Date.now() % 12000;
            
            // 随机横向偏移模拟
            if (t % 200 < 50) {
                const offset = (Math.random() * 0.4 - 0.2).toFixed(2);
                offsetEl.textContent = offset > 0 ? "+" + offset : offset;
                offsetEl.style.color = Math.abs(offset) > 0.3 ? "var(--hud-amber)" : "var(--hud-cyan)";
            }

            if (t < 1800) {
                // 0-1.8s: 自由落体/高速再入
                phaseEl.textContent = "超音速再入下降";
                phaseEl.className = "hud-warning";
                altEl.textContent = (10000 - (t / 1800) * 8000).toFixed(1);
                velEl.textContent = (-850 + (t / 1800) * 400).toFixed(1);
                thrustEl.textContent = "100";
            } else if (t < 3000) {
                // 1.8-3.0s: 猛烈减速
                phaseEl.textContent = "反推点火减速阶段";
                phaseEl.className = "hud-amber";
                altEl.textContent = (2000 - ((t - 1800) / 1200) * 1800).toFixed(1);
                velEl.textContent = (-450 + ((t - 1800) / 1200) * 440).toFixed(1);
                thrustEl.textContent = "80";
            } else if (t < 4200) {
                // 3.0-4.2s: 接近悬停
                phaseEl.textContent = "末端制导与位置对齐";
                phaseEl.className = "hud-highlight";
                altEl.textContent = (200 - ((t - 3000) / 1200) * 200).toFixed(1);
                velEl.textContent = (-10 + ((t - 3000) / 1200) * 10).toFixed(1);
                thrustEl.textContent = "65";
            } else if (t < 7200) {
                // 4.2-7.2s: 零速度悬停与机械臂合拢锁定 (5-6s CSS里臂合拢)
                altEl.textContent = "0.0";
                velEl.textContent = "0.0";
                if (t < 5400) {
                    phaseEl.textContent = "零速悬停 // 等待锁定";
                    phaseEl.className = "hud-amber";
                    thrustEl.textContent = "60";
                } else if (t < 6900) {
                    phaseEl.textContent = "机械臂合拢接管 // 承力销锁定";
                    phaseEl.style.color = "#00ff00";
                    phaseEl.style.textShadow = "0 0 5px #00ff00";
                    thrustEl.textContent = "55";
                } else {
                    phaseEl.textContent = "引力接管 // 发动机关机";
                    phaseEl.className = "hud-highlight";
                    thrustEl.textContent = "0";
                }
            } else if (t < 10200) {
                // 7.2-10.2s: 放置回发射台
                phaseEl.textContent = "系统安全 // 回收完成";
                phaseEl.style.color = "var(--hud-cyan)";
                altEl.textContent = "-10.0";
                velEl.textContent = "0.0";
                thrustEl.textContent = "0";
                offsetEl.textContent = "0.00";
            } else {
                // 10.2-12.0s: 重置
                phaseEl.textContent = "系统重置中...";
                phaseEl.className = "hud-highlight";
                thrustEl.textContent = "0";
            }

            requestAnimationFrame(updateHUD);
        }

        // 启动 HUD 更新循环
        updateHUD();
    </script>
</body>
</html>
积分规则：第一轮对话扣减8分，后续每轮扣6分