美好的一天,我今天看到了这个插件(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)";
});