Natywna obsługa animacji internetowych została po raz pierwszy udostępniona w Chrome 36, a dodana do funkcji sterowania odtwarzaniem w Chrome 39. Metoda Element.animate() może być używana do wywoływania imperatywnych animacji bezpośrednio w JavaScript, a zwrócony obiekt można wykorzystać do sterowania ich odtwarzaniem. Szczegóły tych metod znajdziesz w bieżącej wersji roboczej specyfikacji Web Animations W3C.
Obecnie pracujemy nad wysłanym kodem polyfill, który śledzi wszystkie zaimplementowane natywnie wszystkie funkcje animacji internetowych. Funkcja ta jest obsługiwana we wszystkich nowoczesnych przeglądarkach. Te podstawowe metody są już gotowe do użycia i warto uwzględnić w Twoich narzędziach do tworzenia zaawansowanych funkcji wykorzystujących animacje (np. w aplikacji internetowej Google I/O 2015).
Zmiany w konstruktorze i grupach
Specyfikacja Web Animations opisuje też grupy i sekwencje oraz konstruktory animacji i odtwarzaczy. Funkcje te są dostępne w kodie polyfill web-animations-next, który umożliwia zaprezentowanie funkcji, które są nadal dyskutowane i nie zostały jeszcze wdrożone natywnie. W odpowiedzi na opinie deweloperów zespół tworzący animacje internetowe zmienia nazwy tych funkcji na bardziej zrozumiałe.
Przedstawiciele zespołu FXTF niedawno spotkali się w Sydney w Australii i omówili naming, ponieważ wielu deweloperów podniosło uzasadnione wątpliwości, że niektóre z nazw mogą być mylące. W związku z tym uzgodniono następujące zmiany w nazwach:
- Animacja zmieni się w KeyframeEffect
- AnimationSequence ma teraz wartość SequenceEffect.
- AnimationGroup zmienia się na AnimationGroup
- AnimationPlayer zmieni się na Animation.
Pamiętaj, że chociaż animacje i ich odtwarzacze są dostępne natywnie w Chrome i w ramach kodu polyfill, obecnie są tworzone bezpośrednio przy użyciu metody Element.animate(). Obecny kod, który korzysta z metody Element.animate(), nie wymaga żadnych zmian.
Nowe nazwy dokładniej odzwierciedlają sposób działania każdego obiektu. KeyframeEffect opisuje na przykład efekty oparte na klatkach kluczowych, które mogą być kierowane na elementy HTML. Dla porównania nowy obiekt Animation reprezentuje animację w jednym z wielu stanów (np. odtwarzana, wstrzymana itp.).
SourceCodeEffect
Jeśli używasz niektórych wersji roboczej specyfikacji za pomocą kodu polyfill web-animations-next, musisz zaktualizować swój kod w okresie wycofywania, aby uwzględnić te nowe nazwy. Zgodnie z zasadami dotyczącymi zmian polyfill będziemy obsługiwać starszą wersję przez 3 miesiące i udostępniać w konsoli ostrzeżenia, jeśli witryna korzysta z wycofanych funkcji lub nazw.
Jeśli chcesz wypróbować te funkcje, zachęcamy do korzystania z nowych nazw w wersji 2 kodu polyfill. Pamiętaj też, by zasubskrybować grupę web-animations-changes, by otrzymywać informacje o innych zmianach.