自定义轨迹（非线性）

Question

我正在开发一个小型的网络动画项目（在网页中移动div），我想使用自定义轨迹与jQuery或Javascript或任何库。

我不想使用Canvas（可能更合适）

我的目的可能很困难：使用鼠标绘制一条线并捕捉所有位置并保存为div设置动画。

我知道jQuery允许做一些东西，但它是线性动画。

我可以使用animate函数执行此操作：

$(this).animate({left:+500}, 1500, function(){ //first move left
  $(this).animate({right:500}, 1500); // then move right
  //etc... but too many points, sorry for syntax errors
 }); 

描述自定义动作显然太长了。

有什么想法吗？

Answer 1

您可以将鼠标移动的值存储在数组中，并使用CSS动画或链接jQuery .animate()或Element.animate()调用数组的每个元素以达到预期的效果。