цикл через анимацию при нажатии

Question

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

function switcher() { 
// counts to 4 then resets to 0 
x = x+1 
if (x>3) {x = 0} 

// Fire OFF 
if (x == 0) { 
    // animation code ? 
} 

// Fire LARGE 
if (x == 1) { 
// animation code ?  
} 

// Fire MEDIUM 
if (x == 2) { 
// animation code ? 
} 

// Fire SMALL 
if (x == 3) { 
// animation code ? 
}} 

1 статическое состояние + 3 анимированные состояния.

Анимация меня использует Пола ирландский в requestAnimframe Polyfill затем:

function animate() 
    { 
    setTimeout(function() 
     { 
     requestAnimFrame(animate);   
     draw(); 
     }, 1000/2); 
    } 

function draw()  
    { 
    flame=document.getElementById('myimage') 
    if (flame.src.match("Images/lfire1.png")) 
     { 
     flame.src="Images/lfire2.png"; 
     } 
    else 
     { 
     flame.src="Images/lfire1.png"; 
     }  
    } 

каждая анимация в основном тот же самый код, но с разными изображениями. Код работает, когда я тестирую его напрямую, но когда я копирую его в коммутатор, он не будет работать.

Я попытался подключить их в свой коммутатор, используя несколько методов и не могу заставить ничего работать. любые подсказки? Спасибо!

Answer 1

Непонятно, как вы вызываете метод switcher(), но я подозреваю, что проблема может быть связана с тем, как Javascript обрабатывает setTimeout().

Имейте в виду, что при вызове setTimeout() в Javascript сам скрипт не останавливается, пока ваш таймаут не закончится. Вместо этого он запускает процесс обработки указанного таймаута, а затем продолжает прерывать ваш код.

Если вы связываете анимацию с помощью одного метода и счетчика (что-то сохранялось при вызове метода), так что при вызове метода он выполняет его анимацию и затем проверяет, меньше ли счетчика, чем 2, прежде чем он снова вызовет себя используя setTimeout(), вы должны быть в порядке.

Извините, если я не здесь. Работа над существенным допущением: вы используете setTimeout() для вызова switcher().

Надеюсь, это поможет.