hunyuan-large 在「SVG 骨骼角色呼吸动效」的评测结果

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

基本信息

  • 模型名称：hunyuan-large
  • 用例名称：SVG 骨骼角色呼吸动效
  • 测试类型：网页生成
  • 评测维度：SVG 矢量动画

系统提示词（System Prompt）

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

你是一名前端动效开发工程师。 代码要求： 1. 生成完整的单页 HTML 文件 2. CSS 和 JavaScript 内联在 HTML 文件中 3. SVG 直接嵌入 HTML，不使用外部文件 4. 代码结构清晰，有适当注释

用户提示词（User Prompt）

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

创建一个带有呼吸动效的 SVG 矢量角色。 功能要求： 1. 绘制一个简单的矢量人物（包含头部、躯干、四肢） 2. 将人物拆分为不同的 SVG `<g>` 分组（头部、躯干、手臂、腿部） 3. 为躯干添加上下轻微位移动画，模拟呼吸时胸腔起伏 4. 为头部添加随呼吸轻微上下浮动的动画 5. 动画循环播放，过渡自然流畅

任务要求

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

  1. SVG 人物包含头部、躯干、四肢等基本结构，且各部分使用独立 `<g>` 分组
  2. 躯干有明显的上下位移动画，模拟呼吸起伏
  3. 头部随躯干有联动的浮动动画
  4. 动画循环播放且过渡自然（使用 ease-in-out 或类似缓动）
  5. 整体视觉效果具有基本的生命力感

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

以下是一个完整的单页 HTML 文件，其中包含一个带有呼吸动效的 SVG 矢量角色。代码结构清晰，并附有适当注释。 ```html SVG Breathing Character /* 设置 SVG 的宽度和高度 */ svg { width: 100%; height: auto; } // 获取 SVG 元素 const svg = document.querySelector('svg'); // 获取躯干和头部元素 const torso = document.getElementById('torso'); const head = document.getElementById('head'); // 躯干呼吸动画 function animateTorso() { let scale = 1; let direction = 1; // 1 for up, -1 for down function breathe() { scale += 0.05 * direction; if (scale >= 1.1 || scale ``` ### 代码说明： 1. **SVG 绘制**： - 使用 `` 元素将头部、躯干、手臂和腿部分组。 - 简单的几何形状（圆形、矩形、椭圆）用于绘制矢量人物。 2. **CSS**： - 设置 SVG 的宽度和高度，使其适应不同屏幕尺寸。 3. **JavaScript 动画**： - `animateTorso` 函数为躯干添加上下轻微位移动画，模拟呼吸时胸腔起伏。 - `animateHead` 函数为头部添加随呼吸轻微上下浮动的动画。 - 使用 `requestAnimationFrame` 实现平滑的动画效果。 这个代码实现了一个简单的矢量人物，并为其添加了自然的呼吸动效。

AI 评审点评

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

【CLAUDE】该生成结果在结构分组思路上基本正确，完成了人物各部位的 `<g>` 分组划分，但人物绘制细节存在明显瑕疵（眼睛比例、嘴巴路径错误）。动画实现是最大的短板：躯干缩放动画因坐标原点问题导致效果错误，缺乏缓动曲线使动画生硬，头部与躯干动画缺乏同步联动。整体来看，代码能够运行但动画效果与预期差距较大，未能有效模拟自然呼吸的生命力感。建议使用 CSS animation 配合 transform-origin 或 SMIL animateTransform 来实现更准确的呼吸效果。 【GEMINI】该生成结果高质量地完成了任务。模型不仅构建了完整的 SVG 角色结构，还通过 JavaScript 实现了动态的呼吸效果。虽然在动画的物理逻辑（变换中心点）上还有提升空间，但作为前端动效开发的初步实现，其代码质量和功能完整性均表现优秀。 【KIMI】该实现基本完成了任务的核心要求，但动画质量是最大短板。主要问题在于：躯干缩放未设置正确的变换原点，导致呼吸效果视觉上错位；头部与躯干动画完全独立，缺乏物理联动；动画使用线性插值而非缓动函数，显得机械生硬。建议改进方向：使用 `transform-origin` 或 `translate` 配合 `scale` 修正缩放中心；将头部嵌套在躯干分组内实现自然联动；采用正弦波统一控制呼吸节奏，并为四肢添加轻微摆动以增强生命力。

进阶难度评测结果

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

模型生成产物

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

以下是一个符合您要求的完整 HTML 文件，其中包含了 SVG 矢量角色及其呼吸动效。该文件使用了内联的 CSS 和 JavaScript 来实现动画效果。 ```html SVG Breathing Character body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(to bottom, #f0f8ff, #add8e6); } svg { width: 300px; height: 400px; } .breath-group { transform-origin: center; } .torso { animation: breatheTorso 4s ease-in-out infinite; } .head { animation: breatheHead 4s ease-in-out infinite, swayHead 8s ease-in-out infinite alternate; } .arm.left { animation: rotateArmLeft 4s ease-in-out infinite, smallBreatheArmLeft 4s ease-in-out infinite alternate; } .arm.right { animation: rotateArmRight 4s ease-in-out infinite, smallBreatheArmRight 4s ease-in-out infinite alternate; } .leg.left { animation: smallBreatheLegLeft 4s ease-in-out infinite alternate; } .leg.right { animation: smallBreatheLegRight 4s ease-in-out infinite alternate; } @keyframes breatheTorso { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes breatheHead { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes swayHead { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } } @keyframes rotateArmLeft { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(5deg); } } @keyframes rotateArmRight { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-5deg); } } @keyframes smallBreatheArmLeft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes smallBreatheArmRight { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes smallBreatheLegLeft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } } @keyframes smallBreatheLegRight { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } } ``` ### 说明： 1. **SVG 绘制**：角色由多个 `` 分组组成，每个部位（躯干、头部、手臂、腿部）都有独立的动画。 2. **CSS 动画**：使用 `@keyframes` 定义了不同部位的动画效果，包括呼吸和轻微摆动。 3....

AI 评审点评

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

【CLAUDE】该生成结果整体质量较低，未能达到提示词的核心要求。主要问题包括：角色绘制极为简陋（矩形拼接），缺少颈部，人物比例和位置关系错误；动画实现存在CSS多动画transform覆盖的技术bug，导致部分动画效果失效；各部位动画相位未错开，缺乏层次感；视觉表现单调，场景背景几乎不可见。整体来看，该结果仅实现了功能框架，但在精细度、技术正确性和视觉美观性上均有较大差距，无法呈现「静静站立、自然呼吸」的生命力感。 【GEMINI】模型完成了任务的基本要求，成功实现了基于 SVG 分组的 CSS 呼吸动效。优点在于动画参数在幅度上有明显的阶梯差异，代码整洁规范。不足之处在于角色建模过于简单，忽略了「颈部」的分组要求，且在处理 CSS 多重动画叠加和相位错开（animation-delay）方面表现欠佳，导致最终的「生命力感」略显机械。 【KIMI】该实现完成了基础功能框架，但在核心要求上存在明显不足：角色结构缺少颈部且几何图形过于简陋，头部与躯干严重错位；动画因CSS transform覆盖机制导致关键效果失效（头部无上下浮动），且所有动画完全同步启动，未实现「相位错开」；视觉表现与「精细」「美观」要求差距较大。建议：1) 使用嵌套g分组解决transform叠加问题；2) 添加animation-delay实现相位差异；3) 重新计算各部位坐标确保视觉对齐；4) 增加颈部分组和更多细节（五官、关节、衣物层次）提升精细度。

困难难度评测结果

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

模型生成产物

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

以下是一个符合您要求的单页 HTML 文件，包含精细的 SVG 角色绘制和复杂的动画系统。代码中使用了语义化的 ID 和类命名，模块化的 JavaScript 动画控制，以及高质量的视觉效果。 ```html SVG Breathing Character body { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background: radial-gradient(circle, #1e3c72, #2a5298); overflow: hidden; } .controls { position: absolute; top: 10px; left: 10px; } .controls label { margin-right: 10px; } Calm Breathing Rapid Breathing const character = document.getElementById('character'); const head = document.getElementById('head'); const neck = document.getElementById('neck'); const torso = document.getElementById('torso'); const arms = document.querySelectorAll('#arms g'); const legs = document.querySelectorAll('#legs g'); const feetShadow = document.querySelector('#feet + rect'); let breathState = 'calm'; let breathingPhase = 0; let time = 0; function easeInOutQuad(t) { return t { const armOffset = index === 0 ? -1 : 1; const armY = 230 + amplitude * 0.3 * Math.sin(frequency * time + armOffset * Math.PI / 6); arm.setAttribute('transform', `translate(0, ${armY}) rotate(${amplitude * 0.2 * Math.sin(frequency * time + armOffset * Math.PI / 3)} 250 300)`); }); // Legs legs.forEach((leg, index) => { const legOffset = index === 0 ? -1 : 1; const legY = 330 + amplitude * 0.3 * Math.sin(frequency * time + legOffset * Math.PI / 6); leg.setAttribute('transform', `translate(0, ${legY}) rotate(${amplitude * 0.2 * Math.sin(frequency * time + legOffset * Math.PI / 3)} 350 400)`); }); // Shadow const shadowScale = 1 + amplitude * 0.1 * Math.sin(frequency * time); feetShadow.setAttribute('transform', `scale(${shadowScale})`); requestAnimationFrame(animateBreathing); } document.querySelectorAll('input[name="breathState"]').forEach(input => { input.addEventListener('change', () => { breathState = input.value; }); }); animateBreathing(); ``` ### 代码说明： 1. **SVG 角色绘制**：角色由多个 `` 分组组成，每个部位都有独立的变换基点。 2. **动画系统**： - 使用 `requestAnimationFrame` 实现平滑动画。 -...

AI 评审点评

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

【CLAUDE】该生成结果整体质量较低，与提示词要求存在显著差距。角色结构未能实现精细的骨骼分层（缺少上臂/前臂/手、大腿/小腿/脚的独立分组），动画代码存在明显逻辑错误（将绝对坐标当作位移量使用），导致实际运行效果会出现元素错位。动画层次感缺失，没有实现真正的关节层级联动和相位延迟。视觉效果粗糙，仅用基本几何形状拼凑，缺乏专业插画质感。交互控制虽有基本框架但缺乏平滑过渡。整体来看，代码更像是一个快速草稿，未能满足高质量动效系统的核心要求。 【GEMINI】模型在逻辑架构上理解了复杂动效系统的需求，包括相位延迟、呼吸状态切换和环境联动等概念，但在执行层面表现欠佳。SVG 建模过于敷衍，未能体现「资深前端动效工程师」的视觉水准；动画切换逻辑存在数学上的相位跳变问题，不够平滑；整体生命力的表现受限于过于简单的几何形体和线性简谐运动。 【KIMI】该生成结果严重不符合题目要求。角色结构使用简单几何图形拼凑，缺失前臂、手、小腿等关键独立分组，变换基点设置错误；动画系统仅有简单正弦平移，完全缺失层级联动的旋转动画、相位延迟机制和不规律微动；状态切换虽有功能但无真正平滑过渡；视觉效果简陋如儿童画，投影联动逻辑错误。代码注释极少，模块化程度低，与「资深前端动效工程师」「高度拟真」「专业精美」的要求存在巨大差距。建议重新设计完整的骨骼层级系统，使用SMIL或更精细的JS动画实现真实的呼吸物理模拟。

相关链接

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

加载中...
100%