Плавная анимация Jquery - PullRequest
Новая
       4

Плавная анимация Jquery

6 голосов
/ 12 июня 2011

У меня была другая ветка по этому вопросу, но она не была решена, вероятно, потому что я не очень ясно сформулировал свой вопрос.

Просто хочу попробовать еще раз в надежде, что я близок к решению этого вопроса:

Недавно мне было поручено создать одностраничный веб-сайт, который имитирует базовую анимацию Flash, то есть скольжение и исчезновение элементов.

Когда я получил интерактивный макет, я столкнулся с большой проблемой - прерывистой анимацией.Проблема присутствовала в Mac с экранами выше 18 "независимо от браузеров и Mac ниже 18", характерными только для FF версии 3 и ниже.На ПК анимация почти безупречна.

Вот мои коды jquery, и затронутые элементы помечены с помощью идентификаторов # md1, # ​​md2 и # md3: 

$(document).ready(function () {
    $('#md1').animate({ top: "-60px" }, 500);
    $('#md2').animate({ top: "60px" }, 800);
    $('#md3').animate({ left: "60px" }, 1000);
    $('.home').fadeTo(3000, 0.8);
    $('#bg-img-4').fadeTo(1200, 1);
    $('#menu').fadeTo(4000, 1);
    $('#copyright').fadeTo(4000, 1);
});

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

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

Большое спасибо за вашу помощь, ребята.Очень ценю это =)

Ответы [ 2 ]

1 голос
/ 12 июня 2011

Лучший способ - использовать для этого CSS-переходы / анимации. Если какой-то браузер не поддерживает их, такой браузер не подходит для анимации любого рода.

Переходы и анимации в CSS лучше оптимизируются нативным кодом, поэтому теоретически может демонстрировать значительно более плавное (более высокое FPS) поведение.

По состоянию на анимацию JQuery выше:

  1. Попытайтесь уменьшить количество переходов на сложные элементы.
  2. Попробуйте упростить стилизацию - уменьшите количество вариантов использования opacity или rgba() с прозрачностью.

И вообще: чем меньше у вас элементов DOM, тем лучше.

0 голосов
/ 09 декабря 2014

Queue

При использовании jQuery animate вы должны добавлять к анимациям префикс dequeue() и stop(), если вы запускаете более 1 анимации или повторяете одну и ту же анимацию, в противном случае они могут накапливаться позади друг друга в ожидании запуска и привести к непреднамеренной задержке. 

$('#md1').dequeue().stop().animate({ top: "-60px" }, 500);

Вот демоверсия Codepen и , другая, немного более сложная демка , использующая это.

Частота кадров

Вы можете управлять частотой кадров, при которой jQuery обрабатывает анимацию, с помощью jquery.fx.interval, что задокументировано здесь.

Этим свойством можно манипулировать, чтобы настроить количество кадров в секунду, с которыми будут запускаться анимации. Значение по умолчанию составляет 13 миллисекунд. Уменьшение этого значения может сделать анимацию более плавной в более быстрых браузерах (таких как Chrome), но это может повлиять на производительность и ЦП.

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

Ссылка: http://api.jquery.com/jquery.fx.interval/

Interval

Вы можете использовать setInterval, чтобы разбить анимацию на более мелкие биты, которые будут проще и быстрее обрабатывать.

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

Вот демо.

Запрос

Метод интервала действительно работает только для простых анимаций. Но для более сложных анимаций вы можете использовать requestAnimationFrame, который дает возможность браузеру выбирать, когда лучше всего выполнять код. 

function animLoop( render, element ) {
    var running, lastFrame = +new Date;
    function loop( now ) {
        // stop the loop if render returned false
        if ( running !== false ) {
            requestAnimationFrame( loop, element );
            running = render( now - lastFrame );
            lastFrame = now;
        }
    }
    loop( lastFrame );
}

// Usage
animLoop(function( deltaT ) {
    elem.style.left = ( left += 10 * deltaT / 16 ) + "px";
    if ( left > 400 ) {
      return false;
    }
// optional 2nd arg: elem containing the animation
}, animWrapper );

Фрагмент кода, найденный здесь.

...