doubao-seed-1-6-flash 在「SVG 路径手写签名动画」的评测结果

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

基本信息

  • 模型名称：doubao-seed-1-6-flash
  • 用例名称：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. 动画流畅，无明显卡顿

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html SVG手写文字动画 /* 内联CSS样式 */ svg { width: 400px; height: 100px; border: 1px solid #ccc; } #replay-btn { margin-top: 10px; padding: 5px 10px; } Hello 重播 // 内联JavaScript代码 window.onload = function() { // 获取文字元素和路径元素 const text = document.getElementById('text'); const path = document.getElementById('text-path'); // 获取文字的路径数据并设置到path元素中 const pathData = text.getPathData(); path.setAttribute('d', pathData[0].d); // 获取路径总长度 const length = path.getTotalLength(); // 初始化路径的虚线属性 path.style.strokeDasharray = length; path.style.strokeDashoffset = length; // 定义动画函数 const animate = () => { path.style.transition = 'stroke-dashoffset 2s ease-in-out'; path.style.strokeDashoffset = 0; }; // 页面加载后自动播放动画 animate(); // 重播按钮点击事件处理 const replayBtn = document.getElementById('replay-btn'); replayBtn.addEventListener('click', () => { path.style.strokeDashoffset = length; setTimeout(() => { path.style.strokeDashoffset = 0; }, 10); }); }; ```

AI 评审点评

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

【GEMINI】该生成结果在技术实现上存在致命伤。模型尝试使用「getPathData()」这一非标准 API 来获取文字路径，导致代码在原生环境下无法运行。虽然它展示了对 stroke-dash 动画原理的理论理解，但未能提供一个可实际运行的 Demo。建议在实现此类功能时，应直接提供预定义的 <path> 数据或使用标准的 SVG 转换方案。 【KIMI】该生成结果存在关键的技术错误：`text.getPathData()` 并非标准 API，导致整个应用无法运行。这是一个常见的 AI 幻觉问题——模型虚构了不存在的浏览器 API。正确的实现应直接使用 `<path>` 元素手写或预生成文字路径数据，而非试图从 `<text>` 元素动态提取。此外，代码结构虽有注释但逻辑混乱，将 `<text>` 和 `<path>` 混用却未正确处理两者关系。建议修正方案：移除 `<text>` 元素，直接定义 `<path d='M...'>` 包含 Hello 的手写路径，或引入可靠的字体转路径库。当前代码属于「思路方向正确但完全不可运行」的典型失败案例。

进阶难度评测结果

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

模型生成产物

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

```html 多笔画手写签名动画 body { display: flex; flex-direction: column; align-items: center; background-color: #f5f5f5; font-family: Arial, sans-serif; padding: 20px; } svg { width: 80%; max-width: 600px; margin-bottom: 20px; } .control-panel { display: flex; gap: 10px; } button { padding: 8px 16px; cursor: pointer; } select { padding: 6px; } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } 播放 慢 正常 快 const paths = document.querySelectorAll('svg path'); const durations = []; const totalLengths = []; paths.forEach((path, index) => { const length = path.getTotalLength(); totalLengths.push(length); const duration = length * 0.01; durations.push(duration); path.style.strokeDasharray = length; path.style.strokeDashoffset = length; path.style.animation = `draw ${duration}s linear forwards`; path.style.animationDelay = index === 0 ? '0s' : `${durations.slice(0, index).reduce((a, b) => a + b, 0)}s`; }); let isPlaying = true; const playPauseBtn = document.getElementById('play-pause'); const speedSelect = document.getElementById('speed-select'); const underline = document.getElementById('underline'); function toggleAnimation() { if (isPlaying) { paths.forEach(path => path.style.animationPlayState = 'paused'); playPauseBtn.textContent = '继续'; } else { paths.forEach(path => path.style.animationPlayState = 'running'); playPauseBtn.textContent = '暂停'; } isPlaying = !isPlaying; } function adjustSpeed() { const speed = parseFloat(speedSelect.value); paths.forEach((path, index) => { const originalDuration = durations[index]; path.style.animationDuration = originalDuration * speed + 's'; path.style.animationDelay = index === 0 ? '0s' : `${durations.slice(0, index).reduce((a, b) => a + b, 0) * speed}s`; }); } playPauseBtn.addEventListener('click', toggleAnimation); speedSelect.addEventListener('change', adjustSpeed); paths[paths.length - 1].addEventListener('animationend', () => { underline.style.animation = 'fadeIn 1s ease-out...

AI 评审点评

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

【GEMINI】该生成结果在技术实现上非常出色，准确运用了 SVG 动画属性并结合 JS 解决了多笔画时序与长度比例的复杂逻辑。交互功能完整，代码结构清晰。视觉上虽然书法艺术性稍欠火候，但完全满足了提示词的功能性要求，是一个高质量的单页应用示例。 【KIMI】该实现基本展示了 SVG 笔画动画的技术原理，但存在关键逻辑缺陷（下划线被误处理为笔画、速度调节时序错误），且视觉设计远未达到「书法感手写签名」的要求。路径设计过于简单，缺乏艺术美感，交互体验也不够完整。建议：1) 分离笔画路径与装饰元素的选择器；2) 重新设计更具书法美感的 SVG 路径；3) 增加笔画粗细变化或渐变效果；4) 完善重新播放功能和正确的速度调节逻辑。

困难难度评测结果

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

模型生成产物

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

```html 专业手写签名动画系统 body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; } .container { display: flex; gap: 20px; } #svg-container { width: 600px; height: 400px; background-color: white; border: 1px solid #ddd; } .controls { display: flex; flex-direction: column; gap: 10px; } button { padding: 8px 12px; cursor: pointer; } input[type="range"] { width: 200px; } input[type="color"] { width: 50px; } .signature { display: none; } .signature.active { display: block; } 英文草书 拼音签名 艺术签名 播放 倒放 下一帧 上一帧 0.25x 0.5x 1x 2x 静音 导出PNG 墨水颜色： 笔触粗细： let audioCtx; let currentAnim; let svgEl; let paths; const sigBtns = document.querySelectorAll('[id^="sig-btn-"]'); const progress = document.getElementById('progress'); const playPause = document.getElementById('play-pause'); const rewindBtn = document.getElementById('rewind'); const stepForward = document.getElementById('step-forward'); const stepBackward = document.getElementById('step-backward'); const rateSelect = document.getElementById('rate-select'); const muteBtn = document.getElementById('mute-btn'); const exportBtn = document.getElementById('export-btn'); const inkColor = document.getElementById('ink-color'); const strokeSize = document.getElementById('stroke-size'); function init() { svgEl = document.getElementById('signature-svg'); svgEl.style.display = 'block'; paths = svgEl.querySelectorAll('path'); paths.forEach(p => { const len = p.getTotalLength(); p.style.strokeDasharray = len; p.style.strokeDashoffset = len; currentAnim = p.animate([ { strokeDashoffset: len }, { strokeDashoffset: 0 } ], { duration: 2000, easing: 'linear', fill: 'forwards', playbackRate: 1, paused: true }); currentAnim.onupdate = updateProgress; }); sigBtns.forEach((btn, idx) => { btn.addEventListener('click', () => switchSignature(idx)); }); progress.addEventListener('input', e => { const dur = currentAnim.effect.getComputedTiming().duration; currentAnim.currentTime = e.target.value * dur; });...

AI 评审点评

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

【GEMINI】该生成结果完成了一个基础的 SVG 路径动画原型，但在「专业级」和「书法感」的要求上达标度较低。模型理解了 stroke-dasharray 动画的核心原理，并实现了大部分交互框架，但在细节模拟（如动态笔压、音效合成算法、导出逻辑完整性）和视觉审美上表现平庸，且代码在最后阶段出现了截断，导致功能不完整。 【KIMI】该实现是一个未完成且存在多处关键缺陷的半成品。核心问题包括：Web Animations API 使用错误（虚构的 onupdate 事件）、音效系统完全缺失、导出功能未实现、签名艺术质量极低、代码结构混乱。虽然基础框架（播放控制、速度切换、颜色/粗细调整）存在，但距离「专业级手写签名动画系统」的要求差距甚远，尤其在书法模拟的真实感和交互完整性方面表现不佳。建议重新学习 Web Animations API 的正确事件机制，完善 SVG 路径设计以体现真实书法特征，并实现完整的音频生成与导出功能。

相关链接

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

加载中...
100%