Блог

Главная - Вопросы по программированию - Как приостановить мою анимацию в javascript

Как приостановить мою анимацию в javascript

#javascript #jquery #animation

#javascript #jquery #Анимация

Вопрос:

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

 function scrollBg(){
    //Go to next pixel row.
    current -= step;

    //If at the end of the image, then go to the top.
    if (current == restartPosition){
        current = 0;
    }

    //Set the CSS of the header.
    $('#campaignid').css("background-position","0 " current "px");
}

//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed);

Ответ №1:

Вы можете использовать clearInterval(init) , чтобы остановить анимацию, затем запомнить текущий шаг в некоторой переменной и запустить анимацию с этого шага, когда это необходимо setInterval. В качестве альтернативы у вас может быть другая глобальная переменная (аналогичная текущей), которая будет указывать, можете ли вы выполнить тело scrollBg или нет, например:

 function scrollBg(){
    if(isPause){
      return;
    }
    //Go to next pixel row.
    current -= step;

    //If at the end of the image, then go to the top.
    if (current == restartPosition){
        current = 0;
    }

//Set the CSS of the header.
$('#campaignid').css("background-position","0 " current "px");

}

Вы установите паузу, установив isPause = true

Комментарии:

1. 1 — вы опередили меня в этом ответе только потому, что IE разбился пару минут назад, когда я попытался опубликовать свою эквивалентную версию. Я определенно предпочитаю подход «isPaused» в 90% случаев; Я нахожу очистку и перезапуск интервалов слишком неудобными (хотя, очевидно, это может работать так же хорошо).

2. Использование clearInterval определенно предпочтительнее. Использование isPause переменной и оставление интервала активным приведет к потере циклов процессора, ничего не делая, и (очень незначительно) повредит производительности на стороне клиента без причины.

3. @Тобиас Коэн, это зависит от продолжительности паузы и интервалов между кадрами анимации. В некоторых случаях isPause может быть более эффективным. Но в целом вы правы.

4. @Tobias — если страница использует только один или два интервала, снижение производительности isPaused будет настолько маленьким, что вы не сможете его измерить, особенно если интервал относительно длинный. (И если он использует более одного или двух интервалов, я бы предположил, что с дизайном может быть что-то не так.)

Ответ №2:

Как насчет того, чтобы использовать clearInterval при определенном значении current (т.Е. clearInterval(init)) и сбросить интервал в другое время?

Метки: