Interfejs Web Animations API, który został po raz pierwszy udostępniony w Chrome 36, umożliwia wygodne sterowanie animacjami w przeglądarce za pomocą JavaScriptu. Jest on też implementowany w Gecko i WebKit.
Chrome 50 wprowadza zmiany, które poprawiają współdziałanie z innymi przeglądarkami i zwiększają zgodność ze specyfikacją. Te zmiany to:
- Anulowanie wydarzeń
Animation.id- Zmiana stanu metody
pause() - wycofanie nazw z pochylonymi znakami jako kluczy w klatkach kluczowych;
W Chrome 51 niektóre z tych zmian zostały sfinalizowane:
- Usuwanie nazw z myślnikami jako kluczy w klatkach kluczowych
Anulowanie wydarzeń
Interfejs Animation zawiera metodę anulowania animacji, która z ciekawym trafem nosi nazwę cancel().
Chrome 50 implementuje wywołanie zdarzenia anulowania, gdy metoda jest wywoływana zgodnie ze specyfikacją, co powoduje obsługę zdarzenia za pomocą atrybutu oncancel, jeśli został zainicjowany.
Obsługa Animation.id
Podczas tworzenia animacji za pomocą funkcji element.animate() możesz przekazywać różne właściwości. Oto przykład animacji krycia obiektu:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
Określając właściwość id, możesz ją ustawić w zwracanym obiekcie Animation. Może to ułatwić debugowanie treści, gdy masz do czynienia z dużą liczbą obiektów Animation. Oto przykład określania id dla animacji, którą instancjujesz:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
Zmiana stanu w przypadku metody pause()
Metoda pause() służy do wstrzymywania trwającej animacji. Jeśli stan animacji jest sprawdzany za pomocą atrybutu playState, po wywołaniu metody paused() powinien on być ustawiony na paused. W wersjach Chrome starszych niż 50 atrybut playState wskazywał wartość idle, jeśli animacja jeszcze się nie rozpoczęła, ale teraz odzwierciedla prawidłowy stan, czyli paused.
Usuwanie nazw z myślnikiem jako kluczy w klatkach kluczowych
Aby zapewnić zgodność ze specyfikacją i innymi implementacjami, Chrome 50 wysyła ostrzeżenie do konsoli, jeśli w animacjach kluczy klawiszy używa się nazw z myślnikiem. Prawidłowe ciągi znaków to nazwy w sposobach camelCase zgodnie z właściwością CSS do atrybutu IDL conversion algorithm.
Na przykład w przypadku właściwości CSS margin-left musisz podać klucz marginLeft.
W Chrome 51 całkowicie usuwamy obsługę nazw z łącznikami, więc teraz jest dobry moment na poprawienie istniejących treści i zastosowanie prawidłowej nazwy zgodnie ze specyfikacją.
Podsumowanie
Te zmiany sprawiają, że implementacja animacji internetowych w Chrome jest bardziej zbliżona do implementacji w innych przeglądarkach i bardziej zgodna ze specyfikacją, co ułatwia tworzenie treści na stronach internetowych i poprawia interoperacyjność.