Interfejs Web Animations API, wprowadzony na początku w Chrome 36, umożliwia wygodne sterowanie animacjami w przeglądarce przy użyciu JavaScriptu. Obecnie wdrażany jest w środowiskach Gecko i WebKit.
W Chrome w wersji 50 wprowadzamy zmiany, które poprawiają interoperacyjność z innymi przeglądarkami i zapewniają większą zgodność ze specyfikacją. Te zmiany to:
- Anuluj wydarzenia
Animation.id- Zmiana stanu metody
pause() - Wycofanie przerywanych nazw jako kluczy w klatkach kluczowych
W Chrome 51 wprowadziliśmy niektóre z tych zmian:
- Usunięcie przerywanych nazw jako kluczy w klatkach kluczowych
Anuluj wydarzenia
Interfejs animacji zawiera metodę anulowania animacji (co zabawnie nazywa się cancel()).
Chrome 50 implementuje wywołanie zdarzenia anulowania, gdy metoda jest wywoływana zgodnie ze specyfikacją, co powoduje obsługę zdarzeń przez atrybut oncancel, jeśli została zainicjowana.
Obsługa pliku Animation.id
Gdy tworzysz animację w element.animate(), możesz przekazywać wiele właściwości. Oto przykład animacji przezroczystości obiektu:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
Jeśli określisz właściwość id, zostanie ona ustawiona na zwrócony obiekt Animation, co może być przydatne podczas debugowania treści, gdy masz do dyspozycji wiele obiektów Animation. Oto przykład określania id na potrzeby tworzonej animacji:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
Zmiana stanu metody wstrzymania()
Metoda pause() służy do wstrzymywania trwającej animacji. Jeśli sprawdzisz stan animacji za pomocą atrybutu playState, po wywołaniu metody paused() powinien on być ustawiony na paused. W wersjach Chrome starszych niż 50 atrybut playState wskazuje wartość idle, jeśli animacja się nie rozpoczęła, ale teraz odzwierciedla prawidłowy stan, czyli paused.
Usunięcie przerywanych nazw jako kluczy w klatkach kluczowych
Aby zachować zgodność ze specyfikacją i innymi implementacjami, Chrome 50 wysyła do konsoli ostrzeżenie, jeśli w animacjach klatek kluczowych dla kluczy w animacji klatki kluczowej używane są przerywane nazwy. Prawidłowe ciągi znaków to nazwy CamelCase zgodnie z właściwością CSS w algorytmie konwersji atrybutu IDL.
Na przykład właściwość CSS margin-left wymaga przekazania marginLeft jako klucza.
Chrome 51 całkowicie eliminuje obsługę przerywanych nazw, dlatego jest to dobry moment, żeby poprawić istniejące treści, podając w nich poprawne nazwy zgodne ze specyfikacją.
Podsumowanie
Te zmiany przybliżają implementację Animacji internetowych w Chrome do implementacji w innych przeglądarkach i zwiększają ich zgodność ze specyfikacją, co pomaga uprościć tworzenie treści stron internetowych i poprawić współdziałanie.