Sterowanie odtwarzaniem animacji internetowych w Chrome 39

Sam Thorogood

Na początku tego roku w Chrome 36 pojawiła się metoda „element.animate” w ramach szerszej specyfikacji animacji internetowych. Pozwala to tworzyć efektywne, natywne animacje, dając programistom możliwość tworzenia animacji i przejść w najbardziej odpowiedni sposób.

Oto jak możesz animować chmurę na ekranie, by po zakończeniu oddzwonić:

var player = cloud.animate([
    {transform: 'translateX(' + start + 'px)'},
    {transform: 'translateX(' + end + 'px)'}
], 5000);
player.onfinish = function() {
    console.info('Cloud moved across the screen!');
    startRaining(cloud);
};

To proste rozwiązanie, które warto wziąć pod uwagę podczas tworzenia animacji lub przejść. Jednak w Chrome 39 do obiektu AnimationPlayer zwracanego przez element.animate dodaliśmy funkcje sterowania odtwarzaniem. Wcześniej po utworzeniu animacji można było tylko wywołać funkcję cancel() lub nasłuchiwać zdarzenia końcowego.

Te dodatkowe funkcje odtwarzania poszerzają możliwości animacji internetowych – zmieniają animacje w narzędzie ogólnego przeznaczenia, zamiast narzucać im ograniczeń w przejściach, tj. „stałe” lub wstępnie zdefiniowane animacje.

Wstrzymywanie, przewijanie do tyłu i zmiana szybkości odtwarzania

Zacznijmy od zaktualizowania tego przykładu, tak aby wstrzymywał animację po kliknięciu chmury:

cloud.addEventListener('mousedown', function() {
    player.pause();
});

Możesz też zmodyfikować właściwość playbackRate:

function changeWindSpeed() {
    player.playbackRate *= (Math.random() * 2.0);
}

Możesz też wywołać metodę reverse(), która normalnie odpowiada odwróceniu bieżącej wartości playbackRate (pomnożysz przez -1). Jest jednak kilka szczególnych przypadków:

  • Jeśli zmiana spowodowana przez metodę reverse() spowodowałaby skuteczne zakończenie aktywnej animacji, parametr currentTime również jest odwrócony – np.jeśli zupełnie nowa animacja zostanie odwrócona, cała animacja zostanie odtworzona wstecz.

  • Jeśli odtwarzacz jest wstrzymany, rozpocznie się odtwarzanie animacji.

Czyszczenie odtwarzacza

Teraz element AnimationPlayer umożliwia modyfikowanie currentTime podczas odtwarzania animacji. Normalnie ta wartość będzie z czasem wzrastać (lub się zmniejsza, jeśli playbackRate jest ujemna). Pozwala to kontrolować pozycję animacji z zewnątrz, na przykład przez interakcję użytkownika. Jest to często nazywane przeglądaniem treści.

Jeśli na przykład strona HTML reprezentuje niebo i chcesz wykonać gest przeciągania, aby zmienić położenie aktualnie odtwarzanej chmury, możesz dodać do dokumentu kilka modułów obsługi:

var startEvent, startEventTime;
document.addEventListener('touchstart', function(event) {
    startEvent = event;
    startEventTime = players.currentTime;
    player.pause();
});
document.addEventListener('touchmove', function(event) {
    if (!startEvent) return;
    var delta = startEvent.touches[0].screenX -
        event.changedTouches[0].screenX;
    player.currentTime = startEventTime + delta;
});

Gdy przeciągniesz kursor po dokumencie, pole currentTime zostanie zmienione w celu odzwierciedlenia odległości od pierwotnego wydarzenia. Możesz też wznowić odtwarzanie animacji po zakończeniu gestu:

document.addEventListener('touchend', function(event) {
    startEvent = null;
    player.play();
});

Można to nawet połączyć z odwracaniem kodu w zależności od miejsca, w którym użytkownik został odsunięty na stronie (połączona wersja demonstracyjna).

Zamiast przewijać element AnimationPlayer w odpowiedzi na interakcję użytkownika, jego parametr currentTime może też służyć do pokazywania postępu lub stanu, na przykład do pokazania stanu pobierania.

Dzięki temu AnimationPlayer umożliwia ustawienie wartości, a implementacja natywna będzie obsługiwać wizualizację postępu. W tym przypadku czas trwania animacji można ustawić na całkowity rozmiar pobierania, a currentTime na obecnie pobrany rozmiar (prezentacja).

Przejścia i gesty interfejsu

Platformy mobilne od dawna są królestwem popularnych gestów: przeciągania, przesuwania, przerzucania itd. Gesty te mają zwykle wspólną tematykę: są to elementy interfejsu, które można przeciągać w interfejsie, np. opcja „Pociągnij, aby odświeżyć” w widoku listy lub pasek boczny generowany z lewej strony ekranu.

Dzięki Animacjom internetowym podobny efekt można łatwo odtworzyć w sieci – na komputerze lub telefonie. Jeśli na przykład gest kontrolujący currentTime zakończy:

var steps = [ /* animation steps */ ];
var duration = 1000;
var player = target.animate(steps, duration);
player.pause();
configureStartMoveListeners(player);

var setpoints = [0, 500, 1000];
document.addEventListener('touchend', function(event) {
    var srcTime = player.currentTime;
    var dstTime = findNearest(setpoints, srcTime);
    var driftDuration = dstTime - srcTime;

    if (!driftDuration) {
    runCallback(dstTime);
    return;
    }

    var driftPlayer = target.animate(steps, {
    duration: duration,
    iterationStart: Math.min(srcTime, dstTime) / duration,
    iterations: Math.abs(driftDuration) / duration,
    playbackRate: Math.sign(driftDuration)
    });
    driftPlayer.onfinish = function() { runCallback(dstTime); };
    player.currentTime = dstTime;
});

Powoduje to utworzenie dodatkowej animacji, która wykonuje „dryf”. To odtwarzanie od miejsca, w którym gest został wykonany, aż do naszego dobrze znanego celu.

Jest to możliwe, ponieważ priorytet animacji zależy od kolejności ich tworzenia: w tym przypadku parametr driftPlayer ma pierwszeństwo przed odtwarzaczem. Po zakończeniu eksperymentu driftPlayer i jego efekty znikną. Ostateczny czas będzie się jednak zgadzać z czasem bieżącym gracza, dzięki czemu interfejs użytkownika pozostanie spójny.

Jeśli lubisz kocięta, możesz skorzystać z demonstracyjnej aplikacji internetowej, w której znajdziesz te gesty. Jest dostosowany do urządzeń mobilnych i korzysta z kodu polyfill, aby zapewnić zgodność wsteczną. Spróbuj więc załadować go na urządzeniu mobilnym.

Idź dalej, aby użyć elementu item.animate

Metoda element.animate jest właśnie w tej chwili świetna – niezależnie od tego, czy używasz jej do prostych animacji czy wykorzystujesz zwracaną przez nią wartość AnimationPlayer na inne sposoby.

Te dwie funkcje są w pełni obsługiwane również w innych nowoczesnych przeglądarkach za pomocą lekkiego modułu polyfill. Ten kod polyfill obejmuje również wykrywanie funkcji, dzięki czemu wraz z wdrażaniem specyfikacji przez dostawców przeglądarek ta funkcja będzie z czasem stawać się szybsza i lepsza.

Specyfikacja Web Animations również będzie ewoluować. Jeśli chcesz wypróbować nowe funkcje, znajdziesz je teraz w bardziej szczegółowym polyfill: web-animations-next.