AMP

Анимация элементов

Вы можете сделать веб-историю еще лучше, снабдив элементы внутри страницы начальной анимацией. Например, вы можете сделать так, чтобы ваш заголовок выезжал слева, падал на страницу, плавно появлялся и т. п. Платформа 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="" с одним из значений пресетов анимации. Например, чтобы текст «упал» на страницу, добавьте в текстовый элемент атрибут 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-историю в своем браузере и убедитесь, что страница отображается правильно и выглядит следующим образом:

Static page 5

Выглядит отлично, но статично! Давайте оживим ее.

Начнем с входной анимации текста баннера, чтобы он «влетал» на страницу справа. Добавьте в элемент <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.