css - 为通过 Canvas 绘制的星星的不透明度设置动画

Question

如何为通过 Canvas 绘制的星星的不透明度设置动画？我正在尝试在山后绘制多颗星星。到目前为止，我能想到 2 个选项。

1. 我可以使用 2 层图像，将星星隐藏在山层后面，并在星星的不透明度上使用 css3 关键帧动画。

2. 通过 Canvas 绘制前景(山脉)和背景(星星)。这就是我现在正在采取的方法。

我有两个问题。

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。

可以使用单独的 Canvas 方法，但前提是您希望所有星星在任何给定点都具有完全相同的 alpha；

您可以使用 globalAlpha 而不是在每次绘制时都缝合一个新的 fillStyle，这对于阴影也可能看起来更好。