複雜動畫介紹

重要提示：此文件不適用於您目前選擇的格式 email！

對於無法透過新增和移除 class 來驅動的動畫，AMP 提供了幾個動畫專用元件。這些元件將 AMP 的原則應用於動畫：它們快速、高效且以使用者為優先。 AMP 限制了關鍵影格中允許使用的 CSS 屬性，但提供了諸如精細控制、無縫動畫和跨瀏覽器相容性等優點，而無需額外的工作。

如果您需要嚴格控制播放，並且需要同時對多個元素進行精確的動畫處理，請使用 amp-animation。

建立基本的 AMP 動畫

amp-animation 元件可在 AMP 中使用 Web Animation API。

基本的 amp-animation 是一個由以下關鍵部分組成的 JSON 物件：

元件所作用的元素，或稱 selector。
時間屬性
關鍵影格
觸發器

<amp-animation layout="nodisplay" id="exampleAnimation">
<script type="application/json">
{
 "selector": "#elementID", //select the element to animate
 "duration": "1s", //timing property
 "iterations": 2, //timing property
 "fill": "both", //timing property
 "keyframes": {"opacity": 0, "transform": "scale(2)"} //keyframes
}
</script>
</amp-animation>
<!-- trigger -->
<button on="tap:exampleAnimation.start">

選擇器

與 CSS 類似，amp-animation 元件透過在 "selector" 欄位中宣告元素的標籤名稱、class 或 id 來將動畫屬性連結到元素。該元件會使用宣告的標籤類型或 class 名稱對每個元素進行動畫處理。使用 id 以確保您只對單個元素進行動畫處理。

時間屬性

時間屬性控制動畫的持續時間、播放次數以及關鍵影格執行的方向。

不需要任何時間屬性，但如果缺少與時間和顯示相關的屬性（例如 duration 和 fill），動畫可能無法執行。

關鍵影格

雖然 CSS 允許您透過轉場從一種狀態變形到另一種狀態，但您必須將動畫屬性宣告為關鍵影格才能使用 amp-animation。這些屬性可用於 GPU 加速，不會導致重新排版，並且可以在合成器執行緒上執行動畫。這可以防止動畫干擾 AMP 和瀏覽器的渲染過程。

關鍵影格直接定義在 amp-animation 中。

觸發器

觸發器啟動動畫序列。amp-animation 擴充功能會在 <body> 在頁面上可見時啟動，或者透過將其連接到 AMP 動作或事件來啟動。

當動畫應在頁面載入後立即執行時（因為它出現在「首屏」或頁面的第一個可視區域內），在 <body> 可見時觸發非常有用。透過將 trigger="visibility" 作為屬性新增到元件，可以透過可見性觸發動畫。

<amp-animation layout="nodisplay"
    trigger="visibility">
  ...
</amp-animation>

動畫透過將 amp-animation 元件指定為 id 並將該 id 連結到所需的事件觸發器（例如點擊按鈕）來連接到動作或事件。

<amp-animation layout="nodisplay" id="exampleAnimation">
  ...
</amp-animation>

<button on="tap:exampleAnimation.start">

建置複雜的動畫

在 amp-animation 中建置動畫可以實現更精細的控制，而不僅僅是啟動和停止動畫：它還可以暫停、倒轉和導向到特定點。您甚至可以將多個動畫串聯在一起，並按順序對元素進行動畫處理。

子目標

具有相同標籤或 class 的元素可以具有指定的時間屬性，並覆蓋頂層動畫中定義的變數值。

<body>
  <h1>Hello World!</h1>
  <h1>Hello World!</h1>
  <h1 id="helloMe">Hello World!</h1>
  <h1>Hello World!</h1>
  <amp-animation layout="nodisplay" id="animateThis">
    <script type="application/json">
      {
        "selector": "h1",
        "duration": "3s",
        "fill": "both",
        "keyframes": [
          {"transform": "translateX(0px)"},
          {"transform": "translateX(50%)"}
        ],
        "subtargets": [
          {
            "index": 1,
            "duration": "1s"
          },
          {
            "selector": "#helloMe",
            "direction": "reverse",
            "duration": "5s"
          }
        ]
      }
    </script>
  </amp-animation>
  <button on="tap:animateThis.start">start</button>
</body>

在 Playground 中打開此程式碼片段

鏈式動畫

多個動畫可以連接在一起形成一個大的序列。您可以透過在 amp-animation 元件中的 animations 陣列中編寫動畫來建立定時效果，例如影片上的疊加層。

<amp-animation id="overlaysAnim" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "3s",
      "fill": "both",
      "animations": [{
          "selector": ".one",
          "keyframes": [{
              "opacity": "1",
              "offset": 0
            },
            {
              "opacity": "1",
              "offset": 0.04
            },
            {
              "opacity": "0",
              "offset": 0.0401
            },
            {
              "opacity": "0",
              "offset": 1
            }
          ]
        },
      ]
    }
  </script>
</amp-animation>

此設定會按順序播放每個動畫 3 秒。

對於較大的動畫，animations 陣列中的動畫能夠參考其他 amp-animation 元件。

<amp-animation id="addEnergy" layout="nodisplay">
  <script type="application/json">
  {
    "duration": "0.3s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#energy",
        "keyframes": [
          {"transform": "scaleX(calc(num(width('#energy'))/10))"},
          {"transform": "scaleX(calc(num(width('#energy'))/10 + 3))"}
        ]
      },
      {
        "animation": "atomExcite"
      }
    ]
  }
  </script>
</amp-animation>
<amp-animation id="atomExcite" layout="nodisplay" trigger="visibility">
<script type="application/json">
  {
    "duration": "0.3s",
    "iterations": "2",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": ".atom",
        "keyframes": {
          "transform": "translate(20vw)"
        }
      }
    ]
  }
  </script>
</amp-animation>

為未知數量的元素製作動畫

透過使用 [`var(/content/amp-dev/documentation/components/reference/amp-animation.md#css-extensions)]，您可以編寫複雜且定時的動畫，這些動畫可以與任意數量的元素一起使用。這使得動態和使用者生成的資料能夠輕鬆流暢地進行動畫處理。

<head>
  <script
    async
    custom-element="amp-animation"
    src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"
  ></script>
  <style amp-custom>
    .parent {
      perspective: 1000px;
      transform-style: preserve-3d;
      position: relative;
      margin: 10px;
      width: 239px;
      height: 335px;
    }
    .card {
      transform-origin: left;
      height: 50%;
      width: 50%;
    }
  </style>
</head>
<body>
  <amp-animation layout="nodisplay" id="cardAdmin">
    <script type="application/json">
      {
        "selector": ".card",
        "--duration": "2s",
        "duration": "var(--duration)",
        "delay": "calc((length() - index() - 1) * var(--duration))",
        "easing": "ease-in",
        "iterations": "1",
        "fill": "both",
        "keyframes": [
          {"transform": "translate3d(0px, 0px, 0px)"},
          {"transform": "translate3d(50%, 0px, 100px)"},
          {"transform": "translate3d(110%, 0px, 0px) rotateY(-20deg)"},
          {"transform": "translate3d(50%, 0px, -100px)"},
          {"transform": "translate3d(0px, 0px, -1px)"}
        ]
      }
    </script>
  </amp-animation>
  <div class="parent" on="tap:cardAdmin.start" tabindex="none" role="animation">
    <amp-img
      class="card"
      src="https://upload.wikimedia.org/wikipedia/commons/7/70/3C.svg"
      layout="fill"
    ></amp-img>
    <amp-img
      class="card"
      src="https://upload.wikimedia.org/wikipedia/commons/3/3a/3H.svg"
      layout="fill"
    ></amp-img>
    <amp-img
      class="card"
      src="https://upload.wikimedia.org/wikipedia/commons/e/e1/KC.svg"
      layout="fill"
    ></amp-img>
  </div>
</body>

在 Playground 中打開此程式碼片段

此範例的運作方式為：

宣告一個變數 --duration，並將其值設為兩秒。
將 duration 設定為變數 --duration 的值。
計算應用於具有 class .card 的每個元素的延遲。 1. [length(/content/amp-dev/documentation/components/reference/amp-animation.md#css-length()-extension) 計算選擇了多少個 .card 元素 1. 然後，長度減去每個 .card 的 [index(/content/amp-dev/documentation/components/reference/amp-animation.md#css-index()-extension) 1. 結果值乘以變數 --duration 1. 最終總數以秒為單位應用於該元素的延遲
動畫會分別應用於每個元素，以便卡片一張接一張地洗牌，而不是同時洗牌。

在 AMP Playground 中打開動畫並新增更多 amp-img 元素來測試此行為。

隨處呈現完美效果

動畫可以包含條件。

<head>
  <style amp-custom>
    .drop {
      width: 20px;
      height: 20px;
      background: blue;
      margin-top: 1em;
      border-radius: 50%;
    }
    .right {
      position: absolute;
      right: 0;
      background: red;
    }
  </style>
  <script
    async
    custom-element="amp-animation"
    src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"
  ></script>
</head>
<body>
  <amp-animation id="mediaAnimation" layout="nodisplay">
    <script type="application/json">
      {
        "duration": "1s",
        "iterations": "4",
        "fill": "both",
        "direction": "alternate",
        "animations": [
          {
            "media": "(min-width: 300px)",
            "selector": ".drop",
            "keyframes": {
              "transform": "translate(100vw)"
            }
          },
          {
            "media": "(max-width: 300px)",
            "selector": ".drop",
            "keyframes": {
              "transform": "translate(50vw)"
            }
          },
          {
            "media": "(min-width: 300px)",
            "selector": ".right",
            "keyframes": {
              "transform": "translate(-100vw)"
            }
          },
          {
            "media": "(max-width: 300px)",
            "selector": ".right",
            "keyframes": {
              "transform": "translate(-50vw)"
            }
          }
        ]
      }
    </script>
  </amp-animation>

  <div class="rain">
    <div class="drop"></div>
    <div class="drop right"></div>
    <div class="drop"></div>
    <div class="drop right"></div>
    <div class="drop"></div>
    <div class="drop right"></div>
    <div class="drop"></div>
    <div class="drop right"></div>
  </div>
  <button on="tap:mediaAnimation.start">Start</button>
</body>

在 Playground 中打開此程式碼片段

由 @CrystalOnScript 編寫