SVG动画由Aurelia控制

Question

I have a problem with an animation controlled with 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

Right now the animation starts when the button is clicked. ie: when I click the "Opening" button the opening animation starts, then switch to "Closing" and the closing animation is in the middle. When the animation is done I am not able to run it again.

What I'd like to do it here is to start the proper animation (opening or closing) when I click the button connected to it everytime I click it.

I don't want to use SVG.beginElement() here.

Thanks

Answer 1

The issue you got is because SVG animation via <animateTransform/> by default is run only once. Try adding an attribute repeatCount="indefinite" , it will work as expected.

Here is a link to a working version https://stackblitz.com/edit/aurelia-javascript-p77wvh?file=src%2Fapp.js