Как я могу создать "нелинейную" траекторию, используя jQuery.animate ()?

Question

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

Могу ли я вообще использовать jQuery.animate ()?

Или я должен вручную кодировать его с нуля, используя setInterval ()?

Спасибо!
Даниэль

Answer 1

Вы можете создать свои собственные функции "замедления" на jQuery.easing, например, эта функция будет аппроксимировать кривую синуса более чем на 90 градусов

jQuery.easing.sin90 = function(p, n, firstNum, diff) {
    return Math.sin(p * Math.PI / 2) * diff + firstNum;
};

p - это число от 0 до 1, представляющеепроцент времени анимации, n - это фактическое время, затраченное на эту анимацию, а firstNum и diff немного вводят в заблуждение, кажется, что в какой-то момент это будет принимать начальное / конечное значение, но теперь всеФункции замедления просто нормализуют значение p, поэтому firstNum = 0 и diff = 1

Я собрал простую скрипку , показывающую использование смягчения по каждому свойству и некоторых функций sin / cos для анимации divв кругах, используя jQuery.

Answer 2

Вот проект

http://plugins.jquery.com/project/MoveTo-Bezier-Curve