Canvas + SVG路径动画，在路径中的特定点暂停一段时间并恢复答案

【问题标题】：Canvas + svg path animation, pause at particular point in the path for some time and resumeCanvas + SVG路径动画，在路径中的特定点暂停一段时间并恢复
【发布时间】：2016-09-13 07:40:44
【问题描述】：

我有一个带有星形的画布沿 svg 路径（弯曲）移动。

我想在路径中的任何点暂停星星一段时间然后恢复。

我使用了以下代码：http://jsfiddle.net/ARTsinn/8LruM/

function CurveAnimator(from, to, c1, c2) {
    this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    if (!c1) c1 = from;
    if (!c2) c2 = to;
    this.path.setAttribute('d', 'M' + from.join(',') + 'C' + c1.join(',') + ' ' + c2.join(',') + ' ' + to.join(','));
    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;
};

var ctx = document.querySelector('canvas').getContext('2d');
ctx.fillStyle = 'red';

var curve = new CurveAnimator([50, 300], [350, 300], [445, 39], [1, 106]);

curve.animate(5, function(point, angle) {
    // Erase the canvas
    ctx.save();
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillRect(point.x-10, point.y-10, 20, 20);
    ctx.restore();
});

&lt;canvas width="500" height="400"&gt;&lt;/canvas&gt;

提前感谢您的帮助...

【问题讨论】：

标签： javascript canvas svg html5-canvas svg-path

【解决方案1】：

对您原来的 script 的一些更改：

添加了一个标志来控制暂停/播放动画
添加了增量百分比变量来推进动画，而不是使用 date.time
添加了两个新方法来控制暂停/播放动画

CurveAnimator.prototype.animate = function(duration, callback, delay) {  
   ...
   this.playing = true;
   this.percent = 0;
   ...  
   this.percent += 0.01;
   ...
}

CurveAnimator.prototype.play = function() {
    this.playing = true;
};

CurveAnimator.prototype.pause = function() {
    this.playing = false;
};

http://jsfiddle.net/8LruM/12/

【讨论】：