amp-story-360

簡介

amp-story-360 元件嵌入了 360 度圖片和影片，可透過陀螺儀或點之間的動畫進行探索。

首先，匯入 amp-story-360 以及其他故事匯入項目。

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

我們也匯入 amp-video，因為我們將使用 360 度影片。

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

基本用法

amp-story-360 元件接受 1 個子系，即 amp-img 或 amp-video。

在此頁面上，我們使用 amp-img 嵌入 360 度圖片，並設定預設 PoV（視點）。

使用 -start 屬性來定義初始 PoV
- heading-start 水平角度，以度為單位。以 0 度（預設值）為中心，負角度向左看，正角度向右看。
- pitch-start 垂直角度，以度為單位。以 0 度（預設值）為中心在地平線上，負角度向下看，正角度向上看。
- zoom-start 這對應於 90 度的水平視野。預設值為 1。較高的值表示較窄的視野。

照片來源：NASA / JPL / MSSS / Seán Doran。

<amp-story-page id="360-image-1">
  <amp-story-grid-layer template="fill">
    <amp-story-360 layout="fill"
    heading-start="115"
    pitch-start="10"
    zoom-start="1">
      <amp-img
        src="/static/samples/img/amp-story-360.jpg" width="4300" height="2150" alt="...">
      </amp-img>
    </amp-story-360>
  </amp-story-grid-layer>
</amp-story-page>

定義動畫

新增 -end 和 duration 屬性以在開始和結束 PoV 之間製作動畫：- heading-end 完整動畫的方位角。
- pitch-end 完整動畫的俯仰角。
- zoom-end 完整動畫的縮放。
- duration 動畫完成所需的時間，以秒 (s) 或毫秒 (ms) 為單位。

<amp-story-page id="360-image-2">
  <amp-story-grid-layer template="fill">
    <amp-story-360 layout="fill"
      heading-start="115"
      pitch-start="10"
      zoom-start="1"
      heading-end="50"
      pitch-end="-5"
      zoom-end="1.33"
      duration="3s">
      <amp-img
        src="/static/samples/img/amp-story-360.jpg" width="4300" height="2150" alt="...">
      </amp-img>
    </amp-story-360>
  </amp-story-grid-layer>
</amp-story-page>

陀螺儀控制

新增 controls="gyroscope" 以使用裝置的陀螺儀感應器設定 PoV。

如果陀螺儀感應器不可用，元件將預設為動畫。
如果裝置需要感應器的權限，則會顯示 activate-360 按鈕。

需要透過 https 提供服務才能存取裝置的陀螺儀。

目前，amp-story-360 元件未針對滑鼠或鍵盤使用者提供任何控制項。

<amp-story-page id="360-image-3">
  <amp-story-grid-layer template="fill">
    <amp-story-360 layout="fill"
      heading-start="115"
      pitch-start="10"
      zoom-start="1"
      heading-end="50"
      pitch-end="-5"
      zoom-end="1.33"
      duration="3s"
      controls="gyroscope">
      <amp-img
        src="/static/samples/img/amp-story-360.jpg" width="4300" height="2150" alt="...">
      </amp-img>
    </amp-story-360>
  </amp-story-grid-layer>
</amp-story-page>

amp-video

我們對此元件使用相同的屬性，但傳遞 amp-video 子系。

影片來源：NASA。

<amp-story-page id="360-video-1">
  <amp-story-grid-layer template="fill">
    <amp-story-360 layout="fill"
      heading-start="30" 
      pitch-start="20" 
      zoom-start="1"
      heading-end="-20" 
      pitch-end="10" 
      zoom-end="1.33"
      duration="3s"
      controls="gyroscope">
      <amp-video poster="img/amp-story-360-video-cover.jpg" autoplay layout="fill" loop>
        <source src="/static/samples/video/amp-story-360.mp4" type="video/mp4" />
      </amp-video>
    </amp-story-360>
  </amp-story-grid-layer>
</amp-story-page>

amp-story-360

簡介

基本用法

定義動畫

陀螺儀控制

amp-video

更多資源