qwen3.5-flash 在「SVG 动态分形树生长动画」的评测结果

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

基本信息

  • 模型名称：qwen3.5-flash
  • 用例名称：SVG 动态分形树生长动画
  • 测试类型：网页生成
  • 评测维度：SVG 矢量动画

系统提示词（System Prompt）

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

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

用户提示词（User Prompt）

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

使用 SVG 绘制一棵静态分形树，并为其添加简单的生长动画。 功能要求： - 使用 JavaScript 递归算法生成分形树的枝干，树干从底部向上生长，每级分叉为两个子枝 - 分形树至少递归 6 层 - 使用 CSS animation 或 stroke-dasharray/stroke-dashoffset 技巧，实现树枝从树干到末梢依次出现的生长效果 - 页面中央展示分形树，背景简洁

任务要求

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

  1. 使用递归算法正确生成分形树结构，至少 6 层分叉
  2. SVG 线条能够呈现从树干到树枝的生长动画效果
  3. 动画按层级顺序依次播放，视觉上有生长感
  4. 代码在单个 HTML 文件中，可直接运行

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

这是一个完整的单页 HTML 应用。它包含了 HTML 结构、CSS 样式（用于布局和动画）以及 JavaScript 代码（用于递归生成分形树并处理动画时序）。 ### 核心实现逻辑： 1. **SVG 绘图**：使用 JavaScript 递归函数计算每一段树枝的起点和终点坐标，并在 SVG 中动态插入 `` 元素。 2. **生长动画**：利用 CSS 的 `stroke-dasharray` 和 `stroke-dashoffset` 属性。我们将每条线的虚线长度设置为该线的实际长度，并将偏移量也设置为该长度（此时线条完全不可见）。然后通过 CSS `@keyframes` 动画将偏移量变为 0，从而产生线条“画”出来的效果。 3. **时序控制**：为了让树枝像植物一样从主干向末梢生长，我们在 JavaScript 递归过程中，根据当前的递归深度（Depth）动态设置了 CSS 的 `animation-delay` 属性。 ```html SVG 分形树生长动画 /* 全局样式重置与布局 */ body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color: #1a1a1a; /* 深色背景衬托树枝 */ display: flex; justify-content: center; align-items: center; overflow: hidden; font-family: sans-serif; } /* 容器样式 */ .container { text-align: center; position: relative; } h1 { color: #eee; margin-bottom: 20px; font-weight: 300; letter-spacing: 2px; } /* SVG 容器 */ svg { box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); border-radius: 8px; background-color: #222; } /* 树枝的基础样式 关键点：stroke-dasharray 和 stroke-dashoffset 将在 JS 中动态设置 */ .branch { fill: none; stroke-linecap: round; /* 默认颜色，会被 JS 中的颜色插值覆盖 */ stroke: #8B4513; transition: opacity 0.5s; } /* 生长动画关键帧 从 dashoffset 等于长度 (隐藏) 变为 0 (显示) */ @keyframes grow { from { stroke-dashoffset: var(--total-length); } to { stroke-dashoffset: 0; } } /* 动画类 */ .growing { animation-name: grow; animation-timing-function: ease-out; animation-fill-mode: forwards; /* 保持结束状态 */ } 分形树生长演示 /** * 配置参数 */ const CONFIG = { recursionDepth: 9, // 递归深度 (>=6) trunkLength: 120, // 树干初始长度 branchAngle: 25, // 分叉角度 (度) shrinkRatio: 0.75, // 子枝长度衰减比例 startColor: '#8B4513', // 树干颜色 (棕色) endColor: '#90EE90' // 树叶颜色 (嫩绿色) }; const svgNS = "http://www.w3.org/2000/svg"; const svgElement = document.getElementById('fractalTree'); /** * 颜色插值辅助函数 * 根据进度 (0-1) 混合两种颜色 */ function interpolateColor(color1, color2, factor) { if (arguments.length 0) { // 递归调用：向左和向右分叉 // 角度转换：度数转弧度 const rad = CONFIG.branchAngle * (Math.PI / 180); // 左分支 drawBranch(x2, y2, len * CONFIG.shrinkRatio, angle - rad, depth - 1,...

进阶难度评测结果

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

模型生成产物

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

```html 动态分形树生成器 :root { --bg-color: #f0f2f5; --panel-bg: rgba(255, 255, 255, 0.9); --primary-color: #4a90e2; --text-color: #333; --shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } body { margin: 0; padding: 0; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-color); height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* 顶部控制栏 */ .controls { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background: var(--panel-bg); padding: 15px 25px; border-radius: 50px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 20px; z-index: 10; backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.5); } h1 { margin: 0; font-size: 1.2rem; color: var(--text-color); font-weight: 600; margin-right: 10px; } .control-group { display: flex; align-items: center; gap: 10px; } label { font-size: 0.9rem; color: #666; user-select: none; } /* 滑块样式 */ input[type="range"] { -webkit-appearance: none; width: 120px; height: 6px; background: #ddd; border-radius: 3px; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: var(--primary-color); border-radius: 50%; cursor: pointer; transition: transform 0.1s; } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); } /* 按钮样式 */ button { background-color: var(--primary-color); color: white; border: none; padding: 8px 20px; border-radius: 20px; font-size: 0.9rem; cursor: pointer; transition: background-color 0.2s, transform 0.1s; font-weight: 500; } button:hover { background-color: #357abd; } button:active { transform: scale(0.95); } /* SVG 容器 */ #tree-container { flex: 1; width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end; /* 树干从底部开始 */ position: relative; } svg { width: 100%; height: 100%; max-height: 100vh; overflow: visible; } /* 枝干路径样式 */ .branch { fill: none; stroke-linecap: round; /* 动画将在 JS 中通过 style 注入 */ } /* 叶子样式...

困难难度评测结果

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

模型生成产物

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

```html 动态分形树生长模拟器 :root { --bg-color: #f0f2f5; --panel-bg: rgba(255, 255, 255, 0.9); --text-color: #333; --accent-color: #4a90e2; --border-radius: 12px; --shadow: 0 4px 20px rgba(0,0,0,0.1); /* 季节主题变量 */ --tree-trunk-base: #5d4037; --tree-tip-base: #8bc34a; --leaf-color: #8bc34a; --bg-gradient-start: #e0f7fa; --bg-gradient-end: #ffffff; } body { margin: 0; padding: 0; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end)); height: 100vh; display: flex; overflow: hidden; color: var(--text-color); transition: background 1s ease; } /* 布局容器 */ .app-container { display: flex; width: 100%; height: 100%; } /* 画布区域 */ .canvas-area { flex: 1; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: crosshair; } svg { max-width: 100%; max-height: 100%; filter: drop-shadow(0 10px 10px rgba(0,0,0,0.05)); } /* 枝干样式 */ .branch-path { fill: none; stroke-linecap: round; transform-origin: 0% 0%; /* 从根部开始缩放 */ transition: stroke 0.5s ease; cursor: pointer; } .branch-path:hover { stroke-opacity: 0.8; stroke-width: 2px !important; } .branch-path.highlighted { stroke: #ffeb3b !important; stroke-width: 3px !important; filter: drop-shadow(0 0 5px rgba(255, 235, 59, 0.8)); } /* 叶片样式 */ .leaf-circle { transition: fill 0.5s ease, r 0.3s ease; opacity: 0.9; } .leaf-circle:hover { opacity: 1; r: 6px; /* 稍微放大 */ } /* 控制面板 */ .controls-panel { width: 320px; background: var(--panel-bg); backdrop-filter: blur(10px); padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 20px; z-index: 10; border-left: 1px solid rgba(0,0,0,0.05); } h1 { font-size: 1.2rem; margin: 0 0 10px 0; color: var(--accent-color); text-transform: uppercase; letter-spacing: 1px; } .control-group { display: flex; flex-direction: column; gap: 8px; } label { font-size: 0.9rem; font-weight: 600; display: flex; justify-content: space-between; }...

相关链接

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

加载中...
100%