1

Сделал вот такую анимацию на jquery.

function anima() {
    function eternalmotion() {
        $('.moon').animate({
            marginLeft: +parseInt($(document).width())
        }, 20000, 'linear',                
        function() {
            $('.moon').css({
                'marginLeft': $baseMoon
            });

        } );
        $('.stars_front').animate({
            backgroundPosition: -parseInt($(document).width())
        }, 30000, 'linear',                
        function() {
            $('.stars_front').css({
                'backgroundPosition': 0
            });
            //eternalmotion();
        } );
        $('.stars_back').animate({
            backgroundPosition: +parseInt($(document).width())
        }, 10000, 'linear',                
        function() {
            $('.stars_back').css({
                'backgroundPosition': 0
            });
            //eternalmotion();
        } );
        eternalmotion();
    }
    eternalmotion();
};
anima();

То есть двигаю я тут 3 слоя. Первый двигаю сам слой, другие 2 только background. Такая анимация сильно грузит процессор (90-95%) как мне ее оптимизировать? Или на jquery такого делать не стоит и лучше воспользоваться flash.

UPD:

Пробывал по разному как советовали в комментариях ничего прироста не дало. Появился новый вопрос если слой .stars_front и .stars_back имеют размеры 1200 на 400 и содержат в себе изображение такого разрешения может ли это вызывать лаги? Если я это изображение поделю на блоки будет ли выполнятся скрипт быстрее?

3
  • на первый взгляд ничего сворхпроизводительного нету, попробуйте воспользоваться специализированной библиотекой для анимации, например Move.js
    – Spectre
    27 авг 2012 в 15:12
  • Этой "специализированной библиотекой для анимации", не советую пользоваться, если расчитываете на пользователей, у которых осел вплоть до девятой версии. А вот чего-то нагружающего не вижу так же. Закиньте на jsFiddle. Моежт с наглядым примером будет проще разобраться.
    – Deonis
    27 авг 2012 в 15:40
  • @greshnik, если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом).
    – Crasher
    28 авг 2012 в 14:26

4 ответа 4

7

Возможно я ошибаюсь, но разве функция eternalmotion() не бесконечно вызывает сама себя без всяких задержек?


Запишу по другому:

function anima() {
    function eternalmotion() {
        $('.moon').animate(...);
        $('.stars_front').animate(...);
        $('.stars_back').animate(...);

        eternalmotion(); // <-- бесконечная рекурсия
    }
    eternalmotion();
};

anima();

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

Вот мое решение:

function anima() {
function animatemoon() {
    $('.moon').animate(
        {marginLeft: +parseInt($(document).width())},
        18000,
        'linear',                
        function() {$('.moon').css({'marginLeft': 0});animatemoon();}
    );
};

function animatestarsfront() {
    $('.stars_front').animate(
        {backgroundPosition: -parseInt($(document).width())},
        30000,
        'linear',           
        function() {$('.stars_front').css({'backgroundPosition': 0});animatestarsfront();}
    );
};

function animatestarsback() {
    $('.stars_back').animate(
        {backgroundPosition: +parseInt($(document).width())},
        10000,
        'linear',                
        function() {$('.stars_back').css({'backgroundPosition': 0});animatestarsback()}
    );
};

animatemoon();
animatestarsfront();
animatestarsback();
};
anima();

Мое творчество все могут оценить тут ))))))

5
  • Скорее всего эти задержки прописаны в исходнике jQuery функции .animate
    – igumnov
    27 авг 2012 в 19:16
  • 1
    нет, всё верно: eternalmotion(); // этот вызов явно лишний } eternalmotion(); }; anima();
    – Spectre
    27 авг 2012 в 19:19
  • без рекурсии анимация остановится, а мне этого не надо, дело тут точно в рекурсии
    – greshnik
    28 авг 2012 в 6:32
  • Возможно нужно вызывать функцию повторно после завершения предыдущей анимации или по какой-то задержке? 28 авг 2012 в 6:40
  • @greshnik, отредактировал ответ. попробуйте. 28 авг 2012 в 8:03
3

Может стоит посмотреть в сторону jQuery.when()

Тогда код будет иметь вид примерно следующий:

function eternalmotion() {
    $.when( 
        $('.moon').animate(...),
        $('.stars_front').animate(...),
        $('.stars_back').animate(...)
    ).then(eternalmotion);
}

ещё вариант: выделить все 3 анимации в отдельные функции, которые вызывать в complete callback, каждой из них:

function moonAnimation(){
    $('.moon').animate(
        {
            marginLeft: +parseInt($(document).width())
        }, 
        20000, 
        'linear', 
        function() {
            $('.moon').css({
                 'marginLeft': $baseMoon
            });
            moonAnimation(); // будет вызвана как раз по завершении анимации
        }  
    );
}

То же самое проделать со всеми остальными анимациями.

2

Уверен, что проблема в eternalmotion(); Функция много раз вызывается, JQ, не успевая обработать предыдущий вызов, зацикливается, что увеличивает нагрузку во много раз.

2

Вот эту статью почитайте, там много про оптимизацию написано.

Закрепляем jQuery — 25 отличных советов.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.