animation 上闪烁的水平线仅在 iOS 上使用 canvas 制作 16

Question

我有 webview 应用程序，在启动屏幕上有一个 animation，带有使用 canvas 制作的 2 个渐变“波浪”。当我用 iOS 16 打开它时，我注意到在 animation 期间有一些闪烁的水平线闪烁。

只有当应用程序在 iOS 16 的设备上打开时才会发生。

我用下面的代码绘制了这些 animation：

  public drawWaveAnimation = (
    windowHeight: number,
    windowWidth: number,
    {
      canvas,
      context,
      heightRatio,
      frameRatio,
      trygonometricalFunction,
      gradientColors,
      faster,
      frames,
      frequency,
      phi,
      startingHeightPosition,
    }: WaveAnimationOptions
  ) => {
    this[canvas].nativeElement.height = windowHeight;
    this[canvas].nativeElement.width = windowWidth;
    const cw = this[canvas].nativeElement.width;
    const ch = this[canvas].nativeElement.height;

    if (faster) {
      frames += this.changeAnimationSpeed(frames);
    } else {
      frames += 0.6;
    }

    phi = frames / frameRatio;

    this[context].clearRect(0, startingHeightPosition, cw, ch);
    this[context].beginPath();

    this[context].translate(0, startingHeightPosition);

    const reachHalfHeight = startingHeightPosition > windowHeight / 2;
    startingHeightPosition += this.changeGoingDownAnimationSpeed(
      faster,
      reachHalfHeight
    );

    this[context].moveTo(0, ch);

    const amplitude = windowHeight / parseFloat(heightRatio.toFixed(1));
    for (let x = 0; x < windowWidth; x += 1) {
      const y =
        (trygonometricalFunction(x * frequency + phi) * amplitude) / 2 +
        amplitude / 2;
      this[context].lineTo(x, y);
    }

    this[context].lineTo(windowWidth, ch);
    this[context].lineTo(0, ch);
    const gradient = this[context].createLinearGradient(
      0,
      0,
      window.innerWidth,
      0
    );
    gradient.addColorStop(0, gradientColors[0]);
    gradient.addColorStop(1, gradientColors[1]);
    this[context].fillStyle = gradient;
    this[context].fill();

    requestAnimationFrame(() => {
      this.drawWaveAnimation(windowHeight, windowWidth, {
        canvas,
        context,
        heightRatio,
        frameRatio,
        trygonometricalFunction,
        gradientColors,
        faster,
        frames,
        frequency,
        phi,
        startingHeightPosition,
      });
    });
  };

当我测试它时，我注意到当我从 animation 波中移除渐变时，这些闪烁的线条也会消失。 我有像下面这样的渐变注入：

const gradient = this[context].createLinearGradient(
      0,
      0,
      window.innerWidth,
      0
    );
    gradient.addColorStop(0, gradientColors[0]);
    gradient.addColorStop(1, gradientColors[1]);
    this[context].fillStyle = gradient;
    this[context].fill();

我无法在浏览器（safari、chrome）、XCODE 模拟器或 android 模拟器上重现它。 它只发生在 iOS 16 的真实设备上。

Answer 1

有同样的问题，看起来他们在 IOS 16.3 中修复了它