Анимировать изменение цвета формы для определенного количества кадров EaselJs

Я использую 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)];
}

Этот код успешно запускает мигание цветов из моего цветового массива, но я не уверен, как лучше всего запустить анимацию для ограниченного числа кадров. Я попытался приостановить тикер и перезапустить его по нажатию кнопки, но это не удалось. Я также пытался использовать цикл for в функции pushButton, но это вызвало «слишком много ошибок рекурсии» в браузере. Вот моя полная ссылка на файл https://github.com/RMehta95/sherman-land/blob/master/main.js.


javascript html html5-canvas easeljs
person user3629883    schedule 12.08.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я бы предложил создать событие для запуска вашего действия (xamountOfFrames). Вот ссылка на некоторую информацию, которая может помочь

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

person drummerboy    schedule 12.08.2014
comment
В EaselJS есть встроенный прослушиватель событий, который может запускать функцию по щелчку, что я и использую. Моя основная проблема заключается в ограничении количества цветных вспышек, а не в постоянном повторении. - person user3629883; 12.08.2014

arrow_upward
0
arrow_downward

В итоге я не использовал функцию ввода, а вместо этого каждый раз перерисовывал фигуру, создавая пару переменных счетчика и таймера, чтобы убедиться, что она проходит нужное количество раз.

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;
    }
}
person user3629883    schedule 13.08.2014