美好的一天, 我今天看到了这个插件(http://phrogz.net/SVG/animation_on_a_curve.html) 这是来自phrogz.net的一个很棒的插件,由gavin kistner完成, 我想知道是否有任何方法可以在页面中使用多个弯曲路径并将它们应用于一个对象,以便在第一个完成后继续沿另一个路径行进。 如果你可以帮助我添加缓和,那也很棒。
我正在尝试为飞机制作动画,这是我使用的代码:
var curve = new CurveAnimator(
[0,400], [670,410],
[34,45], [250,-37]
);
var o = document.getElementById('plane');
o.style.position = 'absolute';
curve.animate(10, function(point,angle){
easing: "linear"
o.style.left = point.x+"px";
o.style.top = point.y+"px";
o.style.transform =
o.style.webkitTransform =
o.style.MozTransform =
"rotate("+angle+"deg)";
});