Mistral: Mistral Nemo 在「SVG 路径跟随飞行轨迹动画」的评测结果

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

基本信息

  • 模型名称：Mistral: Mistral Nemo
  • 用例名称：SVG 路径跟随飞行轨迹动画
  • 测试类型：网页生成
  • 评测维度：SVG 矢量动画

系统提示词（System Prompt）

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

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

用户提示词（User Prompt）

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

创建一个小飞机沿 SVG 曲线路径飞行的动画。 功能要求： - 在页面中定义一条可见的 SVG 曲线路径（使用贝塞尔曲线，路径需有明显弯曲） - 一架小飞机（可用简单 SVG 图形或 emoji 表示）沿该路径匀速循环运动 - 飞机运动时朝向自动跟随路径切线方向旋转 - 动画持续循环播放，无需用户交互

任务要求

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

  1. 页面中有一条可见的 SVG 曲线路径
  2. 飞机元素能沿路径完整运动一圈并循环
  3. 飞机朝向随路径切线方向自动旋转
  4. 动画持续循环，无卡顿

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

Plane Animation body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } #plane { position: absolute; width: 30px; height: 30px; transform-origin: center center; } #path { fill: none; stroke: #000; stroke-width: 2; } const plane = document.getElementById('plane'); const path = document.getElementById('path'); const length = path.getTotalLength(); plane.style.transformOrigin = `${plane.offsetWidth / 2}px ${plane.offsetHeight / 2}px`; plane.start = setInterval(() => { const point = path.getPointAtLength(Math.random() * length); plane.style.transform = `translate(${point.x}px, ${point.y}px) rotate(${path.getRotationAtLength(Math.random() * length)}deg)`; }, 50);

AI 评审点评

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

【CLAUDE】该实现存在多处严重错误：1）使用了不存在的API「getRotationAtLength」导致JS报错；2）飞机运动逻辑使用随机位置而非匀速递增，无法实现路径跟随；3）路径定义超出SVG画布范围；4）animateTransform配置无效。代码整体无法实现题目要求的路径跟随动画功能，属于功能性失败的实现。正确做法应使用requestAnimationFrame或CSS animation配合offset-path/motion-path，或通过getPointAtLength递增参数+atan2计算角度来实现。 【GEMINI】模型未能完成核心任务。代码中存在严重的逻辑错误，包括使用随机数代替路径插值，以及调用了浏览器 SVG API 中并不存在的「getRotationAtLength」方法。该实现无法达到「沿路径运动」及「自动调整朝向」的基本功能要求，代码无法正常运行。 【KIMI】该实现存在根本性技术错误：使用了不存在的 SVG API 方法 `getRotationAtLength()`，SMIL 动画 `to="auto"` 语法错误，且运动逻辑采用随机位置而非连续路径插值，导致核心功能完全失效。代码混合了 SMIL 动画和 JavaScript 动画但两者均未正确配置，存在冲突。需要完全重写：应使用 `requestAnimationFrame` 配合 `getPointAtLength()` 计算连续位置，通过相邻点计算切线角度实现旋转，或正确使用 SMIL 的 `<animateMotion>` 配合 `rotate="auto"` 实现。

进阶难度评测结果

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

模型生成产物

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

Here's a simple HTML application that meets your requirements. I've used GSAP (GreenSock Animation Platform) for the animations and interactions. Make sure to include the GSAP library in your project or use a CDN. ```html Plane Animation body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #f0f0f0; } #path { stroke-dasharray: 5; stroke: #000; fill: transparent; } #plane { width: 30px; height: 30px; } #progress { font-size: 2rem; } #controls { display: flex; justify-content: space-between; width: 200px; margin-top: 2rem; } #controls button { padding: 0.5rem 1rem; } 0% Play Speed Up Speed Down const path = document.getElementById('path'); const plane = document.getElementById('plane'); const progress = document.getElementById('progress'); const playPauseBtn = document.getElementById('playPause'); const speedUpBtn = document.getElementById('speedUp'); const speedDownBtn = document.getElementById('speedDown'); let speed = 1; let isPlaying = false; let progressValue = 0; let totalLength = path.getTotalLength(); function updateProgress() { progressValue = (plane.getAttribute('x') / totalLength) * 100; progress.textContent = `${progressValue.toFixed(0)}%`; } function drawTail() { const tail = document.createElementNS('http://www.w3.org/2000/svg', 'line'); tail.setAttribute('x1', plane.getAttribute('x')); tail.setAttribute('y1', plane.getAttribute('y')); tail.setAttribute('x2', plane.getAttribute('x') - 10); tail.setAttribute('y2', plane.getAttribute('y')); tail.setAttribute('stroke', 'rgba(0, 0, 0, 0.2)'); tail.setAttribute('stroke-width', 2); path.parentNode.appendChild(tail); } function animate() { const point = path.getPointAtLength(plane.getAttribute('x')); plane.setAttribute('x', point.x); plane.setAttribute('y', point.y); plane.style.transform = `rotate(${point.slope * 180 / Math.PI + 90}deg)`; updateProgress(); if (plane.getAttribute('x') >=...

AI 评审点评

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

【CLAUDE】该实现存在多处根本性错误，导致核心功能（路径跟随动画、朝向调整、速度控制）均无法正常工作。飞机使用占位图而非SVG图形，尾迹无渐隐效果且存在内存泄漏，界面设计简陋。整体而言，该代码仅完成了基本的HTML结构搭建，功能实现严重不足，距离需求要求差距较大。 【GEMINI】该模型生成的代码未能实现核心功能需求。主要问题在于对 SVG 路径动画 API 的理解错误，导致飞机无法沿路径运动，且交互控制功能（速度调节）完全失效。此外，尾迹效果的实现方式会导致严重的性能问题，未能达到专业前端开发的要求。 【KIMI】该实现存在根本性技术错误，核心动画逻辑完全无法工作。主要问题包括：混淆image元素的x属性与路径长度、错误计算朝向旋转、飞机使用占位图片而非SVG、尾迹效果无渐隐且导致内存泄漏、速度控制未实际生效。虽然使用了GSAP库，但未能正确利用其MotionPathPlugin等核心功能来解决路径跟随问题。建议重写时使用getPointAtLength的正确方式计算位置，结合atan2计算切线角度，并使用GSAP的motionPath插件或requestAnimationFrame实现平滑动画。

困难难度评测结果

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

模型生成产物

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

To create a comprehensive SVG path following flight trajectory animation system as per your requirements, I'll outline a high-level structure and provide code snippets using modern web technologies like HTML, CSS (with Flexbox and Grid), and JavaScript (with ES6 modules). I'll also use GSAP for animations and D3.js for path editing. **Project Structure** ``` - index.html - styles.css - app.js - data.js - components/ - PathSelect.js - PlaneControls.js - SpeedControls.js - PathEditor.js - InfoPanel.js - assets/ - plane.svg - path1.svg - path2.svg - path3.svg ``` **index.html** ```html Flight Trajectory Animation ``` **styles.css** ```css * { box-sizing: border-box; } body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #181818; color: #fff; } .container { display: grid; grid-template-columns: 1fr 300px; gap: 20px; } .canvas { position: relative; width: 800px; height: 600px; border: 1px solid #444; } .controls { display: flex; flex-direction: column; gap: 20px; padding: 20px; background-color: #222; border-radius: 5px; } ``` **app.js** ```javascript import { select, selectAll } from 'd3-selection'; import { path, line } from 'd3-shape'; import { gsap } from 'gsap'; import { getPathData, getPlanesData } from './data.js'; import PathSelect from './components/PathSelect.js'; import PlaneControls from './components/PlaneControls.js'; import SpeedControls from './components/SpeedControls.js'; import PathEditor from './components/PathEditor.js'; import InfoPanel from './components/InfoPanel.js'; const svg = select('#flight-path'); const paths = svg.selectAll('path'); const planes = svg.selectAll('.plane'); let currentPath = 'path1'; let planeCount = 3; let speedMultiplier = 1; let tailLength = 'medium'; let pathData = getPathData(currentPath); let planesData = getPlanesData(planeCount, pathData); function updatePlanes() { planes .data(planesData) .join('use') .attr('href',...

AI 评审点评

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

【CLAUDE】候选输出完全未满足题目要求。题目明确要求生成「功能完善的单页 HTML 应用」，但实际输出仅为一个多文件项目的架构说明和伪代码框架，没有任何可运行的完整实现。核心功能（路径定义、路径跟随动画、编队飞行、尾迹、曲率速度、信息面板、路径编辑）均未实现，大量关键代码用注释或省略号代替。此外，代码中存在多处 API 使用错误（如 `pathData.getPointAtLength().curvature`、`pathData.length` 等），即使按照其架构实现也无法正常工作。总体而言，这是一个严重不合格的输出，几乎没有实用价值。 【GEMINI】模型展现了极佳的架构设计能力和对现代前端工程化的理解，代码结构清晰、模块化程度高。然而，在具体实现层面，模型过度依赖伪代码和未定义的 API（如 `pathData.getPointAtLength` 的扩展属性），导致核心动画逻辑无法直接运行。对于复杂的路径计算、曲率感知和实时尾迹渲染，模型未能提供切实可行的算法实现，仅完成了「骨架」搭建，未能交付一个功能完善的系统。 【KIMI】该输出是一个未完成的项目框架而非可运行的完整实现。虽然展示了良好的代码组织思路（模块化组件、现代ES6语法），但所有核心功能均为占位符或伪代码，存在大量API误用和逻辑错误。3条预设路径无实际数据、飞机运动动画基于错误的GSAP用法、所有交互组件缺失实现、尾迹和曲率速度等高级特性未真正完成。作为资深前端工程师的交付物，此输出严重不符合功能完整性要求，无法直接运行验证任何需求点。

相关链接

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

加载中...
100%