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
.
-
Written by @bpaduch