こんにちは、今日このプラグインを見ました (http://phrogz.net/SVG/animation_on_a_curve.html) gavin kistner によって作成された phrogz.net の素晴らしいプラグインです。ページを作成し、それらを 1 つのオブジェクトに適用して、最初のオブジェクトが終了した後も別のパスに移動できるようにします。また、イージングを追加するのを手伝っていただければ幸いです。
飛行機をアニメーション化しようとしています。使用するコードは次のとおりです。
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)";
});