Изменить направление во время анимации (с использованием ванильного JS анимации)

Question

Я искал способ, чтобы прервать анимацию и изменить направление, что-то вроде:

var elem = document.getElementById('elem'); 
 
var rightwards = false; 
 
var leftKeyframe = { transform: 'translate(0)' }; 
 
var rightKeyframe = { transform: 'translate(200px, 0)' }; 
 

 
function toggledirection() { 
 
    rightwards = !rightwards; 
 

 
    if (rightwards) { 
 
     elem.animate([leftKeyframe, rightKeyframe], 1000); 
 
    } else { 
 
     elem.animate([rightKeyframe, leftKeyframe], 1000); 
 
    } 
 
}

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 3px solid grey; 
 
}

<div id="elem"></div> 
 
<button onclick="toggledirection();">Toggle Direction</button>

Однако, обратите внимание, как у меня есть чтобы определить начальную позицию каждой анимации, поэтому, когда я прерываю текущую анимацию, ящик переходит в новую начальную позицию и переходит оттуда. Я бы хотел, чтобы ящик начинал с того места, где он сейчас находится like so (но это использует анимацию CSS, тогда как я ищу решение JS). Единственный метод, который я имею до сих пор, - это получить текущий перевод на parsing the transform string, но мне было интересно, был ли более простой способ.

Answer 1

Я сделал несколько тестов:
- here (JsFiddle) используя элемент, вычисленный для изменения анимации.
- и here (JsFiddle) с использованием анимационного метода .reverse при проверке playState.

В первой скрипте я запустил новую анимацию, нажав каждую кнопку, поэтому, когда вы отмените ее, пока она все еще переходит, анимация потребует 1 секунду для завершения, даже если элемент 2 px удален от точки назначения.

также помнить, что window.getComputedStyle(element) == element.style

---

Animation API:
- http://caniuse.com/#feat=web-animation
- https://developer.mozilla.org/en-US/docs/Web/API/Animation

getComputedStyle:
- https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle