Как мне jQuery создать параметризованную анимацию элемента, движущегося по синусоидальной схеме?

Question

У меня есть куча (4) элементов на странице, в которую я хочу лететь справа налево по синусоидальной траектории.Я хочу иметь возможность передавать начальную и конечную точки анимации в качестве параметров или, как минимум, установить начальную точку в CSS и передать конечную точку в качестве параметра.

Я нашел этот плагин пути jQuery: https://github.com/weepy/jquery.path

Я уверен, что смогу сделать это с этим, но я не понимаю, как сделать это параметризованным способом, к которому я стремлюсь, основываясь на примере, приведенном для пути синусоидыв документах / демо.Поэтому мне нужна помощь в понимании примера или объяснения того, как это сделать.

Также я знаю этот связанный вопрос , но он не отвечает на мой вопрос.

спасибо.

Answer 1

$("#elem_1").animate({
    path : new $.path.bezier({
        start: { 
            x: 185, //here is where you put your start X coordinate
            y: 185, //here is where you put your start Y coordinate
            angle: 10
        },  
        end: { 
            x:540,//end X coordinate
            y:110, //end Y coordinate
            angle: -10, 
            length: 0.25
        }
      })
  });

Вы можете просто сделать это для всех четырех ваших элементов.Если вы хотите, чтобы анимации запускались в разное время, вы можете использовать setTimeout для пошагового запуска их времени запуска, или если вы хотите, чтобы анимация выполнялась по одному, вы можете использовать функцию обратного вызова функции .animate() для запуска одного за другим.