Google AMP - анимация

Amp-animation — это компонент amp, который определяет анимацию, которая будет использоваться на других компонентах amp. В этой главе они обсуждаются подробно.

Для работы с amp-анимацией нам нужно добавить следующий скрипт —

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

Детали анимации определены внутри структуры json.

Основная структура amp-анимации такая, как показано здесь —

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

Компонент анимации состоит из следующих элементов: селекторы, переменные, временные свойства, ключевые кадры и т . Д.

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

селектор

Здесь нам нужно указать класс или идентификатор элемента, для которого будет использоваться анимация.

переменные

Это значения, которые определены для использования внутри ключевых кадров. Переменные определяются с помощью var () .

пример

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

Здесь delay , x и y — переменные, а значения переменных определены в показанном примере.

Сроки свойства

Здесь вы можете определить продолжительность и задержку для вашей анимации. Ниже приведены поддерживаемые свойства синхронизации.

Имущество	Значение	Описание
продолжительность	Свойство времени. Значение должно быть в миллисекундах.	Продолжительность, используемая для анимации.
задержка	Свойство времени. Значение должно быть в миллисекундах.	Задержка перед началом анимации
endDelay	Свойство Time.Value должно быть в миллисекундах или секундах.	Заданная задержка, которая применяется, когда анимация завершается.
итерации	Значение должно быть числом.	Сколько раз анимация должна повторяться.
iterationStart	Значение должно быть числом.	Смещение по времени, с которого начинается анимация эффекта.
ослабление	Значение это строка	Это используется для получения эффекта замедления для анимации. Некоторые примеры замедления — это линейность, простота, простота, легкость, легкость входа и т. Д.
направление	Значение это строка	Один из «нормальный», «обратный», «альтернативный» или «альтернативный обратный».
заполнить	Значение это строка	Значения могут быть «нет», «вперед», «назад», «оба», «авто».

Keyframes

Ключевые кадры могут быть определены разными способами, например, в форме объекта или в форме массива. Рассмотрим следующие примеры.

пример

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

пример

{
   "keyframes": {

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

пример

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

пример

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

Ключевой кадр с использованием 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>

Есть некоторые свойства CSS, которые можно использовать внутри ключевых кадров. Поддерживаемые свойства называются белыми свойствами. Ниже перечислены свойства из белого списка, которые можно использовать внутри ключевых кадров.

помутнение
преобразование
видимость
‘OffsetDistance’

Примечание. Использование любого другого свойства, кроме перечисленных в белом, приведет к ошибке в консоли.

Давайте теперь разберем простой пример, который будет вращать изображение, когда к нему применяется анимация. В этом примере мы вращаем изображение с помощью amp-анимации.

пример

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

Выход

Детали деталей анимации усилителя, использованные выше, приведены в коде, показанном ниже —

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

Здесь селектор — это идентификатор изображения, к которому применяется анимация поворота.

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

Пример использования ключевых кадров из CSS

пример

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

Выход

Анимационный триггер

При триггере = «видимость» анимация применяется по умолчанию. Чтобы запустить анимацию для события, мы должны удалить триггер = ”видимость” и добавить событие, чтобы запустить анимацию, как показано в примере ниже:

пример

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

Обратите внимание, что анимация начнется при нажатии кнопки запуска.

Выход

Для запуска анимации мы использовали действие start on On. Точно так же поддерживаются другие действия, а именно:

Начните
Пауза
запустить снова
продолжить
togglePause
искать
задний ход
Конец
отменить

Давайте посмотрим на рабочий пример, где мы можем использовать действие.

Google AMP — анимация

селектор

переменные

пример

Сроки свойства

Keyframes

пример

пример

пример

пример

Ключевой кадр с использованием CSS

пример

Выход

Пример использования ключевых кадров из CSS

пример

Выход

Анимационный триггер

пример

Выход

Популярные уроки и статьи

Инициализаторы экземпляра в Java объяснены

AJAX - Краткое руководство

TempDB для производительности