Гладкой JQuery Анимацию

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

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

недавно мне было поручено создать одностраничный веб-сайт, который эмулирует основные флеш-анимации, т. е. скользит и исчезает В и из элементов.

когда я получил интерактивный макет, я столкнулся с большой проблемой - порывистый анимации. Проблема присутствовала в Macs с экраны выше 18 "независимо от браузеров и Macs ниже 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);
});

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

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

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

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

6
html jquery jquery-animate

2 ответов

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

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

Как из ваших анимаций jquery выше:

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

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

1

очереди

при использовании 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/

интервал

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

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

вот демо.

запрос

интервальный метод действительно работает только для простых анимаций. Но для более сложных анимаций вы можете использовать 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 );

код фрагмент найден здесь.

0