通过画布描绘星星的不透明度

Question

如何动画的不透明的星星画在画布上？我在试图在一座山后面画多颗星星。到目前为止，我能想到两个选择。

1. 我可以使用2层图像，并隐藏群星后面的山区层，并使用css3关键帧动画对不透明度的星星。
2. 通过画布绘制前景(山脉)和背景(星星)。这就是我现在所采取的方法。

我有两个问题。

1. 不透明的星星翻转/闪烁的速度非常快，我能在动画之间增加延迟吗？目前，我正在调用无限循环window.requestAnimationFrame(this.animate);，我尝试使用setInterval，但是动画并不像requestAnimationFrame那么流畅
2. 我能最终停止这种闪烁的效果吗？

这是在react组件的内部编写的。

  // Animation Loop
  animate = () => {
    window.requestAnimationFrame(this.animate);
    this.c.clearRect(0, 0, this.canvas.width, this.canvas.height);

    // fill background
    this.c.fillStyle = this.backgroundGradient;
    this.c.fillRect(0, 0, this.canvas.width, this.canvas.height);

    // createmountainRange
    this.createMountainRange(1, this.canvas.height - 50, "#384551");
    this.createMountainRange(2, this.canvas.height - 150, "#2B3843");
    this.createMountainRange(3, this.canvas.height - 250, "#26333E");

    this.backgroundStars.forEach(backgroundStar => {
      this.draw(backgroundStar);
    });
  };

  //draw function
  draw = star => {

    const opacity = 1 / utils.randomIntFromRange(1, 10);
    this.c.save() // only affects code in between
    this.c.beginPath();
    this.c.arc(star.x, star.y, star.radius, 0, Math.PI * 2, false);
    this.c.fillStyle = `rgba(227, 234, 239, ${opacity})`
    this.c.shadowColor = '#e3eaef'
    this.c.shadowBlur = 20
    this.c.fill();
    this.c.closePath();
    this.c.restore()

    console.log('opacity', opacity)
  };

Answer 1

1. 您可以给每个星体一个单独的属性，以指示何时重新计算不透明度(也将存储在属性中)，并且只在这些点上对其进行更改；您可以使用基本宽松(如source * (1 - factor) + target * factor，或查找公式)在原始不透明度和新不透明度之间逐步过渡。
2. 在上述情况下，一旦不再需要α，您将使用一个条件来停止重新计算alpha。

一个单独的画布方法可以使用，但只有当你希望所有的恒星有完全相同的阿尔法在任何给定的点；

您可能可以使用globalAlpha，而不是缝纫新的fillStyle在每次抽签，这也可能看起来更好的阴影。

Answer 2

您的动画函数有一个框架参数，可以与sin函数一起使用以添加闪烁效果，我需要更多的代码来检查是否有一个精确的解决方案，但是您可以尝试这样的方法：

  // Animation Loop
  animate = (frame) => {
    window.requestAnimationFrame(this.animate);
    this.c.clearRect(0, 0, this.canvas.width, this.canvas.height);

    // fill background
    this.c.fillStyle = this.backgroundGradient;
    this.c.fillRect(0, 0, this.canvas.width, this.canvas.height);

    // createmountainRange
    this.createMountainRange(1, this.canvas.height - 50, "#384551");
    this.createMountainRange(2, this.canvas.height - 150, "#2B3843");
    this.createMountainRange(3, this.canvas.height - 250, "#26333E");

    this.backgroundStars.forEach((backgroundStar, i) => {
      this.draw(backgroundStar, i, frame || 0);
    });
  };

  //draw function
  draw = (star, index, frame) => {

    const opacity = Math.sin(index * frame * 0.01);
    this.c.save() // only affects code in between
    this.c.beginPath();
    this.c.arc(star.x, star.y, star.radius, 0, Math.PI * 2, false);
    this.c.fillStyle = `rgba(227, 234, 239, ${opacity})`
    this.c.shadowColor = '#e3eaef'
    this.c.shadowBlur = 20
    this.c.fill();
    this.c.closePath();
    this.c.restore()

    console.log('opacity', opacity)
  };