Canvas循环绘制路径动画失效：如何实现单条路径独立动画？

我来帮你解决这个Canvas多路径独立动画的问题，先拆解下你现有代码里的核心问题，再给你具体的修改方案：

你的代码为什么会出问题？ #

1. 路径合并问题：你在循环里一直复用同一个mPath对象，quadTo()方法是往已有路径上追加新的曲线段，所以最后所有路径都被合并成了一条，自然没法独立显示和动画。
2. 动画冲突问题：所有动画都操作同一个phase属性，多个ObjectAnimator同时修改这个值，会导致动画逻辑混乱，最终只有最后一个动画能生效。

解决思路和具体实现 #

要实现每条路径独立动画，核心是给每条路径分配独立的对象和动画状态，具体步骤如下：

1. 封装每条路径的独立状态

先创建一个自定义类，用来存储单条路径的所有必要信息：路径对象、路径长度、当前动画进度、动画器等：

class PathAnimationItem {
    Path path;
    float length;
    float phase;
    ObjectAnimator animator;

    public PathAnimationItem(Path path) {
        this.path = path;
        PathMeasure measure = new PathMeasure(path, false);
        this.length = measure.getLength();
        this.phase = 1.0f;
        // 初始化动画
        this.animator = ObjectAnimator.ofFloat(this, "phase", 1.0f, 0.0f);
        this.animator.setDuration(3000);
    }

    public void setPhase(float phase) {
        this.phase = phase;
        // 触发重绘
        PathView.this.invalidate();
    }

    public float getPhase() {
        return phase;
    }
}

2. 初始化所有路径和动画

在你的View初始化逻辑里，创建每条路径对应的PathAnimationItem，并启动动画：

// 用List存储所有路径动画项
private List<PathAnimationItem> pathItems = new ArrayList<>();

// 初始化方法（比如在构造方法或onSizeChanged里）
private void initPaths() {
    for (int i = 0; i < 6; i++) {
        Log.v("x", "" + i + ": " + x[i]);
        Log.v("y", "" + i + ": " + y[i]);
        // 为每条路径创建独立的Path对象
        Path singlePath = new Path();
        singlePath.moveTo(x0, y0); // 记得先move到起始点，不然quadTo会从(0,0)开始
        singlePath.quadTo(x0, y0, x[i], y[i]);
        // 创建路径动画项并加入列表
        PathAnimationItem item = new PathAnimationItem(singlePath);
        pathItems.add(item);
        // 启动动画
        item.animator.start();
    }
}

3. 修改onDraw方法，绘制每条独立路径

在onDraw里遍历所有PathAnimationItem，给每条路径应用对应的PathEffect后绘制：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    for (PathAnimationItem item : pathItems) {
        // 给当前路径设置对应的PathEffect
        mPaint.setPathEffect(createPathEffect(item.length, item.phase, 0.0f));
        // 绘制单条路径
        canvas.drawPath(item.path, mPaint);
    }
}

4. 保持你的PathEffect创建逻辑不变

原来的createPathEffect方法可以直接复用，它负责根据进度生成对应的动画效果：

private PathEffect createPathEffect(float pathLength, float phase, float offset) {
    return new DashPathEffect(new float[]{pathLength, pathLength}, pathLength * phase + offset);
}

额外注意点 #

• 记得在initPaths里给每条路径调用moveTo(x0, y0)，不然quadTo会默认从(0,0)开始绘制，导致路径位置错误。
• 如果需要控制动画的顺序（比如依次启动），可以给动画设置startDelay，或者用AnimatorSet来编排动画序列。

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