Google AMP - Animações

Amp-animation é um componente de amplificador que define animações a serem usadas em outros componentes de amplificador. Este capítulo os discute em detalhes.

Para trabalhar com amp-animation, precisamos adicionar o seguinte script -

<script async custom-element = "amp-animation" 
   src = "https://cdn.ampproject.org/v0/amp-animation-0.1.js">
</script>

Os detalhes da animação são definidos dentro de uma estrutura json.

A estrutura básica de amp-animation é como mostrado aqui -

<amp-animation layout = "nodisplay">
   <script type = "application/json">
      {
         // Timing properties
         ...
         "animations": [
            {
               // animation 1
            },
            ...
            {
               // animation n
            }
         ]
      }
   </script>
</amp-animation>

o animation componente consiste no seguinte - Selectors, Variables, Timing Properties, Keyframes etc.

{
   "selector": "#target-id",
   // Variables
   // Timing properties
   // Subtargets
   ...
   "keyframes": []
}

Seletor

Aqui, precisamos fornecer a classe ou id do elemento no qual a animação será usada.

Variáveis

Eles são os valores definidos para serem usados dentro de quadros-chave. As variáveis são definidas usandovar().

Exemplo

{
   "--delay": "0.5s",
   "animations": [
      {
         "selector": "#target1",
         "delay": "var(--delay)",
         "--x": "150px",
         "--y" : "200px",
         "keyframes": {
            "transform": "translate(var(--x), var(--y, 0px)"
         }
      }
   ]
}

Aqui delay, x e y são variáveis e os valores para as variáveis são definidos no exemplo mostrado.

Propriedades de tempo

Aqui você pode definir a duração e o atraso de sua animação. A seguir estão as propriedades de tempo suportadas -

Propriedade	Valor	Descrição
duração	Propriedade de tempo. O valor deve ser em milissegundos.	A duração usada para animação.
demora	Propriedade de tempo. O valor deve ser em milissegundos.	O atraso antes de a animação começar a ser executada
endDelay	Propriedade de tempo. O valor deve ser em milissegundos ou segundos.	O atraso fornecido que se aplica quando a animação é concluída.
iterações	O valor tem que ser um número.	O número de vezes que a animação deve ser repetida.
iterationStart	O valor tem que ser um número.	A diferença de tempo em que o efeito começa a ser animado.
atenuação	O valor é uma string	Isso é usado para obter o efeito de atenuação da animação. Alguns exemplos de atenuação são linear, atenuação, atenuação, atenuação, atenuação etc.
direção	O valor é uma string	Um de "normal", "reverso", "alternativo" ou "alternativo-reverso".
preencher	O valor é uma string	Os valores podem ser "none", "forwards", "backwards", "both", "auto".

Keyframes

Os quadros-chave podem ser definidos de várias maneiras, como na forma de objeto ou matriz. Considere os seguintes exemplos.

Exemplo

"keyframes": {"transform": "translate(100px,200px)"}

Exemplo

{
   "keyframes": {

      "opacity": [1, 0],
      "transform": ["scale(1)", "scale(2)"]
   }
}

Exemplo

{
   "keyframes": [
      {"opacity": 1, "transform": "scale(1)"},
      {"opacity": 0, "transform": "scale(2)"}
   ]
}

Exemplo

{
   "keyframes": [
      {"easing": "ease-out", "opacity": 1, "transform": "scale(1)"},
      {"opacity": 0, "transform": "scale(2)"}
   ]
}

Frame-chave usando CSS

<style amp-custom>
   div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      margin: 0 auto;
      transform:scale(3);
   }
   @keyframes example { 0% {transform:scale(3)}
      75% {transform:scale(2)}
      100% {transform:scale(1)}
   }

</style>

<amp-animation layout = "nodisplay">
   <script type = "application/json">
      {
         "duration": "4s",
         "keyframes": "example"
      }
   </script>
</amp-animation>

Existem algumas propriedades CSS que podem ser usadas dentro de quadros-chave. Os suportados são chamados de propriedades da lista de permissões. A seguir estão as propriedades da lista de permissões que podem ser usadas dentro de quadros-chave -

opacity
transform
visibility
'offsetDistance'

Note - O uso de qualquer outra propriedade além das listadas em branco gerará um erro no console.

Vamos agora entender por meio de um exemplo simples que irá girar a imagem quando a animação for aplicada sobre ela. Neste exemplo, estamos girando a imagem usando animação amp.

Exemplo

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width, minimum-scale = 1,initial-scale = 1">
   
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
   
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>
   
      <script async custom-element = "amp-animation" 
         src =" https://cdn.ampproject.org/v0/amp-animation-0.1.js">
      </script>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Animation Example</h3>
      <amp-animation id = "anim1" layout = "nodisplay" trigger = "visibility">
         <script type = "application/json">
            {
               "duration": "1s",
               "fill": "both",
               "direction": "alternate",
               "animations": [
                  {
                     "selector": "#image1",
                     "easing": "cubic-bezier(0,0,.21,1)",
                     "keyframes": {
                        "transform": "rotate(20deg)"
                     }
                  }
               ]
            }
         </script>
      </amp-animation>
      <br/>
      <br/>
      <amp-img 
         id = "image1" 
         src = "images/christmas1.jpg" 
         width = 300 
         height = 250 
         layout = "responsive">
      </amp-img>
      <br/>
   </body>
</html>

Resultado

Os detalhes dos detalhes da animação do amplificador usados acima são fornecidos no código mostrado abaixo -

<amp-animation id = "anim1" layout = "nodisplay" trigger = "visibility">
   <script type = "application/json">
   {
      "duration": "1s",
      "fill": "both",
      "direction": "alternate",
      "animations": [
         {
            "selector": "#image1",
            "easing": "cubic-bezier(0,0,.21,1)",
            "keyframes": {
               "transform": "rotate(20deg)"
            }
         }
      ]
   }
   </script>
</amp-animation>

O seletor aqui é o id da imagem na qual a animação de rotação é aplicada -

<amp-img 
   id = "image1" 
   src = "images/christmas1.jpg" 
   width = 300 
   height = 250 
   layout = "responsive">
</amp-img>

Exemplo de uso de quadros-chave de CSS

Exemplo

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>
      <script async custom-element = "amp-animation"
         src = "https://cdn.ampproject.org/v0/amp-animation-0.1.js">
      </script>
      <style amp-custom>
         div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            margin: 0 auto;
            transform:scale(3);
         }

         @keyframes example {
            0% {transform:scale(3)}
            75% {transform:scale(2)}
            100% {transform:scale(1)}
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Animation Example</h3>
      <amp-animation id = "anim1" layout = "nodisplay" trigger = "visibility">
         <script type = "application/json">
            {
               "duration": "3s",
               "fill": "both",
               "direction": "alternate",
               "animations": [{
                  "selector": "#image1",
                  "easing": "cubic-bezier(0,0,.21,1)",
                  "keyframes":"example"
               }]
            }
         </script>
      </amp-animation>
      <br/>
      <br/>
      <div id = "image1"></div>
      <br/>
   </body>
</html>

Resultado

Gatilho de animação

Com trigger = ”visibilidade”, a animação é aplicada por padrão. Para iniciar a animação em um evento, temos que remover o acionador = ”visibilidade” e adicionar o evento para iniciar a animação, conforme mostrado no exemplo abaixo -

Exemplo

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>                      
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-animation" 
         src = "https://cdn.ampproject.org/v0/amp-animation-0.1.js">
      </script>
      <style amp-custom>
         div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            margin: 0 auto;
            transform:scale(2); 
         }
         @keyframes example {
            0% {transform:scale(2)}
            75% {transform:scale(1)}
            100% {transform:scale(0.5)}
         }
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Animation Example</h3>
      <amp-animation id = "anim1" layout = "nodisplay">
         <script type = "application/json">
            {        
               "duration": "3s",
               "fill": "both",
               "direction": "alternate",
               "animations": [{
                  "selector": "#image1",
                  "easing": "cubic-bezier(0,0,.21,1)",
                  "keyframes":"example"
               }]
            }
         </script>
      </amp-animation>
      <button on = "tap:anim1.start">Start</button>
      <br/>
      <br/>
      <div id = "image1"></div>
   </body>
</html>

Observe que a animação começará quando o botão iniciar for tocado.

Resultado

Usamos ação chamada startem On para iniciar a animação. Da mesma forma, existem outras ações suportadas que são as seguintes -

start
pause
restart
resume
togglePause
seekTo
reverse
finish
cancel

Vejamos um exemplo de trabalho onde podemos usar a ação.

Exemplo

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width=device-width,minimum-scale = 1,initial-scale = 1">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate> 
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-animation" 
         src = "https://cdn.ampproject.org/v0/amp-animation-0.1.js">
      </script>
      <style amp-custom>
         #image1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            margin: 0 auto;
            transform:scale(2);
         }
         @keyframes example {
            0% {transform:scale(2)}
            75% {transform:scale(1)}
            100% {transform:scale(0.5)}
         }
         button1{
            background-color: #ACAD5C; 
            color: white; 
            padding: 12px 20px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            float: left;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Animation Example</h3>
      <amp-animation id = "anim1" layout = "nodisplay">
         <script type = "application/json">
            {
               "duration": "3s",
               "fill": "both",
               "direction": "alternate",
               "animations": [{
                  "selector": "#image1",
                  "easing": "cubic-bezier(0,0,.21,1)",
                  "keyframes":"example"
               }]
            }
         </script>
      </amp-animation>
      <button on = "tap:anim1.start">Start</button>
      <button on = "tap:anim1.pause">Pause</button>
      <button on = "tap:anim1.resume">Resume</button>
      <button on = "tap:anim1.reverse">Reverse</button>
      <button on = "tap:anim1.cancel">cancel</button>
      <button on = "tap:anim1.finish">finish</button>
      <button on = "tap:anim1.togglePause">togglePause</button>
      <button on = "tap:anim1.seekTo(percent = 1.00)">seekTo(100%)</button>
      <br/>
      <br/>
      <br/>
      <br/>
      <div id="image1"></div>
   </body>
</html>

Resultado

↰ Previous page Next page ↱