Включение / выключение анимации setInterval

Новичок в js и многому научился, но во всех своих исследованиях я не могу понять это правильно.
Цель:
1: У меня есть image1
2: при нажатии запускает функцию setinterval между image2 и image3 , анимируя его.
3: при повторном нажатии очищает интервал и переходит к статическому изображению1.

бонус: нет звука при статике, воспроизводится звук при анимации.
Я застрял на третьем шаге.

функция onclick

function clickio() 
{
 element=document.getElementById('myimage')
 if (element.src.match("image2.png","image3.png"))
   {
   clearInterval("animate()");
   element.src="image1.png";
   audiofile.pause();
   }
 else
   {
   audiofile.play();
   setInterval("animate()", 500)
   }
}

Функция анимации

function startfire()
{
 element=document.getElementById('myimage')
 if (element.src.match("flame1.png"))
   {
   element.src="flame2.png";
   }
 else
   {
   element.src="flame1.png";
   }
}

Пример: Audibreeze

другая проблема - воспроизведение звука через различные браузеры.
Я использовал HTML5 тег <audio>, но упал до тега <embed>, который, похоже, не работает.


javascript if-statement toggle setinterval
person user2350700    schedule 04.05.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это должно решить вашу проблему с анимацией.

var animInterval = null;

var clickio = function( event ){
    var element = document.getElementById( 'myimage' );
    if( interval ){
        clearInterval( animInterval );
        element.src = "image1.png";
        audiofile.pause();
    }
    else{
        audiofile.play();
        animInterval = setInterval( startfire , 500 );
    }
}

Но у меня есть несколько предложений, которые вы могли бы принять во внимание.

  1. При создании анимации обычно лучше использовать window.requestAnimationFrame, если вы используете HTML5 или функцию, которая имитирует это (например, это :)

    window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame   || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     || 
        function( callback ){
            window.setTimeout(callback, 1000 / 60);
        };
})();

  2. Попробуйте предварительно загрузить изображения перед их анимацией или даже поместить все изображения в один файл (спрайт) и изменить положение фона.

person d3mi3n    schedule 04.05.2013
comment
requestAnimationFrame отлично подходит, если вы настраиваете свойства, но чередование изображений лучше с фиксированной частотой кадров. Вы можете сделать это с requestAnimationFrame, но setInterval лучше подходит для этого. - person icktoofay; 05.05.2013
comment
Спасибо, у меня есть исследование о requestAnimationFrame, и я работаю над этим сейчас. Я могу заставить анимацию работать, если вызову ее непосредственно из команды on onclick, но у меня возникают проблемы при попытке подключить ее к коммутатору, который я построил.function switcher() { /*counts to 4 then resets to 0*/ x = x+1 if (x>3) {x = 0} /* Fire OFF */ if (x == 0) {/*code*/} } /* Fire LARGE */ if (x == 1) {/*code*/} } /* Fire MEDIUM */ if (x == 2) {/*code*/ } /* Fire SMALL */ if (x == 3) {/*code*/ }} - person user2350700; 12.05.2013
comment
Найдите новый квест ЗДЕСЬ - person user2350700; 12.05.2013