Android自定义图形实现：答题正确率填充树形SVG需求

嘿，这个树形填充的需求挺有创意的！刚好我之前做过类似的自定义SVG填充动画，给你拆解一下实现思路，绝对能帮你搞定～

核心思路 #

其实自定义图形的百分比填充和条形图逻辑是通的，核心就是用**裁剪路径（clipPath）**把渐变填充层限制在树形的轮廓内，然后通过位移动画让渐变层从底部“上升”到对应正确率的高度。这样不管树形形状多复杂，填充区域都会完美贴合轮廓。

分步实现 #

1. 准备SVG基础结构

首先你需要三个核心元素：

• 树形的轮廓路径：用来显示树形的形状，设置为无填充、有描边就行
• 渐变定义：实现从底部红→中部橙→顶部绿的渐变效果
• 裁剪路径：和树形轮廓完全一致的路径，用来限制填充层的显示范围

2. 实现自定义图形填充（关键步骤）

把渐变填充层（一个大矩形）放进裁剪路径里，这样矩形只有树形形状的部分会显示出来。然后通过移动这个矩形的位置，控制显示的高度：

• 当正确率为0%时，矩形完全在树形下方（看不到）
• 当正确率为75%时，矩形向上移动25%，显示下半部分75%的区域
• 当正确率为100%时，矩形完全覆盖树形

3. 添加上升动画

用CSS过渡（transition）给填充矩形加位移动画，从初始的完全不可见状态，平滑过渡到目标位置，模拟“从底部上升”的效果。

完整代码示例 #

<svg width="200" height="300" viewBox="0 0 200 300">
  <!-- 定义渐变：从底部红到顶部绿，中间加橙色过渡 -->
  <linearGradient id="scoreGradient" x1="0%" y1="100%" x2="0%" y2="0%">
    <stop offset="0%" stop-color="#ff4444" />
    <stop offset="50%" stop-color="#ffaa22" />
    <stop offset="100%" stop-color="#44dd44" />
  </linearGradient>

  <!-- 树形裁剪路径：和下面的轮廓路径完全一致 -->
  <clipPath id="treeClip">
    <path d="M100,300 C80,250 60,200 70,150 C60,120 80,90 100,70 C120,90 140,120 130,150 C140,200 120,250 100,300 Z" />
    <!-- 替换成你自己的SVG树形路径即可 -->
  </clipPath>

  <!-- 渐变填充矩形：被裁剪成树形形状 -->
  <rect id="fillRect" x="0" y="0" width="200" height="300" fill="url(#scoreGradient)" clip-path="url(#treeClip)" />

  <!-- 树形轮廓：放在填充层上方，保证形状清晰 -->
  <path d="M100,300 C80,250 60,200 70,150 C60,120 80,90 100,70 C120,90 140,120 130,150 C140,200 120,250 100,300 Z" fill="none" stroke="#333" stroke-width="2" />
</svg>

<style>
  #fillRect {
    /* 动画设置：1.5秒平滑过渡，缓动效果更自然 */
    transition: transform 1.5s ease-out;
    /* 初始状态：完全在树形下方，不可见 */
    transform: translateY(100%);
  }
</style>

<script>
  // 答题结束后，获取正确率（比如这里模拟75%的正确率）
  const correctRate = 0.75;
  const fillRect = document.getElementById('fillRect');
  // 计算位移：(1 - 正确率) * 100%，比如75%对应位移25%
  const translateYValue = `${(1 - correctRate) * 100}%`;
  fillRect.style.transform = `translateY(${translateYValue})`;
</script>

细节调整提示 #

• 树形形状替换：把代码里的<path>替换成你自己设计的SVG树形路径就行，只要保证clipPath里的路径和轮廓路径完全一致
• 渐变自定义：可以调整<stop>的offset和stop-color来修改渐变的颜色分布
• 动画优化：如果想要更灵动的效果，可以把CSS的ease-out换成cubic-bezier(0.2, 0.8, 0.2, 1)这类自定义缓动函数
• 动态控制：如果需要支持实时更新正确率，只要重新计算translateYValue并设置给填充矩形即可

这个方法不管树形有多复杂，都能完美适配填充需求，亲测有效哦！

内容的提问来源于stack exchange，提问作者Adam Knirsch