画布抖动了我一半的渲染

Question

我正在从事一个有趣的项目，该项目涉及通过用线条绘制“不完美”的圆圈并对它们的点进行动画处理以产生令人愉悦的效果。

这些点应该在远离圆心和靠近圆心之间交替，以说明：

我想我能够做到这一点，问题是当我尝试在画布中渲染它时，渲染抖动的一半像疯了一样，你可以在 demo. 中看到它

您可以在this video 中查看它是如何为我呈现的。如果您密切注意，渲染的右下半部分运行平稳，而左上半部分则没有。

这就是我创建点的方式：

for (var i = 0; i < q; i++) {
    var a = toRad(aDiv * i);
    var e = rand(this.e, 1);
    var x = Math.cos(a) * (this.r * e) + this.x;
    var y = Math.sin(a) * (this.r * e) + this.y;
    this.points.push({
        x: x,
        y: y,
        initX: x,
        initY: y,
        reverseX: false,
        reverseY: false,
        finalX: x + 5 * Math.cos(a),
        finalY: y + 5 * Math.sin(a)
    }); 
}

不完美圆中的每个点都是使用一个角度和一个随机距离计算出来的，它不是特别相关（它依赖于几个参数）。

我认为当我分配最终值 (finalX,finalY) 时它开始搞砸了，动画应该在这些值和它们的初始值之间交替，但只有一半的渲染完成了它。

数学错了吗？代码错了吗？还是只是我的电脑无法处理渲染？

我想不通，提前谢谢！

Answer 1

数学错了吗？代码错了吗？还是只是我的电脑无法处理渲染？

我认为您的动画功能不关心经过的时间。只是动画发生得非常快。 requestAnimationFrame 回调的次数通常是每秒 60 次，所以会发生预期会发生的事情。

我在这个fiddle 中做了一些修复。这个动画函数关注时间戳。我还在动画中制作了一个渐变，以平滑地在它们的最终位置和初始位置之间交替。

ImperfectCircle.prototype.animate = function (timestamp) {
    var factor = 4;
    var stepTime = 400;
    for (var i = 0, l = this.points.length; i < l; i++) {
        var point = this.points[i];
        var direction = Math.floor(timestamp/stepTime)%2;
        var stepProgress = timestamp % stepTime * 100 / stepTime;
        stepProgress = (direction == 0 ? stepProgress: 100 -stepProgress);
        point.x = point.initX + (Math.cos(point.angle) * stepProgress/100 * factor); 
        point.y = point.initY + (Math.sin(point.angle) * stepProgress/100 * factor);
    }
}

一步一步：

基于 cmets

// 1. Calculates the steps as int: Math.floor(timestamp/stepTime)
// 2. Modulo to know if even step or odd step: %2
var direction = Math.floor(timestamp/stepTime)%2;

// 1. Calculates the step progress: timestamp % stepTime
// 2. Convert it to a percentage: * 100 / stepTime
var stepProgress = timestamp % stepTime * 100 / stepTime;

// if odd invert the percentage. 
stepProgress = (direction == 0 ? stepProgress: 100 -stepProgress);

// recompute position based on step percentage
// factor is for fine adjustment.
point.x = point.initX + (Math.cos(point.angle) * stepProgress/100 * factor); 
point.y = point.initY + (Math.sin(point.angle) * stepProgress/100 * factor);