jQuery动画:如何沿着指定的弧/beizer曲线移动

Question

我检查了jQuery Path插件，并尝试沿着路径动画化div。我成功地使DIV沿着路径移动，但我希望DIV根据路径方向前进（在遵循beizer路径时旋转）。我该怎么做？

这是我当前的代码：

$('#car001').click(function() {
    var bezier_params = {
        start: { 
          x: 185, 
          y: 385, 
          angle: 50
        },  
        end: { 
          x:540,
          y:110, 
          angle: -10, 
          length: 0.25
        }
      }
      $("#car001").animate({path : new $.path.bezier(bezier_params)}, 1000);
});

其中CCD_ 1仅包含1个图像。

Answer 1

看起来jquery.path应该通过调用atan2来完成。

如果你换成https://github.com/heygrady/curve，它还有一篇博客文章，里面有正在运行的jsfiddle演示。

我相信还有很多其他的选择。如果您没有绑定到HTMLDOM，您也可以尝试使用众多SVG库中的一个。