Javascript 画布抖动了一半的渲染效果

我当时正在做一个有趣的项目，通过用线画出“不完美”的圆圈，并为它们的点设置动画，以产生令人愉悦的效果

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

我想我能够做到这一点，问题是当我尝试在画布上渲染时，渲染抖动的一半是疯狂的，你可以在下面看到

你可以在中看到它是如何呈现给我的。如果密切注意，渲染的右下半部分将平滑运行，而左上半部分则不会

以下是我创建点的方式：

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)
    }); 
}

（变量i=0；i{ var a=toRad（aDiv*i）； var e=兰特（这是e，1）； Varx=数学cos（a）*（this.r*e）+this.x； var y=Math.sin（a）*（this.r*e）+this.y； 这个。点。推({ x:x， y:y， initX:x， y:y， reverseX:false， 弗雷西：错， 最终结果：x+5*数学系数（a）， 最后：y+5*数学单（a） }); } 不完美圆中的每个点都是使用一个角度和一个随机距离来计算的，这个角度和距离不是特别相关（它依赖于几个参数）

我认为当我指定最终值（

finalX，finalY

）时，动画应该在这些值和它们的初始值之间交替，但只有一半的渲染完成

数学错了吗？代码错了吗？或者只是我的计算机无法处理渲染

我想不出来，先谢谢你

数学错了吗？代码错了吗？或者只是我的计算机无法处理渲染

我认为您的动画功能不关心经过的时间。简单地说，动画发生得非常快。回调的次数通常是每秒60次，因此会发生预期的情况

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

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);
    }
}

---

？@guest271314现在它对我来说有点像是在向上跳动哈哈哈不确定预期的效果是什么？好吧，这些点应该在它们的最终和初始位置之间平滑地交替，但我看不出它在你这边是如何呈现的，我很难详细解释哈哈哈对不起@guest271314这里是一个视频，右下角看起来不错，其他一切都很糟糕，hahaIt工作完美！（看起来也更优雅）虽然我真的希望你能一步一步地解释，因为我对数学不在行哈哈，提前谢谢@未定义我添加了一些关于数学的细节。

// 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);