Управление анимацией SVG от Aurelia - PullRequest
Новая
       40

Управление анимацией SVG от Aurelia

0 голосов
/ 30 августа 2018

У меня проблема с анимацией, управляемой Аурелией.

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();
}

Вот как это выглядит

Прямо сейчас анимация начинается при нажатии кнопки. Т.е. когда я нажимаю кнопку «Открытие», начинается анимация открытия, затем переключается на «Закрытие», и анимация закрытия находится посередине. Когда анимация завершена, я не могу запустить ее снова.

Что я хотел бы сделать здесь, так это запустить правильную анимацию (открытие или закрытие), когда я нажимаю кнопку, подключенную к ней, каждый раз, когда я нажимаю на нее.

Я не хочу использовать SVG.beginElement() здесь.

Спасибо

1 Ответ

0 голосов
/ 14 сентября 2018

Проблема в том, что SVG анимация через <animateTransform/> по умолчанию запускается только один раз. Попробуйте добавить атрибут repeatCount="indefinite", он будет работать как положено.

Вот ссылка на рабочую версию https://stackblitz.com/edit/aurelia-javascript-p77wvh?file=src%2Fapp.js

...