由Aurelia控制的SVG动画

Question

我对Aurelia控制的动画有问题。

app.html

<path
   style="fill:none;stroke:#000000;stroke-width:3"
   d="M 1.6443859,34.308976 C 0.37273852,24.831561 7.0248286,16.117725 16.502244,14.846077 25.979658,13.574431 34.693495,20.226519 35.965142,29.703934 37.236789,39.181349 30.5847,47.895186 21.107285,49.166833 15.541877,49.913581 10.23978,47.927929 6.5533998,44.242297"
>

 <animateTransform 
   attributeName="transform" attributeType="XML" type="rotate" from.bind="fromCW" 
   to.bind="toCW" dur.bind="duration" fill="freeze"
 />
</path>

<button repeat.for="state of states" click.trigger="changeState({state})">${state}</button>

app.ts

states = ["opening", "closing"];
duration:string = "10s";
rotationPoint: string = " 18.9 32.05";
rightRotation = -95 + this.rotationPoint;
leftRotation= 130 + this.rotationPoint;
zero = 0 + this.rotationPoint;
state:string;
fromCW:string;
fromCCW:string;
toCW:string; 
toCCW:string;

domeAnimate(): void{
  switch (this.state){
    case "opening":
      this.fromCW = this.fromCCW = this.zero;
      this.toCW= this.leftRotation;
      this.toCCW = this.rightRotation;
      break;
    case "closing":
      this.fromCW = this.leftRotation;
      this.fromCCW = this.rightRotation;
      this.toCW = this.toCCW = this.zero;
      break;
  }
}
changeState(id):void {
  this.state = id.state;
  this.domeAnimate();
}

Here is how does it look like

现在，单击按钮时动画开始。即：当我点击“打开”按钮时，开始动画开始，然后切换到“关闭”，结束动画在中间。动画完成后，我无法再次运行它。

我想在这里做的是每次点击它时单击连接到它的按钮时开始正确的动画（打开或关闭）。

我不想在这里使用SVG.beginElement()。

谢谢

Answer 1

你得到的问题是因为默认情况下通过<animateTransform/>的SVG动画只运行一次。尝试添加属性repeatCount="indefinite"，它将按预期工作。

这是一个工作版本https://stackblitz.com/edit/aurelia-javascript-p77wvh?file=src%2Fapp.js的链接