Как запустить анимацию на определенное время?

Question

[NQUAREx]

У меня есть главный цикл программы, зацикленный с помощью requestAnimationFrame Как к примеру после того как персонаж врезался отключить для него коллизию на 3 секунды и мигать с одной скоростью? При этом весь игровой процесс будет продолжать анимироваться с другой скоростью

Как во время одной анимации запустить другую с другой скоростью и на время?

Код я думаю тут не требуется, стандартный цикл анимации с помощью requestAnimationFrame:

function loop() {
    requestAnimationFrame(loop)

    let now = new Date().getTime(),
        dt = now - (time || now)

    time = now

    game.step(dt)
    game.render()
}

Спасибо

Comments

[Сергей Сергей]

флаги состояния, счётчики и сравнение прироста времени.

[NQUAREx]

Сергей Сергей, А по подробнее как нибудь?)

[Сергей Сергей]

При "столкновении" ставим об этом флаг для персонажа, простую логическую переменную или свойство в объекте, как угодно. Одновременно с этим запускаем другую самозацикленную процедуру с миганием персонажа и счётчиком для трёх секунд, это может быть функция сравнения текущего времени со стартовым для этой процедуры или даже просто счётчик с фиксированным интервалом отсчёта в setTimeout/setInterval. Как отсчёт трёх секунд завершается, так и зацикленность процедуры прерывается, а вместе с этим опускается флаг "столкновения".
Если такое описание не помогает, то я ничем помочь больше не смогу.

[NQUAREx]

Сергей Сергей, А два цикла анимации могут одновременно работать? Если я запущу второй то первый продолжит анимироваться параллельно со вторым?

[Сергей Сергей]

Смотря как написать. Но обычно могут.

[NQUAREx]

А если так как то, норм?

// при столкновении
this.settings.collision = false
setTimeout(() => {this.settings.collision = true}, 5000)

[NQUAREx]

Только как еще помигать этим персонажем, запустить setInterval и через 5 сек с помощью setTimeout вызвать clearInterval?

[NQUAREx]

Как то так сделал, вроде не колхоз =)

this.player.move = false
					this.settings.collision = false
					this.settings.move = false
					this.player.lives--
					this.player.x = (this.settings.width - 1) / 2
					this.settings.iid = setInterval(() => {this.player.visible = !this.player.visible}, 200)

					setTimeout(() => {
						this.settings.move = true;
						this.settings.collision = true;
						this.player.move = true;
						this.player.visible = true;
						clearInterval(this.settings.iid);
						this.settings.speed = this.settings.start_speed
					}, 2000)

[Сергей Сергей]

нормально.