jquery - jQuery を使用して SVG パス上でアニメーション化するためのカスタマイズされたタイミング

Question

@phrogz (http://phrogz.net/SVG/animation_on_a_curve.html) によって作成されたこのライブラリを使用しています

いくつかの変更を加えたので、ベジェ ポイントの代わりに独自の SVG パスを配置できるため、コードは次のようになります。

function CurveAnimator(from) {
    this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    this.path.setAttribute('d',from);
     this.updatePath();
    CurveAnimator.lastCreated = this;

}
CurveAnimator.prototype.animate = function(duration, callback, delay) {
    var curveAnim = this;
    // TODO: Use requestAnimationFrame if a delay isn't passed
    if (!delay) delay = 1 / 40;
    clearInterval(curveAnim.animTimer);
    var startTime = new Date;
    curveAnim.animTimer = setInterval(function() {
        var now = new Date;
        var elapsed = (now - startTime) / 1000;
        var percent = elapsed / duration;
        if (percent >= 1) {
            percent = 1;
            clearInterval(curveAnim.animTimer);
        }
        var p1 = curveAnim.pointAt(percent - 0.01),
            p2 = curveAnim.pointAt(percent + 0.01);
        callback(curveAnim.pointAt(percent), Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI);
    }, delay * 1000);
};
CurveAnimator.prototype.stop = function() {
    clearInterval(this.animTimer);
};
CurveAnimator.prototype.pointAt = function(percent) {
    return this.path.getPointAtLength(this.len * percent);
};
CurveAnimator.prototype.updatePath = function() {
    this.len = this.path.getTotalLength();
};
CurveAnimator.prototype.setStart = function(x, y) {
    var M = this.path.pathSegList.getItem(0);
    M.x = x;
    M.y = y;
    this.updatePath();
    return this;
};
CurveAnimator.prototype.setEnd = function(x, y) {
    var C = this.path.pathSegList.getItem(1);
    C.x = x;
    C.y = y;
    this.updatePath();
    return this;
};
CurveAnimator.prototype.setStartDirection = function(x, y) {
    var C = this.path.pathSegList.getItem(1);
    C.x1 = x;
    C.y1 = y;
    this.updatePath();
    return this;
};
CurveAnimator.prototype.setEndDirection = function(x, y) {
    var C = this.path.pathSegList.getItem(1);
    C.x2 = x;
    C.y2 = y;
    this.updatePath();
    return this;
};

と：

 //animate
      var curve = new CurveAnimator('M174.067 130.431c0.552189,2.06787 258.914,-17.0323 343.662,119.608 86.3697,139.256 202.539,214.796 301.269,236.977 0.998363,0.224221 1.99474,0.443339 2.9897,0.656504');

    var o = document.getElementById('plane');
    o.style.position = 'relative';

    curve.animate(25, function(point,angle){
      o.style.left = point.x+"px";
      o.style.top  = point.y+"px";
      o.style.transform =
        o.style.webkitTransform =
        o.style.MozTransform =
        "rotate("+angle+"deg)";
    });

ここでは、パスのさまざまな部分にカスタムのタイミングを設定したいと考えています。一部の部分ではより速く、他の部分ではより遅くしたいと考えています。ここでは、アニメーション全体の持続時間を設定できます。

 curve.animate(25,

各部分の時間を調整できるように、パスをより小さなパスに分割することを考えていました。これに関する提案があれば幸いです。

ありがとう。