Question

我正在使用EaselJS并希望创建一个闪烁的颜色矩形，当按下按钮时会闪烁一定次数，从阵列中显示随机颜色。它应该在10次闪烁后停止，然后我想提取最终颜色。

到目前为止，我所拥有的相关代码是：

var colorArray = ["#FE7B62","#CB2DD3","#F1FD66","#004CE8","#FFD068", "#02A97E"];
square = new createjs.Shape();
square.graphics.beginFill("#000").drawRoundRect(850, 50, 100, 100, 20);

function pushButton(event) {
    square.graphics.inject(animateColor);
}

function animateColor(event) {
    this.fillStyle = colorArray[parseInt(Math.random()*6)];
}

此代码成功触发了我的颜色数组中的颜色闪烁，但我不确定在有限数量的帧中运行动画的最佳方法是什么。我试图暂停自动收报机并在按钮的onclick上重新启动它，但是失败了。我也尝试在pushButton函数中使用for循环，但这导致了太多的递归错误＆＃34;在浏览器中。这是我的完整文件链接https://github.com/RMehta95/sherman-land/blob/master/main.js。

Answer 1

我建议创建一个事件来触发你的动作（xamountOfFrames）。以下是可能有用的一些信息的链接

http://www.w3schools.com/tags/ref_eventattributes.asp

Answer 2

我最终没有使用inject函数，而是每次都重新绘制形状，创建一个计数器和计时器变量，以确保它循环适当的次数。

function pushButton() {
    if (timer === false) {
        animate = setInterval(animateColor, 200);
        timer = true;
    }
}

function animateColor() {
    square.graphics.clear();
    displayColor = colorArray[Math.floor(Math.random()*colorArray.length)];
    square.graphics.beginFill(displayColor).drawRoundRect(850, 50, 100, 100, 20);
    counter++;
    if (counter===15) {
        clearInterval(animate);
        counter=0;
        movePlayer(displayColor);
        timer = false;
        return;
    }
}

为一定数量的帧EaselJs设置形状的颜色变化

2 个答案: