如何修改Animate CC发布的JS代码，在单个Canvas中多次绘制同一场景？

阿华AIGC实验室

2026-5-25

在单个Canvas中实现Animate CC动画的多个实例

嘿，这个需求其实挺常见的，毕竟用多个Canvas太占资源，同一个Canvas里复用动画才是更高效的方案。刚好Animate CC基于CreateJS（EaselJS）开发，天生支持多实例复用，我给你拆解下具体实现步骤：

核心思路

Animate CC生成的动画本质是CreateJS的MovieClip类（或者自定义容器类），每个类实例都是独立的动画单元。我们只需要在同一个舞台（Stage）上创建多个该类的实例，设置不同的位置/样式，就能在单个Canvas里显示多个相同动画。

具体修改步骤

1. 找到Animate生成的JS文件

打开你的项目发布目录，找到对应JS文件（通常和HTML文件同名，比如myAnimation.js），重点看初始化函数init()。

2. 修改初始化代码，创建多个实例

默认Animate只会创建一个动画实例，我们要改成批量创建并添加到同一个舞台：

var canvas, stage;
function init() {
    // 获取页面中的Canvas元素
    canvas = document.getElementById("canvas");
    // 按需调整Canvas尺寸，确保能容纳所有实例
    canvas.width = 600;
    canvas.height = 400;
    
    // 创建共享舞台
    stage = new createjs.Stage(canvas);
    
    // 实例1：默认位置(50,50)
    var anim1 = new lib.MyAnimation(); // 替换成你的动画类名
    anim1.x = 50;
    anim1.y = 50;
    stage.addChild(anim1);
    
    // 实例2：偏移位置+放大+半透明
    var anim2 = new lib.MyAnimation();
    anim2.x = 250;
    anim2.y = 50;
    anim2.scaleX = anim2.scaleY = 1.5; // 放大1.5倍
    anim2.alpha = 0.8; // 半透明效果
    stage.addChild(anim2);
    
    // 实例3：旋转45度
    var anim3 = new lib.MyAnimation();
    anim3.x = 450;
    anim3.y = 50;
    anim3.rotation = 45;
    stage.addChild(anim3);
    
    // 启动动画循环
    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);
}

3. 处理实例独立状态（如果有自定义代码）

如果你的动画里写了自定义脚本（比如全局变量控制动画状态），需要把全局变量改成实例属性，避免多个实例互相干扰：

错误写法（全局变量）：

var currentFrame = 0;
function updateAnimation() {
    currentFrame++;
}

正确写法（实例属性）：

this.currentFrame = 0;
this.updateAnimation = function() {
    this.currentFrame++;
}

4. 给实例添加独立交互（可选）

每个实例可以绑定独立的交互事件，比如点击：

anim1.addEventListener("click", function() {
    alert("你点击了第一个动画实例！");
});

anim2.addEventListener("click", function() {
    alert("你点击了第二个动画实例！");
});