如何使用Angular 9停止/暂停/恢复SVG动画?

问题描述：

SVGSVGElement的规范包含类似pauseAnimations()或unpauseAnimations()的方法.但是我怎样才能在Angular 9中访问这些方法呢?或者如何暂停/恢复SVG路径动画?

The spec of SVGSVGElement contains methods like pauseAnimations() or unpauseAnimations(). But how can I get access these methods in Angular 9? Or how can I pause/resume a SVG path animations?

<svg id="rootSVG" width="500" viewBox="50 0 700 400" xmlns="http://www.w3.org/2000/svg">
    <svg:circle r="10" fill="white" id="white">
        <svg:animateMotion
            id="innerTrack" 
            [attr.dur]="durationInner" 
            begin="indefinite" 
            repeatCount="0" 
            calcMode="linear"
            [attr.path]="innerPath"
            (begin)="status()"
        />
    </svg:circle>
</svg>

在纯JS中，我会做类似的事情:

In pure JS I would do domething like:

var pause = document.getElementById('innerTrack');
    pause.pauseAnimations();

但是当我用Angular 9进行操作时，出现编译错误:

But when I do it with Angular 9 I get a compilation error:

error TS2551: Property 'pauseAnimations' does not exist on type 'HTMLElement'. Did you mean 'getAnimations'?

所以问题是:怎么办?

答

因此，您需要在#rootSVG*问方法:SVGSVGElement.

So here you need to access the methods on your #rootSVG: SVGSVGElement.

要在Angular中这样做，您可以利用ViewChild并访问nativeElement及其方法:

To do so in Angular you can leverage ViewChild and access nativeElement and its methods:

<svg #rootSVG viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <svg:path fill="none" stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <svg:circle r="5" fill="red">
    <svg:animateMotion dur="3s" repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </svg:circle>
</svg>

现在在您的ts文件中，您需要在ngAfterViewInit挂钩中获取ViewChild，然后您可以开始调用有问题的方法了:

now in your ts file you need to get the ViewChild inside ngAfterViewInit hook, and after that you can start calling the methods in question:

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild('rootSVG') rootSVG;

  name = 'Angular';

  ngAfterViewInit() {

    setInterval(()=>{
      this.rootSVG.nativeElement.pauseAnimations();
    }, 500)

    setInterval(()=>{
      this.rootSVG.nativeElement.unpauseAnimations();
    }, 1500)
  }
}

此处正在演示: https://stackblitz.com/edit/angular-yngun9

如何使用Angular 9停止/暂停/恢复SVG动画?

相关推荐