#BlackLivesMatter
Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP

Animação de elementos

Para incrementar ainda mais uma história AMP, você pode aplicar entradas com animação a elementos na página. Por exemplo, faça o título surgir do lado esquerdo, descer da parte superior da página, aparecer lentamente e muito mais. A estrutura das histórias AMP conta com as seguintes animações predefinidas:

Animação predefinida Duração padrão (ms) Atraso padrão (ms)
drop 1.600 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 1.000 0
whoosh-in-left 500 0
whoosh-in-right 500 0
pan-left 1.000 0
pan-right 1.000 0
pan-down 1.000 0
pan-up 1.000 0
zoom-in 1.000 0
zoom-out 1.000 0

Para aplicar uma entrada com animação a um elemento, é preciso especificar animate-in="<animation preset>" com um dos valores de animação predefinida. Por exemplo, para fazer o texto descer da parte superior da página, adicione animate-in="drop" ao elemento text:

<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>

Adicione o atributo animate-in="<animação predefinida>" a elementos das suas páginas de histórias para aplicar vários efeitos de animação.

Tempo de animação

Cada animação predefinida tem valores de tempo padrão:

  • Atraso: é o tempo decorrido até o início da animação. Por exemplo, com um atraso de 0,3s, a animação entrará na página após 0,3 segundos. Se o atraso for de 0s, a animação começará imediatamente.
  • Duração: é o tempo total da animação. Por exemplo, a animação de aparecimento lento leva 500ms do início ao fim.

É possível personalizar o tempo da animação alterando o atraso ou a duração dela por meio dos atributos animate-in-delay e animate-in-duration. No exemplo a seguir, my-element entra pelo lado esquerdo da página após 0,3 segundos, e a animação termina em 0,5 segundos:

<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!
  </div>
</amp-story-page>

Animação da última página

A última página da nossa história AMP é composta por duas camadas: a primeira é uma colagem de imagens de animais, e a segunda exibe um texto de banner. Para criar essa página, adicione o código a seguir logo após a página anterior da história:

<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>

Atualize a história AMP no seu navegador e verifique se a página é renderizada corretamente e tem a seguinte aparência:

A página está ótima, mas o conteúdo é estático. Vamos dar um toque de animação.

Primeiro, animamos a entrada do texto de banner com o efeito "whoosh in" a partir da direita da página. Insira animate-in="whoosh-in-right" ao elemento <p> da seguinte maneira:

<p class="banner-text"
  animate-in="whoosh-in-right">
Pets can lower your stress levels!</p>

Atualize a página da história no seu navegador e verifique se ela surge da direita.

Em seguida, faremos todas as imagens aparecerem lentamente. Insira animate-in="fade-in" em todos os elementos amp-img. Seu código será semelhante a este:

<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>

Se você atualizar a página, todas as imagens aparecerão lentamente. Isso é ótimo, mas quase não é possível ver o efeito porque todas as imagens aparecem ao mesmo tempo. Para melhorar o efeito visual, podemos alterar o tempo das animações.

Vamos atrasar a entrada da primeira imagem para que ela apareça próximo de quando a animação do banner de texto terminar: por exemplo, 0,4s. As três imagens restantes podem aparecer 0,2s após a entrada da anterior. Adicione animate-in-delay="" a cada elemento amp-img com o valor de atraso adequado. Seu código será semelhante a este exemplo:

<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>

Atualize sua história. A última página terá a seguinte aparência:

As histórias AMP oferecem muitas possibilidades de animações (por exemplo, com a combinação e encadeamento de efeitos). Este tutorial mostra somente o básico. Para saber mais sobre animações, consulte a amp-story.