OpenAI: gpt-oss-120b 在「SVG 路径跟随过山车动画」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：OpenAI: gpt-oss-120b
  • 用例名称：SVG 路径跟随过山车动画
  • 测试类型：网页生成
  • 评测维度：SVG 矢量动画

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名前端开发工程师，擅长 SVG 动画开发。 代码要求： 1. 生成完整的单页 HTML 应用 2. CSS 和 JavaScript 内联在 HTML 文件中 3. 代码结构清晰，有适当注释

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

创建一个过山车路径动画。 功能要求： 1. 使用 SVG 绘制一条闭合的过山车轨道（包含起伏坡度，至少有一个大坡和一个小坡） 2. 一个小车图标（可用简单矩形或 emoji 表示）沿轨道循环运动 3. 小车运动过程中根据轨道切线方向自动旋转，保持与轨道坡度一致 4. 动画循环播放，速度匀速

任务要求

AI 模型需要满足以下要求：

  1. SVG 轨道路径闭合，包含明显起伏（至少一个大坡、一个小坡）
  2. 小车图标沿路径持续循环运动
  3. 小车旋转角度随轨道坡度自动调整，方向与切线一致
  4. 动画循环播放无中断
  5. 代码在单个 HTML 文件中

评测结果

综合得分

该模型在此用例的得分为：54.9 分（满分 100 分），未通过

基础难度评测结果

  • 得分：54.9 分
  • 通过状态：未通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

**完整的单页 HTML（所有 CSS、JS 都内联）** ```html SVG 过山车路径动画 /* 页面居中 */ body,html{ margin:0;padding:0; width:100%;height:100%; display:flex;justify-content:center;align-items:center; background:#111; } /* SVG 轨道样式 */ .track{ fill:none; stroke:#ffcc00; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; } /* 小车（使用 emoji） */ .car{ font-size:32px; /* 让 emoji 看起来像小车 */ transform-origin:center; /* 让 rotate 动画围绕中心点 */ } 🚗 /* 这里的 JavaScript 只负责在页面加载后让 SVG 自动聚焦， 并演示如何通过 JS 手动控制动画（如果你想改成 JS 动画的话）。 目前动画已经全部由 完成，下面的代码可视为“备用”。 */ document.addEventListener('DOMContentLoaded', () => { const svg = document.getElementById('coaster'); // 让 SVG 在页面中心（已在 CSS 中实现），这里不做额外处理 }); ``` ### 关键实现说明 | 步骤 | 说明 | |------|------| | **1️⃣ 轨道绘制** | 使用 `` 的 `d` 属性绘制闭合曲线。`C` 与 `S` 贝塞尔曲线分别实现“大坡”和“小坡”。`Z` 将路径闭合，形成环路。 | | **2️⃣ 小车** | 用 `` 放置一个 🚗 emoji，外层包裹 ``，便于统一设置 `transform-origin`。 | | **3️⃣ 沿路径运动 & 自动旋转** | `` 配合 `` 引用轨道路径。`rotate="auto"` 让小车始终沿切线方向旋转，保持与坡度一致。 | | **4️⃣ 循环 & 匀速** | `dur="12s"`（可自行调节）设定完整一圈的时长，`repeatCount="indefinite"` 实现无限循环。SVG 动画默认匀速播放。 | | **5️⃣ 样式** | 简单的暗色背景、黄色轨道、适当的 `stroke-width` 与 `font-size`，让动画在任何现代浏览器中即开即用。 | > **可自行扩展**：如果想改为纯 JavaScript 动画，只需要在 `requestAnimationFrame` 循环里使用 `path.getTotalLength()` 与 `path.getPointAtLength()` 计算位置、切线角度并手动设置 `transform: translate(...) rotate(...)`。当前实现已经满足“匀速、自动旋转、闭合轨道、循环播放”的全部需求。祝玩得开心！

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该代码存在一个致命错误：在SVG `<path>`的`d`属性字符串内部使用了HTML注释语法（`<!-- -->`），这会导致路径数据完全无法被浏览器解析，轨道不会渲染，小车动画也无法运行。这是一个基础性错误，使整个动画功能失效。从实现思路来看，作者选择了正确的技术方案——使用`<animateMotion>`+`<mpath>`+`rotate="auto"`实现路径跟随与切线旋转，路径设计也包含了大坡和小坡的意图，视觉风格设计合理。但由于上述致命语法错误，代码无法在浏览器中正常运行，整体质量较低。建议移除`d`属性中的所有注释，保留纯净的路径数据字符串即可修复主要问题。 【GEMINI】该生成结果高质量地完成了所有功能要求。代码实现简洁优雅，充分利用了 SVG 原生的动画特性（SMIL），避免了复杂的 JavaScript 手动计算，同时保证了动画的平滑度和切线旋转的准确性。文档说明清晰，是一个非常标准的前端开发示例。 【KIMI】该实现是一个简洁高效的 SVG 动画解决方案，充分利用了 SVG 原生 <animateMotion> 的 rotate="auto" 特性，以极少的代码量实现了复杂的路径跟随与自动旋转功能。代码结构清晰、注释详尽，完全符合单页 HTML 的要求。对于「过山车」主题，若能在轨道底部也使用曲线而非直线闭合，并考虑使用 SVG 绘制的矢量小车替代 emoji，视觉效果会更佳。整体而言，这是一个技术实现正确、运行稳定的高质量方案。

进阶难度评测结果

  • 得分：70.8 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

**完整的单页实现（HTML + CSS + JavaScript）** 下面的代码可以直接保存为 `coaster.html` 并在浏览器中打开。它包含： * 采用 SVG 绘制的闭合过山车轨道（包含上坡、下坡、急转弯和一个环形） * 用 SVG 手绘的小车（车厢+轮子），沿轨道循环运动并根据切线自动旋转 * 根据轨道的坡度动态调节速度（上坡慢、下坡快） * 播放 / 暂停按钮 * 0.5 × ~ 3 × 的整体速度倍率滑块 * 起点标记（小圆点），小车经过起点时会闪光 ```html SVG 过山车路径动画 html,body{margin:0;height:100%;font-family:Arial,Helvetica,sans-serif;background:#111;color:#eee;} .wrapper{display:flex;flex-direction:column;height:100%;align-items:center;justify-content:center;} svg{border:2px solid #555;background:#222;max-width:100%;height:auto;} .track{fill:none;stroke:#ff9800;stroke-width:6;stroke-linejoin:round;stroke-linecap:round;} .start-marker{fill:#ff0;stroke:#000;stroke-width:2;} .car{fill:#00bcd4;stroke:#fff;stroke-width:2;} .car .wheel{fill:#555;} .controls{margin-top:15px;display:flex;gap:15px;align-items:center;} button{background:#ff9800;border:none;padding:8px 16px;color:#fff;font-size:14px;border-radius:4px;cursor:pointer;} button:hover{background:#e68900;} input[type=range]{width:200px;} .flash{animation:flash 0.3s ease-out;} @keyframes flash{ 0% {fill:#ff0;} 100% {fill:#00bcd4;} } ⏸ 暂停 速度倍率 1.0× (() => { const svg = document.getElementById('coaster'); const track = document.getElementById('track'); const car = document.getElementById('car'); const startMark= document.getElementById('startMarker'); const playBtn = document.getElementById('playPause'); const speedSlider = document.getElementById('speedSlider'); const speedDisplay = document.getElementById('speedDisplay'); const totalLen = track.getTotalLength(); // 轨道总长度 const baseSpeed = 120; // 像素/秒（在水平段的速度） let speedMul = 1.0; // 整体倍率（由滑块控制） let progress = 0; // 当前走过的长度 let playing = true; let lastTime = null; let flashTimeout = null; // 把起点标记放到轨道起点 const startPt = track.getPointAtLength(0); startMark.setAttribute('cx', startPt.x); startMark.setAttribute('cy', startPt.y); // 播放/暂停按钮 playBtn.addEventListener('click', () => { playing = !playing; playBtn.textContent = playing ? '⏸ 暂停' : '▶ 播放'; if (playing) lastTime =...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该实现整体设计思路清晰，功能规划完整，涵盖了复杂轨道、物理速度模拟、交互控制和视觉反馈等所有要求。代码结构良好，注释详细，说明文档完善。然而存在一个关键性bug：SVG path的d属性字符串中包含了HTML注释（<!-- 上坡 & 第一次转弯 -->等），这在实际浏览器中会导致路径解析失败，整个动画核心功能将无法正常工作。这是一个严重的实现错误，大幅降低了代码的实用价值。物理速度模拟和交互控制的逻辑设计较为合理，如果修复路径问题，整体效果应该较为不错。建议移除path d属性中的注释，并验证路径的实际渲染效果。 【GEMINI】这是一个高质量的实现方案。代码结构清晰，完美覆盖了所有功能要求。特别是在物理速度模拟和切线旋转计算上表现专业，交互细节（如防止跳帧和闪烁反馈逻辑）处理得非常到位，是一个优秀的单页 Web 应用示例。 【KIMI】该实现完整覆盖了所有功能需求，代码结构清晰、内联合理，可直接运行。路径运动、切线旋转、坡度速度、交互控制等核心功能均正确实现，是一款合格的过山车动画演示。主要改进空间在于：环形结构可更完整、物理模拟可加入惯性/能量守恒、视觉呈现可增加细节丰富度。整体达到良好水平，适合作为教学演示或基础交互案例。

困难难度评测结果

  • 得分：62.5 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

**完整的单文件实现** 下面的代码把所有资源（HTML、CSS、JS、SVG）都写在同一个 `.html` 文件里，直接在浏览器打开即可体验一个 **“过山车路径动画模拟器”**。 > 代码结构概览 > * **HTML** – 页面框架、控制面板、SVG 画布 > * **CSS** – 现代布局、动画、视觉风格（Flex、变量、阴影） > * **JavaScript** – 采用 **ES6 class** + **模块化 IIFE**，逻辑清晰： > 1. `Track` 负责创建轨道、提供路径查询、装饰元素 > 2. `CoasterCar` 负责单节车厢的绘制与运动 > 3. `Coaster` 负责多节车厢的整体管理、速度/加速度计算、圈数统计、粒子特效 > 4. `UIController` 负责交互面板、事件绑定、实时数据显示 > 5. `Animator` 负责主循环、摄像机跟随、帧率控制 > 只要把下面的代码保存为 `coaster.html`，双击打开即可玩耍。 --- ```html SVG 过山车路径动画模拟器 :root { --track-color: #555; --track-width: 8; --track-offset: 4; --car-body: #ff5722; --car-wheel: #333; --particle-color: rgba(255,255,255,0.8); --bg: #111; --ui-bg: rgba(0,0,0,0.6); --ui-color: #fff; --font: 14px/1.4 "Segoe UI",Arial,sans-serif; } html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);font:var(--font);color:var(--ui-color);} #app{position:relative;width:100%;height:100%;} svg{width:100%;height:100%;display:block;} /* 双轨线条（外层） */ .track-bg{stroke:var(--track-color);stroke-width:calc(var(--track-width) + var(--track-offset)*2);stroke-linecap:round;stroke-linejoin:round;fill:none;} /* 双轨线条（内层） */ .track-fg{stroke:#222;stroke-width:var(--track-width);stroke-linecap:round;stroke-linejoin:round;fill:none;} /* 装饰元素（旗帜） */ .flag{stroke:#fff;stroke-width:1;fill:#ff0;} /* 车厢 */ .car-body{fill:var(--car-body);stroke:#000;stroke-width:0.5;} .car-wheel{fill:var(--car-wheel);stroke:#000;stroke-width:0.3;} /* 粒子（尾焰） */ .particle{fill:var(--particle-color);pointer-events:none;} /* 控制面板 */ #ui{ position:absolute;bottom:10px;left:50%;transform:translateX(-50%); background:var(--ui-bg);padding:8px 12px;border-radius:6px; display:flex;align-items:center;gap:12px; } #ui button{background:#444;color:#fff;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;} #ui button:hover{background:#555;} #ui input[type=range]{width:120px;} #ui .info{min-width:120px;text-align:right;} ▶️ 播放 ⟲ 重置 速度倍率 跟随视角 速度: 0 km/h 坡度: 0° 圈数: 0 /* ==================== 模块化代码 ==================== */ (()...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该实现在代码结构上较为清晰，采用ES6 class模块化组织，逻辑分层合理（Track/CoasterCar/Coaster/UIController），具有良好的工程意识。但在核心功能实现上存在多个关键缺陷：物理模拟中初始速度为0且baseSpeed未参与驱动逻辑，可能导致车辆无法正常运动；轨道的「完整竖向环形」实现不正确（A命令起终点Y相同形成半圆而非完整loop）；双轨线条未实现真正的平行双轨效果；视觉细节和场景感较为薄弱。整体而言，代码框架完整、交互功能基本齐全，但核心的物理模拟和视觉呈现质量未达到题目要求的「功能完善」标准，属于框架完整但实现质量中等偏下的作品。 【GEMINI】这是一个高质量的 SVG 动画实现。模型不仅完美解决了复杂的路径跟随和多车厢同步难题，还通过纯 JavaScript 手写了一个简易的物理引擎和粒子系统。代码结构模块化（Class 封装），逻辑严密，完全符合资深前端开发工程师的水平，是一个功能完备且视觉美观的交互式模拟器。 【KIMI】该实现是一个功能完整的过山车模拟器基础框架，核心交互和大部分功能要求均已实现。主要短板在于「完整竖向环形」的形态未能达到典型过山车的竖直回环标准（高度不足、曲率平缓），以及物理模型的能量守恒机制不够严谨。代码结构清晰，采用ES6 class模块化设计，可维护性良好。建议在轨道路径设计、物理引擎完善（引入势能基准和总能量守恒）以及视觉丰富度（背景环境、粒子效果升级）方面进一步优化，以更好地满足「复杂闭合路径」和「专业美观」的高标准要求。

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%