Question

我一直试图通过在单个组件上使用canvas来对Angular v5.2.10中的某些项目进行动画处理，并且遇到requestAnimationFrame问题。

对于在console.log（）中记录的前4000帧，动画运行顺畅。 8000帧后，应用程序崩溃。我用angula cli v1.6.7生成了一个简单的应用程序，并添加了这个组件，在8000帧记录后仍然会崩溃应用程序。

我是画布的新手并在Vanillajs中运行此应用程序，这很好。在Angular上制作动画画布时，我有什么遗漏吗？

我感谢任何反馈。

这是我的组件的代码。

animation.component.ts：

  @ViewChild('myCanvas') canvas: ElementRef;
  public ctx: CanvasRenderingContext2D;

  width: number = 320;
  height: number = 480;

  frames: number = 0;

  ngAfterViewInit(){
    this.main();
  } 

  main(){
    this.ctx = <HTMLCanvasElement>this.canvas.nativeElement).getContext('2d');
      // run Game
    this.run();
  }

  run(){
    this.update();
    this.render();

    requestAnimationFrame(()=> this.run());
  }

  update(){
    console.log(this.frames);
    this.frames++;
  }

  render(){
   // Image would render here
  }

animation.component.html

<canvas 
    #myCanvas width={{width}} height={{height}}></canvas>

更新：我已经使用堆快照对此进行了测试，以检查内存泄漏但是当应用处于第0帧和第5000帧时没有发生任何变化

更新：我已将RequestAnimationFrame设置为在zone.js之外运行，例如show here。 https://github.com/angular/angular/issues/8401。

this.ngZone.runOutsideAngular(() => { 
 let loop = () => {       
    this.update();         
    this.render();
    requestAnimationFrame(loop);    

  };

  requestAnimationFrame(loop);  
}

但是动画仍然在第8000帧崩溃。

Canvas + Angular 5 requestAnimationFrame崩溃

这是我的组件的代码。

0 个答案: