Question

我希望你能帮助我，因为我遇到了我的克星......数学！

我正在制作一个不断运行的背景动画，它可以很好地处理一个小问题，它会在很长一段时间内加速很少。

我已经提取了对脚本至关重要的代码。

动画很简单，它会创建一堆圆圈然后以圆周运动永远移动。创作时随机更快/更慢，更大/更小。

所以如果动画运行让我们说40分钟〜圆形动画会增加它的速度很多！

构造函数运行大约100次，实例放在粒子数组中，这里我只是在实例化圆圈时设置默认值

constructor(){
   this.radius = 100;
   this.xPos = Math.round(Math.random() * canvas.width);
   this.yPos = Math.round(Math.random() * canvas.height);
   this.counter = 0;
   this.maxWidth = 14;
   this.width = Math.floor(Math.random() * (this.maxWidth - 4) + 4); //4 -> 24
   this.speed = Math.random() * 0.4; //0.0 -> 0.4
   this.color = "#3cccd3";
   this.alpha = this.getAlpha();

   this.sign = Math.round(Math.random()) * 2 - 1;
 }

绘制方法是在动画循环中运行的，我已经检查了许多关于动画圆周运动的例子，这似乎是流行的方法，但是动画不像我的那样加速：）

draw() {
  this.counter += this.sign * this.speed;

  ctx.beginPath();
  //define the circleparticle
  ctx.arc(this.xPos + this.radius * Math.cos(this.counter / 100) ,
        this.yPos + this.radius * Math.sin(this.counter / 100) ,
        this.width,
        0,
        Math.PI * 2,
        true);


  ctx.globalAlpha = this.alpha;
  ctx.fillStyle = this.color;
  ctx.fill();
}

这只是循环

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); //empty the canvas
    particles.forEach((particle) => particle.draw()); //run the draw method

    if(playParticles && !gameFocus) {
      requestAnimationFrame(draw); //rerun
    }
}

在此更新

在构造函数

中

this.speed = 100 + Math.random() * 500;

在绘制方法

中

this.timestamp = Math.floor(Date.now());
this.counter = this.sign * (this.timestamp / this.speed * Math.PI);

Answer 1

我在代码中找不到任何解释旋转速度持续增加的内容。

但是，动画的速度是调用draw方法的频率的乘积。您为每次调用将计数器增加一个固定的数量，但不保证它将以任何给定的频率被调用。

requestAnimationFrame每次准备好进行新渲染时都会调用绘图函数。它的时间可能会因许多因素而异，例如每次抽奖所需的时间，网页的总计算负载，设备的总CPU负载或电源设置。

不要让计数器成为绘制方法调用计数的乘积，而应考虑使其成为时间的乘积。因此，requestAnimationFrame( function(timestamp) { var counter = timestamp / 1000 * Math.PI; var x = Math.cos(counter); var y = Math.sin(counter); // do something with x and y } );回调的第一个参数是一个时间戳，应该用作该渲染的每个部分的当前时间。

编辑：示例代码

以下代码是一个简化的例子，产生x和y，它们共同描述了每秒一转的圆周运动。

<TableRow>

    <TextView
        android:id="@+id/lblListHeader"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:singleLine="true"
        android:text="Form"
        android:textColor="#000" />

    <Spinner
        android:id="@+id/spinner1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:drawable/btn_dropdown"
        android:spinnerMode="dropdown" />

</TableRow>

运行一段时间后，圆形动画会加速

1 个答案: