类监听器添加元素时Array push()丢失元素的Canvas动画问题

核心问题定位 #

你遇到的情况大概率是线程安全问题或者渲染层未感知到集合变更导致的：

• 按钮点击操作通常在UI/主线程执行，和渲染线程上下文一致，添加元素的操作能被正确同步；
• 而setOnCycleEndListener的回调可能在渲染子线程触发，直接操作普通ArrayList类型的shapes数组会出现线程竞争，导致元素添加后被覆盖或未被渲染层识别。

具体解决步骤 #

1. 替换为线程安全的集合

把RenderStack里的shapes集合从普通ArrayList换成CopyOnWriteArrayList，它天生支持多线程环境下的读写安全，避免并发修改导致的元素丢失：

// 原代码（存在线程安全隐患）
private List<CircleFade> shapes = new ArrayList<>();

// 修改后
private List<CircleFade> shapes = new CopyOnWriteArrayList<>();

2. 确保集合变更通知渲染层

添加新元素后，必须触发RenderStack的渲染刷新逻辑，否则即使元素加入集合，渲染循环也不会读取新元素。给RenderStack添加专门的元素添加方法，内部集成刷新逻辑：

public class RenderStack {
    private List<CircleFade> shapes = new CopyOnWriteArrayList<>();
    private boolean needsRedraw = false; // 标记是否需要重绘

    public void addShape(CircleFade shape) {
        shapes.add(shape);
        markNeedRedraw(); // 触发刷新标记
    }

    private void markNeedRedraw() {
        this.needsRedraw = true;
        // 如果是Android自定义View场景，补充：
        // view.postInvalidate();
        // 如果是JavaFX场景，补充：
        // Platform.runLater(() -> canvas.requestLayout());
    }

    // 渲染循环中检查needsRedraw，执行重绘后重置标记
    public void renderFrame() {
        if (needsRedraw) {
            // 执行绘制逻辑
            drawShapes();
            needsRedraw = false;
        }
    }
}

3. 规范监听器内的元素添加逻辑

在createShapeWithListener()里，通过RenderStack的安全方法添加元素，避免直接操作集合：

private CircleFade createShapeWithListener() {
    CircleFade newShape = new CircleFade();
    newShape.setOnCycleEndListener(() -> {
        // 调用RenderStack的安全添加方法，自动处理线程安全和刷新
        renderStack.addShape(createShapeWithListener());
    });
    return newShape;
}

4. 强制线程上下文对齐（可选）

如果你的渲染框架要求必须在特定线程修改渲染集合（比如UI线程），在监听器回调里切换到目标线程执行添加操作：

newShape.setOnCycleEndListener(() -> {
    // Android环境切换到UI线程
    runOnUiThread(() -> {
        renderStack.addShape(createShapeWithListener());
    });
    // JavaFX环境切换到应用线程
    // Platform.runLater(() -> renderStack.addShape(createShapeWithListener()));
});

额外排查点 #

• 检查CircleFade的周期计数逻辑，确保setOnCycleEndListener确实在100个周期后触发；
• 确认RenderStack的渲染循环在每次绘制时都遍历整个shapes集合，而非使用了集合的快照副本。

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