doubao-seed-2-0-code 在「SVG 路径手写签名动画」的评测结果

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

基本信息

  • 模型名称：doubao-seed-2-0-code
  • 用例名称：SVG 路径手写签名动画
  • 测试类型：网页生成
  • 评测维度：SVG 矢量动画

系统提示词（System Prompt）

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

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

用户提示词（User Prompt）

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

使用 SVG 实现一个手写文字动画效果。 功能要求： 1. 在页面中展示一个 SVG 文字或签名路径（可以是英文单词，如「Hello」） 2. 利用 SVG 的 stroke-dasharray 和 stroke-dashoffset 属性，实现文字被逐笔描绘出来的动画效果 3. 页面加载后自动播放动画 4. 提供一个「重播」按钮，点击后可以重新播放动画

任务要求

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

  1. 页面包含 SVG 路径文字或签名，视觉上清晰可辨
  2. 使用 stroke-dasharray 和 stroke-dashoffset 实现描边动画
  3. 页面加载后自动播放手写动画
  4. 提供「重播」按钮且功能正常
  5. 动画流畅，无明显卡顿

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

SVG 手写文字动画 * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; } .container { text-align: center; background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); } h1 { color: #2c3e50; margin-bottom: 30px; font-size: 24px; } .svg-container { margin-bottom: 30px; background: #fafafa; border-radius: 10px; padding: 20px; display: inline-block; } svg { display: block; width: 100%; max-width: 500px; height: auto; } .handwriting-path { fill: none; stroke: #2c3e50; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; /* 初始状态：隐藏路径 */ stroke-dasharray: 1000; stroke-dashoffset: 1000; } /* 动画类 */ .animate { animation: draw 3s ease-in-out forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .replay-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 12px 36px; font-size: 16px; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); } .replay-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); } .replay-btn:active { transform: translateY(0); } .description { margin-top: 20px; color: #7f8c8d; font-size: 14px; } ✍️ SVG 手写文字动画 🔄 重播动画 使用 stroke-dasharray 和 stroke-dashoffset 实现 // 获取 DOM 元素 const pathElement = document.querySelector('.handwriting-path'); const replayBtn = document.getElementById('replayBtn'); // 页面加载完成后自动播放动画 window.addEventListener('load', () => { setTimeout(() => { playAnimation(); }, 500); // 延迟 500ms 开始动画 }); // 重播按钮点击事件 replayBtn.addEventListener('click', () => { replayAnimation(); }); // 播放动画函数 function playAnimation() { pathElement.classList.add('animate'); } // 重播动画函数 function...

AI 评审点评

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

【CLAUDE】该实现掌握了 stroke-dasharray/stroke-dashoffset 动画的基本原理，页面结构清晰，交互逻辑基本正确。但存在两个核心问题：1）SVG 路径数据无法构成可辨识的「Hello」文字，是本次实现最严重的缺陷；2）未使用 getTotalLength() 动态计算路径长度，硬编码的 dasharray 值降低了动画精确性；3）所有笔画合并为单一路径，失去了逐笔描绘的书法感。建议使用真实字体路径数据或精心设计的手写签名路径，并为每个笔画单独设置带延迟的动画，以实现真正的手写还原效果。 【GEMINI】这是一个高质量的实现方案。代码结构清晰，注释到位，不仅完成了所有功能要求，还在 UI 美化和 JavaScript 交互细节（如强制重绘以重置动画）上表现专业。唯一的小改进点是可以使用 JavaScript 动态获取路径长度以增强代码的通用性。 【KIMI】该实现基本满足了功能需求，stroke-dasharray/stroke-dashoffset 动画原理应用正确，交互功能完整。主要改进点在于：1) 使用 path.getTotalLength() 动态获取路径长度替代固定值 1000；2) 优化 SVG 路径设计，提高「Hello」文字的可辨识度，或考虑使用多个 path 元素实现逐字母动画；3) 增加笔触粗细变化模拟真实手写效果。整体为合格的前端实现，但手写还原的真实感有待提升。

进阶难度评测结果

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

模型生成产物

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

SVG手写签名动画 :root { --primary-color: #2c3e50; --secondary-color: #3498db; --accent-color: #e74c3c; --bg-color: #f8f9fa; --signature-color: #2c3e50; --animation-duration-base: 1s; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); color: var(--primary-color); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; } .container { width: 100%; max-width: 800px; background-color: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); padding: 2rem; display: flex; flex-direction: column; align-items: center; } h1 { margin-bottom: 2rem; font-size: 1.8rem; text-align: center; } .signature-container { width: 100%; max-width: 600px; margin-bottom: 2rem; position: relative; } svg { width: 100%; height: auto; overflow: visible; } .signature-path { fill: none; stroke: var(--signature-color); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--path-length); stroke-dashoffset: var(--path-length); opacity: 0; } .signature-path.animate { animation: draw var(--animation-duration) var(--animation-timing) forwards; opacity: 1; } @keyframes draw { to { stroke-dashoffset: 0; } } .underline { fill: none; stroke: var(--accent-color); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 300; opacity: 0; } .underline.animate { animation: underline-draw 0.8s ease-out forwards, fade-in 0.5s ease-out forwards; } @keyframes underline-draw { to { stroke-dashoffset: 0; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; width: 100%; } .btn { padding: 0.75rem 1.5rem; background-color: var(--secondary-color); color: white; border: none; border-radius: 6px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease;...

AI 评审点评

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

【CLAUDE】该实现展示了对 SVG stroke-dasharray/stroke-dashoffset 动画原理的基本理解，技术架构设计合理，包括动态获取路径长度、按比例设置动画时长、累积延迟实现顺序播放等核心思路均正确。页面 UI 设计较为现代美观。但存在几个明显问题：1) 代码被截断，changeSpeed 函数不完整，导致速度调节这一核心功能无法确认是否可用；2) 签名路径设计过于简单，缺乏真实书法/签名的艺术感；3) 暂停恢复逻辑存在潜在可靠性问题。总体而言是一个有一定技术深度但执行不够完整的实现。 【GEMINI】这是一份高质量的实现方案。模型不仅精通 SVG 动画的核心技术（stroke-dash 偏移），还展现了优秀的前端工程能力，通过 JavaScript 动态计算时序和处理复杂的动画状态切换，完美达成了「真实书写感」的任务目标。 【KIMI】该实现展示了扎实的 SVG 动画技术功底，核心需求（多笔画顺序动画、时长与长度比例）完成度较高，代码结构清晰且注重细节（如不同路径使用不同缓动函数）。主要问题在于：一是代码截断导致速度切换功能不完整；二是暂停/恢复机制过于复杂，采用计算剩余时间的方式而非更标准的 animation-play-state，增加了维护难度和潜在 bug 风险；三是签名路径的艺术表现力不足，未能充分展现「书法感」这一核心体验目标。建议在视觉设计上参考真实手写签名或书法字体，技术上简化状态管理逻辑。

困难难度评测结果

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

模型生成产物

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

专业手写签名动画系统 :root { --primary: #2d3748; --secondary: #4a5568; --accent: #667eea; --bg: #f7fafc; --card-bg: #ffffff; --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; padding: 2rem; color: var(--primary); } .container { max-width: 1200px; margin: 0 auto; } header { text-align: center; margin-bottom: 2rem; } h1 { font-size: 2.5rem; font-weight: 700; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; } .subtitle { color: var(--secondary); font-size: 1.1rem; } .main-card { background: var(--card-bg); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 2rem; } .signature-stage { background: linear-gradient(to bottom, #fafafa, #f0f0f0); padding: 3rem; display: flex; align-items: center; justify-content: center; min-height: 400px; position: relative; overflow: hidden; } .signature-svg { width: 100%; max-width: 600px; height: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); } .controls { padding: 2rem; border-top: 1px solid #e2e8f0; } .control-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; align-items: center; } .signature-switcher { display: flex; gap: 0.5rem; flex-wrap: wrap; } .signature-btn { padding: 0.75rem 1.5rem; border: 2px solid #e2e8f0; background: white; border-radius: 10px; cursor: pointer; font-weight: 500; transition: all 0.3s ease; } .signature-btn:hover { border-color: var(--accent); transform: translateY(-2px); } .signature-btn.active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-color: transparent; } .timeline-section { margin-bottom: 1.5rem; } .timeline-label...

AI 评审点评

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

【CLAUDE】该生成结果的 HTML 结构和 CSS 样式部分质量较高，UI 设计专业，具备完整的界面骨架。然而，JavaScript 实现代码在签名数据定义阶段即被截断，导致所有核心功能（stroke-dasharray 动画、Web Animations API 时间轴、音效、导出、交互控制）均未实现，整个应用完全无法运行。这是一个严重的完整性缺陷，使得本次生成结果基本不可用。若代码完整，从已有的设计思路（渐变墨水、笔压数组、完整 UI 控件）来看，有潜力达到较高质量。 【GEMINI】这是一个视觉表现极佳且技术栈应用准确的方案。模型精准理解了 Web Animations API 与 SVG 动画的结合点，并设计了专业级的 UI 界面。主要扣分项在于生成内容触发了长度限制，导致核心的 JavaScript 逻辑（特别是音效合成和导出功能）未能完整输出，影响了最终的可用性。如果代码完整，这将是一个顶尖的实现案例。 【KIMI】该生成结果呈现严重的代码截断问题，JavaScript 在核心实现部分中断，导致无法验证最关键的动画控制逻辑。UI 界面设计专业完整，但「面子」与「里子」严重脱节——所有功能按钮都存在，却无对应实现代码。从已有代码推测，开发者理解需求并规划了合理的数据结构，但 stroke-dasharray 动画、Web Animations API 时间轴控制、Web Audio API 音效等核心技术均未在可见代码中体现。建议要求模型补全完整可运行的代码后再行评估。

相关链接

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

加载中...
100%