Анимация элементов
Вы можете сделать веб-историю еще лучше, снабдив элементы внутри страницы начальной анимацией. Например, вы можете сделать так, чтобы ваш заголовок выезжал слева, падал на страницу, плавно появлялся и т. п. Платформа AMP-историй предоставляет следующие встроенные анимации:
| Пресет анимации | Продолжительность по умолчанию (мс) | Задержка по умолчанию (мс) |
|---|---|---|
drop | 1600 | 0 |
fade-in | 500 | 0 |
fly-in-bottom | 500 | 0 |
fly-in-left | 500 | 0 |
fly-in-right | 500 | 0 |
fly-in-top | 500 | 0 |
pulse | 500 | 0 |
rotate-in-left | 700 | 0 |
rotate-in-right | 700 | 0 |
twirl-in | 1000 | 0 |
whoosh-in-left | 500 | 0 |
whoosh-in-right | 500 | 0 |
pan-left | 1000 | 0 |
pan-right | 1000 | 0 |
pan-down | 1000 | 0 |
pan-up | 1000 | 0 |
zoom-in | 1000 | 0 |
zoom-out | 1000 | 0 |
Чтобы применить начальную анимацию к элементу, следует указать атрибут animate-in="<animation preset>" с одним из значений пресетов анимации. Например, чтобы текст «упал» на страницу, добавьте в текстовый элемент атрибут animate-in="drop":
<amp-story-page id="page3"> ... <amp-story-grid-layer template="vertical"> <p animate-in="drop">Drop this text into the page</p> </amp-story-page>
animate-in="<animation preset>" в элементы на страницах истории. Время анимации
Каждый пресет анимации имеет встроенное значение по умолчанию для следующих параметров:
- delay: время задержки запуска анимации. Например, задержка в 0,3 секунды означает, что анимация запускается через 0,3 секунды после отображения страницы. Задержка в 0 с запускает анимацию сразу же.
- duration: количество времени, в течение которого выполняется анимация. Например, анимация плавного появления элемента занимает 500 мс от начала до конца.
Вы можете настроить время анимации, изменив задержку или продолжительность с помощью атрибутов animate-in-delay и animate-in-duration. В следующем примере my-element «влетает» в страницу слева через 0,3 секунды и завершает «влет» течение 0,5 секунды:
<amp-story-page id="my-page"> ... <p class="my-element" animate-in="fly-in-left" animate-in-delay="0.3s" animate-in-duration="0.5s" > I'm going to fly into the page from the left! </p> </amp-story-page> Анимируем нашу последнюю страницу
Последняя страница нашей веб-истории состоит из двух слоев: первый слой представляет собой коллаж из изображений животных, а второй содержит текст баннера. Чтобы создать эту страницу, добавьте следующий код сразу после предыдущей страницы истории:
<amp-story-page id="page5"> <amp-story-grid-layer template="vertical" class="noedge"> <div class="wrapper"> <amp-img src="assets/cat.jpg" width="720" height="1280" layout="responsive" > </amp-img> <amp-img src="assets/dog.jpg" width="720" height="1280" layout="responsive" > </amp-img> <amp-img src="assets/bird.jpg" width="720" height="1280" layout="responsive" > </amp-img> <amp-img src="assets/rabbit.jpg" width="720" height="1280" layout="responsive" > </amp-img> </div> </amp-story-grid-layer> <amp-story-grid-layer template="vertical" class="center-text"> <p class="banner-text">Pets can lower your stress levels!</p> </amp-story-grid-layer> </amp-story-page> Перезагрузите AMP-историю в своем браузере и убедитесь, что страница отображается правильно и выглядит следующим образом:
Выглядит отлично, но статично! Давайте оживим ее.
Начнем с входной анимации текста баннера, чтобы он «влетал» на страницу справа. Добавьте в элемент <p> атрибут animate-in="whoosh-in-right"следующим образом:
<p class="banner-text" animate-in="whoosh-in-right"> Pets can lower your stress levels! </p> Перезагрузите страницу истории в браузере и убедитесь, что баннер «въезжает» на страницу.
Затем давайте сделаем так, чтобы все изображения постепенно проявлялись. Добавьте во все элементы amp-img атрибут animate-in="fade-in", чтобы код выглядел так:
<amp-img src="assets/cat.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in" > </amp-img> <amp-img src="assets/dog.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in" > </amp-img> <amp-img src="assets/bird.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in" > </amp-img> <amp-img src="assets/rabbit.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in" > </amp-img> Обновив и перезагрузив страницу, вы увидите, что изображения теперь отображаются с эффектом плавного появления. Это здорово, но эффект едва ли будет заметным, так как плавное появление всех изображений происходит одновременно! Мы можем сделать визуальный эффект более «эффектным», изменив скорость и время начала анимаций.
Давайте отложим появление первого изображения так, чтобы оно начиналось приблизительно к завершению «влета» текстового баннера — скажем, на отметке 0,4 с. Что касается остальных трех изображений, появление каждого из них мы будем начинать через 0,2 секунды после начала анимации появления предыдущего изображения. В каждый элемент amp-img добавьте атрибут animate-in-delay="" с соответствующим значением задержки. Ваш код должен выглядеть так:
<amp-img src="assets/cat.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in" animate-in-delay="0.4s" > </amp-img> <amp-img src="assets/dog.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in" animate-in-delay="0.6s" > </amp-img> <amp-img src="assets/bird.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in" animate-in-delay=".8s" > </amp-img> <amp-img src="assets/rabbit.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in" animate-in-delay="1s" > </amp-img> Обновите и перезагрузите свою историю. Ваша последняя страница должна выглядеть так:
Возможности анимации в веб-историях очень обширны (например, комбинирование анимаций, объединение анимаций в цепочку) и в этом уроке рассматриваются лишь поверхностно. Подробнее об анимации можно узнать в справочной документации по amp-story.
-