1

我正在使用@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,

我正在考虑将路径分成更小的路径，以便我可以调整每个部分的时间，对此的任何建议将不胜感激。

谢谢。

4

0 回答 0