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

更多资源