使用jQuery在SVG路径上设置动画的自定义计时

使用jQuery在SVG路径上设置动画的自定义计时,jquery,animation,svg,Jquery,Animation,Svg,我正在使用@phrogz编写的库http://phrogz.net/SVG/animation_on_a_curve.html 我做了一些更改,因此我可以放置自己的SVG路径,而不是bezier点, 因此,我的代码如下所示: function CurveAnimator(from) { this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); this.path.setAttribute

我正在使用@phrogz编写的库http://phrogz.net/SVG/animation_on_a_curve.html

我做了一些更改,因此我可以放置自己的SVG路径,而不是bezier点, 因此,我的代码如下所示:

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;
};
以及:

在这里,我想对路径的不同部分进行自定义计时,我想对某些部分进行更快的计时,对其他部分进行更慢的计时, 这里是我可以为整个动画设置持续时间的地方:

 curve.animate(25,
我在考虑将路径分成更小的路径,以便调整每个部分的时间, 如对此有任何建议,将不胜感激

谢谢

 curve.animate(25,