Как изменить длительность SVG-анимации без изменения позиции элемента на пути? - PullRequest
Новая
       78

Как изменить длительность SVG-анимации без изменения позиции элемента на пути?

0 голосов
/ 11 апреля 2020

Я пытаюсь реализовать симуляцию трека в Angular 9. В очень упрощенном примере фигурист начинает с расчетным временем финиша, например, 10se c. 

<svg:circle r="10" fill="red" stroke-width="2" stroke="#00a2c1">
    <svg:animateMotion
        [attr.dur]="duration" 
        begin="0s"
        path="M 450 440 L 740 440 A 50 50 0 1 0 740 100 L 450 100 L 200 100 A 50 50 0 1 0 200 440 L 450 440"
        repeatCount="2" 
        calcMode="linear"
        fill="freeze"
    />
</svg:circle>

Начальная продолжительность установлена ​​на это значение. Но сейчас приходит первое время измерения. На основе измеренного значения время окончания повторно экстраполируется, которое теперь составляет, например, 20se c. 

public duration:string = '10s';

ngOnInit() {
    setTimeout(() => {
        this.duration = '20s';
        this.changeDetectorRef.detectChanges(); 
    }, 2000);
}

Теперь возникает проблема: при изменении продолжительности анимации текущего пути весь путь пересчитывается, и точка возвращается на траекторию (см. https://stackblitz.com/edit/angular-jbknyt).

Как можно обновить / изменить длительность пути, не перемещая окружность из текущей позиции?

Я хотел бы иметь такое поведение: когда измеренное время медленнее, чем начальное значение, точка «ждет» на дорожке. Когда измеренное время быстрее, чем точка быстро движется вперед на пути ... Есть ли способ сделать это?

1 Ответ

2 голосов
/ 11 апреля 2020

Если мы удвоим длительность через 2 секунды, то в нашей новой временной шкале мы должны быть 4 секунды. 

// Write Javascript code!
const anim = document.getElementById('anim');
const svg = document.getElementsByTagName('svg')[0];

setTimeout(() => {
  console.log("change")

  anim.setAttribute('dur','20s');
  svg.setCurrentTime(4);
  
}, 2000);
<svg  width="400" viewBox="-20 50 1000 460" xmlns="http://www.w3.org/2000/svg">

	<path fill="#defefe" stroke-width="2" stroke="#000" path="M 450 440 L 740 440 A 50 50 0 1 0 740 100 L 450 100 L 200 100 A 50 50 0 1 0 200 440 L 450 440" />

	<circle r="10" fill="red" stroke-width="2" stroke="#00a2c1">
		<animateMotion
      id="anim"
	    dur="10s" 
			path="M 450 440 L 740 440 A 50 50 0 1 0 740 100 L 450 100 L 200 100 A 50 50 0 1 0 200 440 L 450 440"
	    repeatCount="2" 
	    calcMode="linear"
			fill="freeze"
		/>
	</circle>
</svg>
...