如何使用 Angular 9 制作 stop/pause/resume SVG 动画？

Question

SVGSVGElement 的规范包含 pauseAnimations() 或 unpauseAnimations() 等方法。但是我怎样才能在 Angular 9 中访问这些方法呢？或者我如何 pause/resume 一个 SVG 路径动画？

<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 中我会做这样的事情：

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

但是当我使用 Angular 9 时，我得到一个编译错误：

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

那么问题来了：怎么办？

Answer 1

所以在这里您需要访问#rootSVG 上的方法：SVGSVGElement。

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

<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，然后您可以开始调用相关方法：

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 制作 stop/pause/resume SVG 动画？

How to do stop/pause/resume SVG animations with Angular 9?

angular

svg

angular-animations

svg-animate