版本注意事項
AMP story (AMP 故事) 格式
- Boilerplate (樣板程式碼)
- amp-story 的必要標記
Story: amp-story (故事：amp-story)
Attributes (屬性)
Animations (動畫)
Branching (分支)
- URL Fragment Parameter (網址片段參數)
Localization (在地化)
Related resources (相關資源)
Validation (驗證)

Important (重要事項)：本文件不適用於您目前選取的格式 email (電子郵件)！

amp-story

Description (說明)

豐富、視覺化的故事敘述格式。

Required Scripts (必要指令碼)

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

Web stories (網路故事) 是一種沉浸式、可輕觸且易於分享的故事敘述格式。Web stories (網路故事) 是使用 AMP Framework (AMP 框架) 建構而成。amp-story 元件提供 AMP story (AMP 故事) 的 AMP 子集。它是 web stories (網路故事) 的基礎技術。

版本注意事項

Version (版本)	Description (說明)
1.0	目前版本，自 2018-07-16 起。

AMP story (AMP 故事) 格式

AMP story (AMP 故事) 是一個完整的 AMP HTML 文件，由 pages (頁面) 組成，頁面中包含 layers (圖層)，圖層中包含 AMP 和 HTML 元素，例如媒體、分析、文字等等。

Boilerplate (樣板程式碼)

以下標記是一個不錯的起點或樣板程式碼。複製此程式碼並儲存到副檔名為 .html 的檔案中。

<!DOCTYPE html>
<html amp lang="en">
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script
      async
      custom-element="amp-story"
      src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
    ></script>
    <title>Hello, amp-story</title>
    <link rel="canonical" href="http://example.ampproject.org/my-story.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
    >
  </head>
  <body>
    <amp-story
      standalone
      title="Hello Story"
      publisher="The AMP Team"
      publisher-logo-src="https://example.com/logo/1x1.png"
      poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
    >
      <amp-story-page id="my-first-page">
        <amp-story-grid-layer template="fill">
          <amp-img
            src="https://example.ampproject.org/helloworld/bg1.jpg"
            width="900"
            height="1600"
            alt=""
          >
          </amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <h1>Hello, amp-story!</h1>
        </amp-story-grid-layer>
      </amp-story-page>
      <amp-story-page id="my-second-page">
        <amp-story-grid-layer template="fill">
          <amp-img
            src="https://example.ampproject.org/helloworld/bg2.gif"
            width="900"
            height="1600"
            alt=""
          >
          </amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <h1>The End</h1>
        </amp-story-grid-layer>
      </amp-story-page>
    </amp-story>
  </body>
</html>

body 中的內容會建立一個包含兩個頁面的故事。每個頁面都有一個全版面背景圖片，圖片上方有一串簡單的文字。

amp-story 的必要標記

AMP story (AMP 故事) HTML 格式遵循與有效 AMP HTML 文件相同的標記需求，以及下列額外需求

RULE (規則)	DESCRIPTION (說明)
`<amp-story standalone>` 元素是 `<body>` 的唯一子元素。	識別文件為 AMP story (AMP 故事)。
包含 `<script async src="https://cdn.ampproject.org/v0/amp-story-1.0.js" custom-element="amp-story"></script>` 標籤作為 `<head>` 標籤的第三個子項。	包含並載入 amp-story JS 程式庫。
在 `<head>` 內包含 `<link rel="canonical" href="$STORY_URL">` 標籤。	連結指向故事本身，將故事識別為標準文件。

Story: `amp-story` (故事：`amp-story`)

amp-story 元件代表一個完整的故事。元件本身會實作 UI shell (UI 外殼)，包括處理手勢和導覽，以及插入應用程式外殼 UI (控制項、進度列等)。

範例

<amp-story
  standalone
  title="My Story"
  publisher="The AMP Team"
  publisher-logo-src="https://example.com/logo/1x1.png"
  poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
  poster-square-src="https://example.com/my-story/poster/1x1.jpg"
  poster-landscape-src="https://example.com/my-story/poster/4x3.jpg"
  background-audio="my.mp3"
>
  <amp-story-page>[...]</amp-story-page>
  <amp-story-page>[...]</amp-story-page>
  <amp-story-page>[...]</amp-story-page>
</amp-story>

Metadata (中繼資料) 指南

Metadata (中繼資料) 屬性會在 Web Stories (網路故事) 生態系統中顯示故事預覽，例如呈現引人入勝的預覽連結。這些屬性讓您的故事能因應未來豐富的嵌入式體驗 Web Stories (網路故事) 介面。

這些中繼資料屬性是補充性質，不會取代頁面上的任何 Structured Data (結構化資料) (例如 JSON-LD)。我們仍然建議將結構化資料新增至您的 Web Stories (網路故事)。

`publisher-logo-src` 指南

這些指南適用於發布者標誌圖片

提供點陣圖檔案，例如 .jpg、.png 或 .gif。避免向量檔案，例如 .svg 或 .eps。
避免動畫圖片，例如動畫 gif。
圖片標誌在背景顏色上應清晰可辨。

建議

避免

標誌應至少為 96x96 像素，且為完美正方形。
背景不應為透明。
每個品牌使用一個標誌，且在 AMP stories (AMP 故事) 中保持一致。

Poster (海報) 指南 (適用於 `poster-portrait-src`、`poster-landscape-src` 和 `poster-square-src`)

這些指南適用於故事海報圖片

海報圖片應代表整個 AMP story (AMP 故事)。
當 AMP story (AMP 故事) 開始時，使用者應能看到海報圖片。為了配合尺寸調整、裁切或細微的樣式變更或預覽用途，中繼資料中使用的圖片檔案網址不需要與故事第一頁上的網址完全相同。
提供點陣圖檔案，例如 .jpg、.png 或 .gif。避免向量檔案，例如 .svg 或 .eps。
海報圖片的長寬比應為直向 3x4、橫向 4x3 和正方形 1x1。
如果海報圖片是從影片中的影格衍生而來，則縮圖應代表該影片。例如，影片中的第一個影格通常不具代表性。
每個海報圖片都應符合建議的最小尺寸
- 直向：640 像素 x 853 像素
- 橫向：853 像素 x 640 像素
- 正方形：640 像素 x 640 像素

Story generator (故事產生器) meta tags (中繼標籤)

Optional (選用) HTML meta tags (中繼標籤) 可用於指示文件是使用哪個 Story generator (故事產生器) 建立的。有兩個中繼標籤，分別指示產生器名稱及其版本。

<meta name="amp-story-generator-name" content="Story generator name" />
<meta name="amp-story-generator-version" content="0.1" />

Landscape (橫向) 模式和全版面桌機體驗選擇加入

如果在 <amp-story> 元素上指定 supports-landscape 屬性，則會

允許在行動裝置以橫向模式握持時觀看故事。
將桌機體驗變更為沉浸式全版面模式，取代預設的三個直向面板體驗。

雖然目前這是選擇加入且為選用項目，但我們強烈建議確保行動裝置上的使用者能夠以最符合其需求的任何方向檢視故事 - 否則，他們只會看到「此頁面最適合以直向模式檢視」的訊息。

用法：<amp-story ... supports-landscape>...</amp-story>

之前

之後

Live story (即時故事)

使用 live-story 屬性將新頁面附加到故事，供使用者即時觀看。

此屬性會在最後一頁向使用者顯示新頁面的通知，並更新進度列。

live-story 的核心使用案例包括突發新聞或現場活動的報導，讓使用者無需離開故事即可即時更新。頒獎典禮、體育賽事和選舉是一些範例。

運作方式

在背景中，當使用 live-story 的 AMP Story (AMP 故事) 顯示在用戶端時，AMP runtime (AMP 執行階段) 會輪詢主機上的原始文件以取得更新。當用戶端收到回應時，它會篩選並將這些更新動態插入回用戶端的故事中。發布者可以自訂輪詢頻率，以控制傳入要求的數量，而 Google AMP Cache (Google AMP 快取) 等 AMP 快取可以執行最佳化，以減少伺服器回應酬載，從而節省用戶端頻寬和 CPU 週期。

Polling (輪詢)

在大多數即時部落格的實作中，內容會由伺服器推送至頁面的用戶端執行個體，或用戶端輪詢 JSON 端點以接收更新。此處的實作方式不同，因為故事的用戶端執行個體會輪詢故事文件伺服器副本中 <amp-story> 元素內的更新。例如：如果使用者正在檢視從 AMP 快取提供的故事，則用戶端將輪詢該 AMP 快取上託管的文件以取得更新；如果使用者正在檢視從網路發布者的原始網域 (例如「example.com」) 提供的文件，則用戶端將輪詢該原始網域上託管的文件以取得更新。

這表示故事發布者不需要設定 JSON 端點或推送機制即可使此功能運作。

內容會透過發布到具有有效 <amp-story> 標記的相同網址來更新。內容會在下一次輪詢期間提取到使用者的用戶端執行個體中。輪詢間隔可以使用 data-poll-interval 屬性設定。

停止輪詢

只要 live-story 屬性存在於 <amp-story> 元素上，用戶端就會對文件伺服器副本進行持續輪詢。當您發布故事的最後一次更新時，請務必將 live-story-disabled 屬性設定為 <amp-story> 元素。這會停止輪詢。

用法

在 <amp-story> 元素上指定 id。
將 live-story 屬性新增至 <amp-story> 元素。
[選用] 將 data-poll-interval 屬性新增至 <amp-story> 元素，以指定檢查新更新的時間間隔。
[選用] 完成即時廣播後，將 live-story-disabled 屬性新增至 <amp-story> 元素，以停用輪詢。
在每個 <amp-story-page> 上
- 指定具有有效值的 data-sort-time 屬性。這是用於排序頁面的時間戳記。較高的時間戳記將在較舊的頁面項目之後插入。我們建議使用 Unix 時間。

<amp-story id="story1" live-story ...>
  <amp-story-page id="cover" data-sort-time="1552330790"> ... </amp-story-page>
  <amp-story-page id="page1" data-sort-time="1552330791"> ... </amp-story-page>
  <amp-story-page id="page2" data-sort-time="1552330792"> ... </amp-story-page>
</amp-story>

Children (子項) (amp-story 的子項)

<amp-story> 元件包含一個或多個 <amp-story-page> 元件，其中包含故事的每個個別畫面。文件中指定的第一頁是故事中顯示的第一頁。

Optional customization (選用自訂)

使用 `object-position` 裁切 `amp-img` 和 `amp-video` 素材

object-position 屬性可用於 <amp-img> 和 <amp-video> 元素，以指定素材在其容器中的對齊方式 (裁切)。預設情況下，這些素材會置中，並且根據 viewport (視口) 比例，其邊緣會從容器中裁切掉。由於素材的關注區域不一定是其中心，因此 object-position 允許指定圖片的哪個部分必須保持可見。此屬性接受 object-position CSS 屬性接受的任何值。

範例

可以使用這種方式將相同的圖片用於行動裝置直向和橫向桌機

<amp-img src="cat.jpg" alt="..." object-position="75% 40%"></amp-img>

在原始文件上使用免費的 Google 託管影片快取來最佳化 `amp-video`

故事中的 <amp-video> 元素支援在原始文件上使用 Google 影片快取，透過 cache="google" 屬性。影片快取會定期擷取和儲存影片內容，降低影片的服務成本，並產生具有不同品質設定的轉碼，以調整位元率以適應網路狀況。

使用 720p 或更高的影片，以充分利用所有影片轉碼和自適應位元率演算法。

範例

<amp-video layout="fill" poster="img.png" cache="google" autoplay>
  <source src="video.mp4" type="video/mp4">
</amp-video>

`data-text-background-color (資料-文字-背景顏色)`

data-text-background-color 屬性會以指定的顏色反白顯示元素的文字。若要反白顯示整個區塊，請直接將此屬性新增至文字元素。若只要反白顯示文字，請將屬性和文字新增至內部。請注意，這適用於 <amp-story-page> 內的任何位置，而不僅限於 <amp-story-grid-layer>。

範例

<amp-story-grid-layer template="vertical">
  <h2>
    <span data-text-background-color="crimson">
      Cat ipsum dolor sit amet, sleeps on my head, but lounge in doorway so if
      human is on laptop sit on the keyboard
    </span>
  </h2>
</amp-story-grid-layer>

範例

<amp-story-grid-layer template="vertical">
  <h2 data-text-background-color="crimson">
    Cat ipsum dolor sit amet, sleeps on my head, but lounge in doorway so if
    human is on laptop sit on the keyboard
  </h2>
</amp-story-grid-layer>

Embedded components (嵌入元件)

我們支援在 amp-story-grid-layer 內嵌入某些元件，例如 <amp-twitter>。預設情況下，它們在故事中不是互動式的 (即點擊它們會前進到下一頁)，但透過使用 interactive 屬性，您可以顯示連結到原始來源的 tooltip (工具提示) (即在新分頁中開啟推文)。

範例

<amp-twitter
  width="100"
  height="100"
  layout="responsive"
  data-tweetid="1102562523524579328"
  interactive
>
</amp-twitter>

amp-story-grid-layer 中的連結

我們支援 inline links (內嵌連結) <a> 作為 amp-story-grid-layer 的後代。每當點擊連結時，都會顯示 tooltip (工具提示) - 將對應的動作延遲到使用者再次點擊 tooltip (工具提示) 時。

請注意下列在您的 amp-story (AMP 故事) 中包含連結的指南

連結的某些部分如果太靠近故事頁面的左邊緣或右邊緣，將會讓位於導覽。
佔據太多頁面區域的連結將被忽略以進行導覽。

您可以透過指定下列屬性來自訂顯示在使用者互動式元素頂端的 tooltip (工具提示) 內容。如果未指定這些屬性，則會自動提供 fallback (預設) 值。

`data-tooltip-icon (資料-工具提示-圖示)`

接受 src，其中包含圖示圖片的位置。

`data-tooltip-text (資料-工具提示-文字)`

tooltip (工具提示) 出現時將顯示的字串。

範例

<a
  href="https://www.google.com"
  role="link"
  data-tooltip-icon="./assets/ic_amp_googblue_1x_web_24dp.png"
  data-tooltip-text="Go to page"
>
  Click me!
</a>

AMP stories (AMP 故事) 中可用的其他元件

以下是 AMP stories (AMP 故事) 中可用的其他元件，這些元件需要一些故事專屬的注意事項。

如需更多一般可用的元件，請參閱允許子項的清單。

Attributes (屬性)

standalone (獨立) (必要)

識別 AMP 文件為故事。

title (標題) (必要)

故事的標題。

publisher (發布者) (必要)

故事發布者的名稱。

publisher-logo-src (發布者標誌來源) (必要)

故事發布者正方形格式 (1x1 長寬比) 標誌的網址。例如 publisher-logo-src="https://example.com/logo/1x1.png"，其中 1x1.png 是 96x96 像素的標誌。

poster-portrait-src (海報-直向來源) (必要)

故事海報直向格式 (3x4 長寬比) 的網址。

poster-square-src (海報-正方形來源) (選用)

故事海報正方形格式 (1x1 長寬比) 的網址。

poster-landscape-src (海報-橫向來源) (選用)

故事海報橫向格式 (4x3 長寬比) 的網址。

entity (實體) (選用)

故事建立實體的名稱。例如：entity="User"，其中 User 在發布者的平台上建立了故事。

entity-logo-src (實體標誌來源) (選用)

故事建立實體正方形格式 (1x1 長寬比) 標誌的網址。例如 entity-logo-src="https://example.com/logo/1x1.png"，其中 1x1.png 是 96x96 像素的標誌。

entity-url (實體網址) (選用)

故事建立實體平台的網址。例如 entity-url="https://example.com/profile/user"，連結到發布者平台上 User 的個人資料。

supports-landscape (支援橫向) (選用)

在行動裝置上啟用橫向模式支援，並在桌機裝置上啟用全版面橫向體驗。

background-audio (背景音訊) (選用)

在整個故事中播放的音訊檔案網址。

live-story (即時故事) (選用)

啟用即時故事功能。

live-story-disabled (停用即時故事) (選用)

停用即時故事功能。

data-poll-interval (資料-輪詢間隔) (選用)

與 live-story 屬性搭配使用。檢查新內容的時間間隔 (以毫秒為單位)。如果未提供 data-poll-interval，則預設為 15000 毫秒的最小值。小於 15000 毫秒的值無效。

desktop-aspect-ratio (桌機外觀比例) (選用)

此值以「水平:垂直」格式指定外觀比例，其中「水平」和「垂直」都是整數。如果指定此屬性，則桌機單面板模式中故事的版面配置會設定為符合指定比例。接受的比例介於 1:2 和 3:4 之間，任何超出範圍的值都會被箝制。

Animations (動畫)

<amp-story-page> 內的每個元素都可以有進入動畫。

您可以透過在元素上指定一組動畫屬性來設定動畫；不需要額外的 AMP 擴充功能或設定。

如果需要預設集以外的內容，可以使用 <amp-story-animation> 元件設定自訂動畫。

動畫可以幫助讓您的 Web Story (網路故事) 在視覺上更令人興奮和引人入勝，但請謹慎使用。某些使用者可能會覺得長時間的連續動畫令人分心。其他使用者可能對動態敏感，並且可能會因過度使用動態和視差效果而受到負面影響。

Animation effects (動畫效果)

下列動畫效果可作為 AMP stories (AMP 故事) 的預設集

預設集名稱	預設持續時間 (毫秒)	預設延遲 (毫秒)
`drop (掉落)`	1600	0
`fade-in (淡入)`	600	0
`fly-in-bottom (從底部飛入)`	600	0
`fly-in-left (從左側飛入)`	600	0
`fly-in-right (從右側飛入)`	600	0
`fly-in-top (從頂部飛入)`	600	0
`pulse (脈衝)`	600	0
`rotate-in-left (從左側旋轉進入)`	1000	0
`rotate-in-right (從右側旋轉進入)`	1000	0
`scale-fade-down (向下縮放淡出)`	600	0
`scale-fade-up (向上縮放淡出)`	600	0
`twirl-in (旋轉進入)`	1000	0
`whoosh-in-left (從左側嗖地進入)`	600	0
`whoosh-in-right (從右側嗖地進入)`	600	0
`pan-left (向左平移)`	1000	0
`pan-right (向右平移)`	1000	0
`pan-down (向下平移)`	1000	0
`pan-up (向上平移)`	1000	0
`zoom-in (放大)`	1000	0
`zoom-out (縮小)`	1000	0

在 AMP By Example 上查看所有 AMP story (AMP 故事) 動畫的即時示範。

Animation attributes (動畫屬性)

animate-in (動畫進入) [必要]

使用此屬性指定進入動畫預設集的名稱。

範例：標題從頁面左側飛入。

<h2 animate-in="fly-in-left">
  Fly from left!
</h2>

animate-in-duration (動畫進入持續時間) [選用]

使用此屬性指定進入動畫的持續時間，以秒或毫秒為單位 (例如，0.2 秒或 200 毫秒)。預設持續時間取決於您指定的動畫預設集。

範例：標題從頁面左側飛入，且動畫在半秒內完成。

<h2 animate-in="fly-in-left" animate-in-duration="0.5s">
  Fly from left!
</h2>

animate-in-timing-function (動畫進入時間函數) [選用]

使用此屬性指定進入動畫的 timing function (時間函數) (動畫曲線)。預設時間函數取決於您指定的動畫預設集。

範例：標題從頁面左側飛入，且動畫減速 (ease-out)。

<h2
  animate-in="fly-in-left"
  animate-in-timing-function="cubic-bezier(0.0, 0.0, 0.2, 1)"
>
  Fly from left!
</h2>

animate-in-delay (動畫進入延遲) [選用]

使用此屬性指定開始動畫之前的延遲時間。值必須大於或等於 0，以秒或毫秒為單位 (例如，0.2 秒或 200 毫秒)。預設延遲時間取決於您指定的動畫預設集。

範例：在 0.4 秒後，標題從頁面左側飛入，並在 0.5 秒內完成進入。

<h2 animate-in="fly-in-left" animate-in-duration="0.5s" animate-in-delay="0.4s">
  Fly from left!
</h2>

動畫延遲時間不保證完全精確。當掃描到第一個動畫元素時，在背景中載入 amp-animation 擴充功能可能會導致額外的延遲。屬性合約定義為將此動畫延遲至少 N 毫秒。這適用於所有元素，包括延遲時間為 0 秒的元素。

animate-in-after (動畫進入之後) [選用]

使用此屬性來串連或排序動畫 (例如，animation2 在 animation1 完成後開始)。指定此元素動畫將跟隨的動畫元素的 ID。元素必須存在於相同的 <amp-story-page> 上。延遲會在先前元素的動畫完成後套用。如需更多詳細資訊，請參閱下方的動畫排序章節。

例如，在下列程式碼中，object2 在 object1 完成進入後動畫進入

<amp-story-page id="page1">
  <amp-story-grid-layer template="vertical">
    <div id="object1" animate-in="rotate-in-left">
      1
    </div>
    <div id="object2" animate-in="fly-in-right" animate-in-after="object1">
      2
      <!-- will start after object1 has finished -->
    </div>
  </amp-story-grid-layer>
</amp-story-page>

scale-start, scale-end (縮放開始、縮放結束) [選用，僅適用於 `zoom-in` (放大) 和 `zoom-out` (縮小) 動畫]

使用這兩個屬性進一步指定 zoom-in (放大) 和 zoom-out (縮小) 動畫的參數。值必須大於或等於 0，且允許使用小數。預設值 zoom-in 為 scale-start: 1 和 scale-start: 3，zoom-out 則相反。

範例：圖片在 4 秒內從其尺寸的 2 倍放大到 5 倍。

<amp-img
  animate-in="zoom-in"
  scale-start="2"
  scale-end="5"
  animate-in-duration="4s"
  layout="fixed"
  src="https://picsum.photos/720/320?image=1026"
  width="720"
  height="320"
  alt="..."
>
</amp-img>

translate-x (水平位移) [選用，僅適用於 `pan-left` (向左平移) 和 `pan-right` (向右平移) 動畫]

使用此屬性指定圖片在 pan-left/pan-right 動畫中的水平平移。值必須大於或等於 0 像素。預設值將平移指定圖片的整個寬度。

範例：圖片在 10 秒內向左平移 200 像素。

<amp-img
  animate-in="pan-left"
  translate-x="200px"
  animate-in-duration="10s"
  layout="fixed"
  src="https://picsum.photos/720/320?image=1026"
  width="720"
  height="320"
  alt="..."
>
</amp-img>

translate-y (垂直位移) [選用，僅適用於 `pan-up` (向上平移) 和 `pan-down` (向下平移) 動畫]

使用此屬性指定圖片在 pan-up/pan-down 動畫中的垂直平移。值必須大於或等於 0 像素。預設值將平移指定圖片的整個高度。

範例：圖片在 15 秒內向下平移 50 像素。

<amp-img
  animate-in="pan-down"
  translate-y="50px"
  animate-in-duration="15s"
  layout="fixed"
  src="https://picsum.photos/720/320?image=1026"
  width="720"
  height="320"
  alt="..."
>
</amp-img>

pan-scaling-factor (平移縮放係數) [選用，僅適用於 `pan-left`、`pan-right`、`pan-up` 和 `pan-down` 動畫]

目標會在 pan-left/pan-right/pan-up/pan-down 動畫中自動縮放，以確保在平移時不會超出目標邊界。

使用此屬性覆寫預設縮放係數計算，並指定靜態縮放係數。值必須大於 0，且允許使用小數。

範例：圖片在平移時縮放 1.3 倍。

<amp-img
  animate-in="pan-left"
  pan-scaling-factor="1.3"
  layout="fixed"
  src="https://picsum.photos/720/320?image=1026"
  width="720"
  height="320"
  alt="..."
>
</amp-img>

Sequencing animations (動畫排序)

若要依序串連動畫，請使用 animate-in-after 屬性。指定鏈中的所有元素都必須存在於相同的 <amp-story-page> 中。沒有 animate-in-after 屬性的元素不屬於序列鏈，並且將在頁面進入時獨立啟動。

<amp-story-page id="my-sequencing-page">
  <amp-story-grid-layer template="vertical">
    <div class="circle" animate-in="drop-in" animate-in-duration="1.8s">
      1
      <!-- will start independently -->
    </div>
    <div
      id="rotate-in-left-obj"
      class="square"
      animate-in="rotate-in-left"
      animate-in-after="fade-in-obj"
      animate-in-delay="0.2s"
    >
      2
      <!-- will start after fade-in-obj has finished -->
    </div>
    <div
      class="square"
      animate-in-after="rotate-in-left-obj"
      animate-in="whoosh-in-right"
      animate-in-delay="0.2s"
    >
      3
      <!-- will start after rotate-in-left-obj has finished -->
    </div>
    <div
      id="fade-in-obj"
      class="circle"
      animate-in="fade-in"
      animate-in-duration="2.2s"
    >
      1
      <!-- will start independently -->
    </div>
  </amp-story-grid-layer>
</amp-story-page>

Combining multiple animations (組合多個動畫)

您可以在一個元素上套用多個進入動畫 (例如，元素飛入頁面並同時淡入)。無法將多個動畫預設集指派給單一元素；但是，可以巢狀方式放置具有不同進入動畫的元素，以將它們組合成一個動畫。

<div animate-in="fly-in-left">
  <div animate-in="fade-in">
    I will fly-in and fade-in!
  </div>
</div>

如果組合動畫應該在個別元素動畫結束後開始，請確保組成動畫的所有巢狀元素都將屬性 animate-in-after 設定為相同的 id。

Branching (分支)

Branching (分支) 能夠識別個別的故事頁面。使用者可以在故事中跳躍、從開頭以外的其他位置開始故事，以及分享特定的故事頁面。範例是目錄或多項選擇按鈕。

網址中的 Fragment parameters (片段參數) 支援此功能。

Branching (分支) 允許在故事中進行導覽操作。故事會追蹤導覽。如果使用者從 page-1 導覽到 page-5，然後導覽到 page-6，則向後導覽將遵循完全相同的路徑。當向後導覽時，跳過的頁面不會向使用者公開，它將從 page-6 導覽到 page-5，最後回到 page-1。

URL Fragment Parameter (網址片段參數)

透過 branching (分支)，AMP Stories (AMP 故事) 現在支援以下形式的網址

https://www.mydomain.com/good-story/#page=<page-id>

其中 page-id 是指 amp-story-page 的唯一 ID。您也可以在某些使用案例中將片段參數和 page-id 值用作錨點連結。

Localization (在地化)

您應始終在故事的 <html> 標籤上包含語言代碼，例如英文內容的 <html ⚡ lang="en">。支援的語言代碼為

ar (阿拉伯文)
de (德文)
en-GB (英文，英國)
en (英文，美國)
es-419 (西班牙文，中/拉丁美洲)
es (西班牙文，西班牙)
fr-CA (法文，加拿大)
fr (法文，法國)
hi (北印度文)
id (印尼文)
it (義大利文)
ja (日文)
ko (韓文)
nl (荷蘭文)
no (挪威文)
pt-BR (葡萄牙文，巴西)
pt (葡萄牙文，葡萄牙)
ru (俄文)
tr (土耳其文)
vi (越南文)
zh-TW (繁體中文)
zh (簡體中文)

此外，對於由右至左的語言，您可以在故事的 <html> 標籤上包含 dir="rtl" 屬性。這也可以與語言代碼結合使用，例如 <html ⚡ lang="ar" dir="rtl">。

Validation (驗證)

請參閱 AMP validator (驗證器) 規格中的amp-story 規則。

需要更多協助嗎？

您已閱讀本文件十幾次，但它仍然沒有真正涵蓋您的所有問題嗎？也許其他人也有相同的感受：請在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別熱衷的問題提供一次性貢獻。

前往 GitHub