время анимации по ширине

Question

Это не проблема jquery, а общая проблема алгоритма.

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

скажем i mention for 1024 width it needs to work for 7 sec.Даже если экран уменьшается, он должен работать в течение 7 секунд.

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

Конечный эффект от соотношения обоих должен быть одинаковым

Вот мой код на случай, если у любого есть решение jquery

$("#plane").css({
    'margin-left'   : $(window).width() - 300,
    'position'  : 'absolute'
}).animate({
    "margin-left" : '35%'
}, 5000, 'linear', function(){
    $(this).animate({
        "opacity"       : 0,
        "margin-left"   : 0
    }, 2200, 'linear')
});

Answer 1

Вы можете рассчитать желаемое время.

Звучит так, как будто вы описываете алгоритм, в котором если ширина окна меньше 1024 пикселей, то вам нужно 7 секунд, а если больше, вы хотите, чтобы это заняло больше времени.Итак, допустим, мы масштабируем время линейно выше 1024 пикселей, поэтому, если его ширина составляет 2048 пикселей, это займет 14 секунд.Это можно описать с помощью следующего вычисления:

var animTime = 7000;
var width = $(window).width();
if (width > 1024) {
    animTime += Math.floor((width - 1024) / 1024) * 7000);
}

Затем вы можете разделить это время между двумя фрагментами анимации:

$("#plane").css({
    'margin-left'   : $(window).width() - 300,
    'position'  : 'absolute'
}).animate({
    "margin-left" : '35%'
}, Math.floor((5/7) * animTime), 'linear', function(){
    $(this).animate({
        "opacity"       : 0,
        "margin-left"   : 0
    }, Math.floor((2/7) * animTime), 'linear')
});

Answer 2

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

Однако вы можете определить время работы анимации ( например, через обратный вызов). Разделите первые полсекунды или около того вашей анимации. На целевом оборудовании укажите время кода, необходимое для запуска этого начального раздела, и соответствующим образом скорректируйте пределы для остальной части анимации. Например, если номинальная длина секции калибровки равна N, и для ее завершения требуется время C, а номинальная длина основной секции равна T, используйте время T '= T * R для анимации основной секции, где R представляет собой передаточное число с начальным значением N / C.

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