Javascript анимации запознаване с JavaScript Web Animation API
За да покажем как новият API е по-добър от класическия CSS анимационен подход, нека разгледаме два прости примера на код за всеки подход.
Нашата css анимация е дефинирана в код>@keyframes и представлява времевата линия за всички преходи.
Нуждаем се от анимацията да започне след взаимодействие с потребителя, така че се нуждаем от JS слушател на събития:
Можем да опишем анимацията в JS, като използваме същите преходи като в CSS:
Всеки обект в масива представлява състояние на анимация. Състоянията са равномерно разпределени във времето (3 състояния - 0%, 50%, 100%).
След като дефинираме състоянията в масива, можем да ги извикаме с помощта на метода animate():
Както можете да видите, JS подходът е по-сбит и организиран, всички състояния са в един файл и се извикват чрез метода animate ().
Контрол на анимацията
API за уеб анимация също ви позволява да контролирате възпроизвеждането на анимация по няколко начина.
Методът animate() връща обект Animation, който може да бъде съхранен в променлива и достъпен при необходимост.
Интерфейсът на обекта предоставя следните методи:
pause() - ще спре анимацията в текущото състояние.play() - ще започне възпроизвеждането на анимацията от текущото състояние или от началото, ако е приключилоreverse() - ще възпроизведе преходите в обратен ред.finish() - отива в края на анимацията (или в началото, ако възпроизвеждането е в обратен ред)cancel() - спира възпроизвеждането и се връща в първоначалното състояние.
По-долу има малък пример с циклична анимация. Можете да използвате бутоните, за да управлявате възпроизвеждането му.
Свойства и слушатели на събития
Обектът Animation също ви позволява да получитедостъп до свойства като текущо време на възпроизвеждане, скорост на възпроизвеждане и някои други. Докато някои методи са само за четене, други могат да се използват като сетери и гетери.
В допълнение, API за уеб анимация позволява достъп до два важни манипулатора на събития: когато анимацията е приключила и когато е била отменена.