方向效果基礎
簡介
amp-orientation-observer 結合 amp-animation 是一個強大的基礎組件，可以處理各種依賴裝置方向的使用案例。
在本教學中，我們將詳細介紹其中一些使用案例。
設定
amp-orientation-observer 是一個功能性元件，可監控裝置移動時的方向，並根據裝置移動的軸向發送 alpha、beta 和 gamma 事件。有關 DeviceOrientationEvents 的更多詳細資訊，請閱讀 MDN 上的這篇文章。
這些事件反過來可用於搜尋由 amp-animation 定義的動畫時間軸，以建立基於方向的效果。
<script async custom-element="amp-orientation-observer" src="https://cdn.ampproject.org/v0/amp-orientation-observer-0.1.js"></script>
amp-animation 是一個 UI 元件，依賴 Web Animations API 在 AMP 文件中定義和執行關鍵影格動畫。
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
樣式
這些範例使用的 CSS 包含在此處以供參考。
這些規則僅僅是為了使範例運作而需要的，但並非本文涵蓋概念的基礎。
<style amp-custom>
#scrollText {
font-family: Helvetica, sans-serif;
padding: 10px;
max-width: 412px;
height: 500px;
margin: auto;
overflow: hidden;
}
#ipsum {
background-image: linear-gradient(white, deeppink);
}
.clock-hand {
position: absolute;
width: 2vw;
height: 20vw;
max-height: 90px;
max-width: 10px;
top: 50%;
left: 50%;
z-index: 2;
background: #FAFAFA;
transform-origin: 50% 0%;
border-radius: 10px;
transform: rotate(-180deg)
}
.rotate-2 {
transform: rotate(-270deg)
}
</style>
基於傾斜的滾動動畫
讓我們建立一個基於傾斜的滾動動畫，您可以在頁面上上下滾動，同時沿 y 軸傾斜裝置。
這個範例展示了結合 amp-orientation-observer 和 amp-animation 背後的核心概念：當裝置傾斜時，能夠在關鍵影格動畫時間軸中前進。
我們的滾動場景是一個 div，其中包含一些 Lorem Ipsum 文字。我們將 amp-orientation-observer 元素新增為場景的子元素，以監控裝置的位置。讓我們看看詳細資訊： - on:beta：此事件由方向觀察器觸發，因為裝置方向沿 beta 軸變化。此事件提供一個百分比值（0 到 1 之間的小數），表示裝置在 beta 軸內的距離。 - anim.seekTo(percent=event.percent)：我們將定義一個 amp-animation，它將在下一步執行旋轉，在這裡我們透過在 beta 事件發生時在動畫上觸發 seekTo 動作來耦合 amp-orientation-observer 和 amp-animation。這就是我們指定當裝置沿 beta 軸移動時，我們希望在動畫時間軸中前進的方式。 - beta-range：每個軸都有一個它追蹤的角度範圍。對於 beta 軸，預設範圍為 -180 到 180 度。如果您想將範圍設定為自訂範圍（就像我們在這裡所做的那樣），您可以使用此處的 beta-range 屬性來指定。在此範例中，我們將 beta-range 設定為「0 180」，以確保文字不會滾動超出其第一段。
沿 y 軸移動手機以滾動
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id est et dui maximus sagittis vel imperdiet nibh. Nam finibus nisl sit amet neque gravida pellentesque. Phasellus vulputate, tortor ut pretium ultricies, nibh massa vestibulum nisi, a vestibulum orci velit eget nisl. Maecenas dui nulla, consectetur sed porttitor ac, varius quis nibh. In pellentesque nisi quis ligula fringilla, non lobortis felis tincidunt. Nullam hendrerit sodales purus, nec rhoncus urna ultricies ac. Cras vestibulum pulvinar libero, quis faucibus nisi. Quisque ut lacus vitae justo faucibus mollis vel bibendum neque. Quisque pretium nunc in nunc vulputate, interdum ullamcorper nisl convallis. Cras vitae finibus urna. Sed enim turpis, consectetur eu velit nec, sodales mollis justo. Curabitur pretium luctus felis sagittis rhoncus. Donec vitae vehicula erat, non pellentesque odio. Vestibulum accumsan rhoncus placerat. Donec rutrum ullamcorper sodales. Vestibulum pretium ut diam faucibus tincidunt. Aenean vestibulum nisl nec arcu eleifend posuere. Aliquam nec feugiat nibh. Cras pretium ut purus quis pharetra. Morbi urna augue, lobortis ac porttitor vitae, feugiat eget dui. Nam lacinia commodo tellus vel sagittis. Aliquam id pharetra metus. Nam tristique vulputate maximus. Donec consequat aliquam lacus, ac fermentum magna iaculis tristique. In urna dolor, rutrum non mattis at, luctus nec lectus. Maecenas consequat, massa at placerat convallis, arcu elit consequat nulla, vel egestas justo augue vitae mauris. Nullam est diam, aliquam sit amet posuere non, condimentum et ante. Ut at ullamcorper ipsum. Nullam non efficitur sapien. Praesent vitae odio diam. Nullam dignissim hendrerit neque non tempor. Praesent non arcu volutpat, maximus risus in, rutrum tellus. Quisque nec porttitor purus. Quisque hendrerit erat consequat dignissim vehicula. Quisque tortor orci, bibendum et lacinia at, porttitor nec est. Nunc venenatis sollicitudin dui, et fermentum lectus euismod vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus diam ante, sagittis non finibus sed, pulvinar id dolor. Maecenas ac facilisis lacus. Suspendisse potenti. Curabitur dignissim consequat ante, quis facilisis ipsum faucibus nec. Suspendisse potenti. Mauris lorem eros, finibus id tincidunt quis, bibendum at urna. Aenean quis tortor ultricies, sodales ipsum id, imperdiet felis. Maecenas vestibulum cursus est convallis imperdiet. In convallis tempus lacus, suscipit tempus turpis mattis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin massa massa, molestie eu pretium in, eleifend vel erat. Pellentesque dictum turpis sit amet neque elementum aliquam a sed metus. Donec dignissim laoreet massa vel vehicula. Praesent pretium arcu consequat augue dignissim, at ultrices quam placerat. Proin justo odio, fermentum sed malesuada eu, facilisis non quam. In molestie enim nec ligula tempus, sed condimentum dui molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis, lacus cursus varius malesuada, lacus enim blandit ipsum, non hendrerit est sapien et ex. Nullam quis pulvinar nulla, vitae venenatis massa. In mattis at eros id ullamcorper. Aenean ac hendrerit magna. Sed volutpat sapien quis justo accumsan eleifend. Praesent lobortis, velit sed elementum molestie, urna nibh malesuada lacus, vitae efficitur tellus elit ac augue. Aliquam erat volutpat. Praesent ultricies felis erat, ut luctus nulla pellentesque in. Etiam lacinia neque id neque egestas tempor.文字結束
<div id="scrollText">
<amp-orientation-observer beta-range="0 180" on="beta:anim.seekTo(percent=event.percent)" layout="nodisplay">
</amp-orientation-observer>
<div id="ipsum">
<p>Move phone along y axis to scroll</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id est et dui maximus sagittis vel imperdiet nibh. Nam finibus nisl sit amet neque gravida pellentesque. Phasellus vulputate, tortor ut pretium ultricies, nibh massa vestibulum nisi, a vestibulum orci velit eget nisl. Maecenas dui nulla, consectetur sed porttitor ac, varius quis nibh. In pellentesque nisi quis ligula fringilla, non lobortis felis tincidunt. Nullam hendrerit sodales purus, nec rhoncus urna ultricies ac. Cras vestibulum pulvinar libero, quis faucibus nisi. Quisque ut lacus vitae justo faucibus mollis vel bibendum neque. Quisque pretium nunc in nunc vulputate, interdum ullamcorper nisl convallis. Cras vitae finibus urna. Sed enim turpis, consectetur eu velit nec, sodales mollis justo. Curabitur pretium luctus felis sagittis rhoncus. Donec vitae vehicula erat, non pellentesque odio. Vestibulum accumsan rhoncus placerat. Donec rutrum ullamcorper sodales. Vestibulum pretium ut diam faucibus tincidunt.
Aenean vestibulum nisl nec arcu eleifend posuere. Aliquam nec feugiat nibh. Cras pretium ut purus quis pharetra. Morbi urna augue, lobortis ac porttitor vitae, feugiat eget dui. Nam lacinia commodo tellus vel sagittis. Aliquam id pharetra metus. Nam tristique vulputate maximus. Donec consequat aliquam lacus, ac fermentum magna iaculis tristique. In urna dolor, rutrum non mattis at, luctus nec lectus. Maecenas consequat, massa at placerat convallis, arcu elit consequat nulla, vel egestas justo augue vitae mauris. Nullam est diam, aliquam sit amet posuere non, condimentum et ante. Ut at ullamcorper ipsum. Nullam non efficitur sapien. Praesent vitae odio diam. Nullam dignissim hendrerit neque non tempor.
Praesent non arcu volutpat, maximus risus in, rutrum tellus. Quisque nec porttitor purus. Quisque hendrerit erat consequat dignissim vehicula. Quisque tortor orci, bibendum et lacinia at, porttitor nec est. Nunc venenatis sollicitudin dui, et fermentum lectus euismod vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus diam ante, sagittis non finibus sed, pulvinar id dolor. Maecenas ac facilisis lacus. Suspendisse potenti.
Curabitur dignissim consequat ante, quis facilisis ipsum faucibus nec. Suspendisse potenti. Mauris lorem eros, finibus id tincidunt quis, bibendum at urna. Aenean quis tortor ultricies, sodales ipsum id, imperdiet felis. Maecenas vestibulum cursus est convallis imperdiet. In convallis tempus lacus, suscipit tempus turpis mattis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin massa massa, molestie eu pretium in, eleifend vel erat. Pellentesque dictum turpis sit amet neque elementum aliquam a sed metus. Donec dignissim laoreet massa vel vehicula. Praesent pretium arcu consequat augue dignissim, at ultrices quam placerat. Proin justo odio, fermentum sed malesuada eu, facilisis non quam. In molestie enim nec ligula tempus, sed condimentum dui molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis, lacus cursus varius malesuada, lacus enim blandit ipsum, non hendrerit est sapien et ex. Nullam quis pulvinar nulla, vitae venenatis massa.
In mattis at eros id ullamcorper. Aenean ac hendrerit magna. Sed volutpat sapien quis justo accumsan eleifend. Praesent lobortis, velit sed elementum molestie, urna nibh malesuada lacus, vitae efficitur tellus elit ac augue. Aliquam erat volutpat. Praesent ultricies felis erat, ut luctus nulla pellentesque in. Etiam lacinia neque id neque egestas tempor.
<h3>End of text</h3>
</div>
</div>
此處的動畫是沿 Y 軸的平移，以模仿滾動動作。
<amp-animation id="anim" layout="nodisplay">
<script type="application/json">
{
"duration": "3s",
"fill": "both",
"direction": "alternate",
"animations": [
{
"selector": "#ipsum",
"keyframes": [
{ "transform": "translateY(0)" },
{ "transform": "translateY(-1170px)" }
]
}
]
}
</script>
</amp-animation>
基於傾斜的平移動畫
讓我們建立一個基於傾斜的動畫，當您沿特定軸傾斜裝置時，時鐘的指針會移動。第一個動畫沿 beta 軸，若要查看實際效果，請沿 y 軸旋轉手機。
<div id="clock-scene-1" class="clock-scene">
<amp-orientation-observer beta-range="0 180" on="beta:clockAnim1.seekTo(percent=event.percent)" layout="nodisplay">
</amp-orientation-observer>
<amp-img layout="responsive" width="2" height="1.5" src="/static/samples/img/clock.jpg">
<div class="clock-hand rotate-1"></div>
</amp-img>
</div>
在這種情況下，動畫是指針從 -180 度旋轉到 180 度，以允許指針在 12 點鐘位置開始和結束。
<amp-animation id="clockAnim1" layout="nodisplay">
<script type="application/json">
{
"duration": "3s",
"fill": "both",
"direction": "alternate",
"animations": [
{
"selector": "#clock-scene-1 .rotate-1",
"keyframes": [
{ "transform": "rotate(-180deg)" },
{ "transform": "rotate(180deg)" }
]
}
]
}
</script>
</amp-animation>
第二個動畫沿 gamma 軸，若要查看實際效果，請沿 x 軸旋轉手機
<div id="clock-scene-2" class="clock-scene">
<amp-orientation-observer on="gamma:clockAnim2.seekTo(percent=event.percent)" layout="nodisplay">
</amp-orientation-observer>
<amp-img layout="responsive" width="2" height="1.5" src="/static/samples/img/clock.jpg">
<div class="clock-hand rotate-2"></div>
</amp-img>
</div>
在這種情況下，動畫是指針從 -270 度旋轉到 90 度，以允許指針在 12 點鐘位置開始和結束。此處的運動限制在從 9 點鐘位置到 3 點鐘位置之間。
<amp-animation id="clockAnim2" layout="nodisplay">
<script type="application/json">
{
"duration": "3s",
"fill": "both",
"direction": "alternate",
"animations": [
{
"selector": "#clock-scene-2 .rotate-2",
"keyframes": [
{ "transform": "rotate(-270deg)" },
{ "transform": "rotate(-90deg)" }
]
}
]
}
</script>
</amp-animation>
第三個動畫沿 alpha 軸，若要查看實際效果，請沿水平軸旋轉手機
<div id="clock-scene-3" class="clock-scene">
<amp-orientation-observer alpha-range="0 360" on="alpha:clockAnim3.seekTo(percent=event.percent)" layout="nodisplay">
</amp-orientation-observer>
<amp-img layout="responsive" width="2" height="1.5" src="/static/samples/img/clock.jpg">
<div class="clock-hand rotate-3"></div>
</amp-img>
</div>
在這種情況下，動畫是指針從 90 度旋轉到 -270 度，以允許指針在 12 點鐘位置開始和結束。
<amp-animation id="clockAnim3" layout="nodisplay">
<script type="application/json">
{
"duration": "3s",
"fill": "both",
"direction": "alternate",
"animations": [
{
"selector": "#clock-scene-3 .rotate-3",
"keyframes": [
{ "transform": "rotate(90deg)" },
{ "transform": "rotate(-270deg)" }
]
}
]
}
</script>
</amp-animation>
需要更多說明嗎？
如果此頁面上的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。
前往 Stack Overflow 未說明的特色？AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎針對您特別感興趣的問題提供一次性貢獻。
在 GitHub 上編輯範例-