Sunday, October 2, 2022
HomeiOS Developmentjavascript - Flickering horizontal strains on the animation made with canvas solely...

javascript – Flickering horizontal strains on the animation made with canvas solely on iOS 16


I’ve webview utility the place on the splash display screen there may be an animation with 2 gradients ‘waves’ made utilizing canvas. After I opened it with iOS 16 I seen that there are some scrange horizontal strains flickering in the course of the animation.

enter image description here

It occurs solely when the app is opened on the machine with iOS 16.

I draw these animation with the code under:

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

    if (quicker) {
      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(
      quicker,
      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,
        quicker,
        frames,
        frequency,
        phi,
        startingHeightPosition,
      });
    });
  };

After I was testing it, I seen that after I take away gradient from the animation waves these flickering strains additionally disappear. I’ve the gradient injected like under:

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

I can not reproduce it on the browser(safari, chrome), on XCODE simulator or android simulator. It occurs solely on the actual machine with iOS 16.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments