jQuery 动画 : How to move along an assigned arc/beizer curve?

Question

我检查了jQuery Path plugin ，并尝试为 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);
});

其中 $('#car001') 仅包含 1 个图像。

Answer 1

看起来 jquery.path 应该用 its call to atan2 来做。 .

如果您切换到https://github.com/heygrady/curve，您可能会得到更好的服务，其中还有 a blog post with working jsfiddle demos .

我确信还有很多其他选择。如果您不依赖于 HTML DOM，您还可以尝试 the many SVG libraries out there 之一.