amp-story-360

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

amp-story-360 元件提供在 Web Stories (網路故事) 中嵌入 360 度圖片和影片的方法。

用法

使用 amp-story-360 元件來算繪 360 度圖片和影片。此元件可以在兩點之間製作動畫，或是透過裝置的陀螺儀感應器進行探索。為了獲得最佳效果，每個 amp-story-page 頁面僅使用一個元素。

無障礙考量

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

媒體需求

amp-story-360 元件以等距柱狀投影法算繪影片和圖片。這是許多 360 度相機和 3D 算圖軟體產生的預設格式。

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

尺寸

使用 2:1 的長寬比可獲得最佳的解析度分配。

大小

建議圖片和影片使用 2048 x 1024 (2k)。

設定

amp-story-360 元件接受 1 個子系。此子系必須是 amp-img 或 amp-video。

amp-image

<amp-story-360 layout="fill">
<amp-img layout="fill" src="assets/image360.jpg"></amp-img>
</amp-story-360>

amp-video

<amp-story-360 layout="fill">
<amp-video layout="fill" poster="assets/poster.jpg" autoplay loop>

<source src="assets/video360.mp4" type="video/mp4" />
</amp-video>
</amp-story-360>

請務必匯入 amp-video 元件。

定義初始視角 (PoV)

<amp-story-360 
   layout="fill"
   heading-start="95" pitch-start="-10">
...
</amp-story-360>

PoV 到 PoV 動畫

<amp-story-360 
   layout="fill"
   heading-start="95" pitch-start="-10"
   heading-end="-45" pitch-end="-20"
   duration="3s">
...
</amp-story-360>

動畫必須具備 duration 屬性。

陀螺儀

使用裝置陀螺儀感應器設定圖片的方向。
當導覽至頁面時，元件預設為 heading-end 值。
如果未提供 heading-end，則會使用 heading-start。如果兩者皆未提供，則標題預設為 0。

透過 https 提供故事，才能使用此功能。

<amp-story-360 
   layout="fill"
   controls="gyroscope"
   heading-start="95" pitch-start="-10"
   heading-end="-45" pitch-end="-20"
   duration="3s">
...
</amp-story-360>

啟動 360 按鈕

如果裝置需要使用者授權才能存取裝置的陀螺儀感應器，系統會顯示「啟動 360」按鈕。

動畫回溯

如果裝置不支援陀螺儀，或使用者拒絕授權，則在定義動畫的情況下，元件會回溯為動畫。

屬性

動畫

heading-start {float} (選填)

指定動畫開始時的標題 (水平角度，以度為單位)。
以 0 (預設值) 為中心，負角度朝向左側，正角度朝向右側。

pitch-start {float} (選填)

指定動畫開始時的傾斜度 (垂直角度，以度為單位)。
以水平線上的 0 (預設值) 為中心，負角度朝下，正角度朝上。

zoom-start {float} (選填)

指定動畫開始時的縮放比例。預設值為 1。這對應於 90 度的水平視野。值越高表示視野越窄。

heading-end {float} (選填)

指定完整動畫的標題。

pitch-end {float} (選填)

指定完整動畫的傾斜度。

zoom-end {float} (選填)

指定完整動畫的縮放比例。

duration {string} (動畫必填)

指定動畫完成所需的秒數 (s) 或毫秒 (ms)。

控制項

controls {"gyroscope"} (選填)

指定使用裝置的陀螺儀感應器來設定方向。如果裝置需要感應器授權，系統會顯示 activate-360 按鈕。如果陀螺儀感應器無法使用，則會預設為動畫。

預設方向

這些屬性可修正傾斜軸上擷取的圖片算繪。

scene-heading {float} (選填)

指定套用為旋轉矩陣至算繪圖片的絕對標題。

scene-pitch {float} (選填)

指定套用為旋轉矩陣至算繪圖片的絕對傾斜度。

scene-roll {float} (選填)

指定套用為旋轉矩陣至算繪圖片的絕對滾轉角。

驗證

請參閱 amp-story-360 驗證器中的驗證規則。