ViewTimeline
ViewTimeline 介面是 Web Animations API 的一部分，代表一個檢視進度時間線（有關更多詳細資訊，請參閱 CSS 滾動驅動動畫）。
將 ViewTimeline 例項傳遞給 Animation() 建構函式或 animate() 方法，以將其指定為控制動畫進度的“時間線”。
建構函式
ViewTimeline()-
建立一個新的
ViewTimeline物件例項。
例項屬性
此介面還繼承了其父介面 ScrollTimeline 的屬性。
subject只讀-
返回一個指向 subject 元素的引用，該元素在其最近的祖先可滾動元素（scroller）內的可見性正在驅動時間線的進度，從而驅動動畫的進度。
startOffset只讀-
返回一個
CSSNumericValue，表示時間線的起始（0% 進度）滾動位置，作為 scroller 中溢位內容區域起點的偏移量。 endOffset只讀-
返回一個
CSSNumericValue，表示時間線的結束（100% 進度）滾動位置，作為 scroller 中溢位內容區域起點的偏移量。
例項方法
此介面繼承了其父介面 ScrollTimeline 的方法。
示例
顯示 subject 和檢視進度時間線的偏移量
在此示例中，我們沿檢視進度時間線動畫一個類名為 subject 的元素——當它在文件中向上滾動時，它會進行動畫。我們還將在右上角的輸出元素中顯示 subject、startOffset 和 endOffset 的值。
HTML
示例的 HTML 如下所示。
<div class="content">
<h1>Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
vivamus at augue.
</p>
<p>
Dolor sed viverra ipsum nunc aliquet. Sed risus pretium quam vulputate
dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
arcu vitae elementum curabitur vitae nunc sed velit.
</p>
<div class="subject animation"></div>
<p>
Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
scelerisque. Netus et malesuada fames ac.
</p>
<div class="output"></div>
</div>
CSS
示例的 CSS 如下所示：
.subject {
width: 300px;
height: 200px;
margin: 0 auto;
background-color: deeppink;
}
.content {
width: 75%;
max-width: 800px;
margin: 0 auto;
}
.output {
position: fixed;
top: 5px;
right: 5px;
}
p,
h1,
div {
font-family: "Helvetica", "Arial", sans-serif;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1.5rem;
line-height: 1.5;
}
JavaScript
在 JavaScript 中，我們獲取 subject 和 output <div> 元素的引用，然後建立一個新的 ViewTimeline，將其與 subject 元素關聯，以指定時間線進度基於該元素透過其滾動祖先的可見性，設定 block 軸，並設定 inset 值以調整 subject 被認為可見的框的位置。
然後，我們使用 Web Animations API 對 subject 元素進行動畫。最後，我們在 output 元素中顯示 subject、startOffset 和 endOffset 的值。
const subject = document.querySelector(".subject");
const output = document.querySelector(".output");
const timeline = new ViewTimeline({
subject,
axis: "block",
inset: [CSS.px("200"), CSS.px("300")],
});
subject.animate(
{
opacity: [0, 1],
transform: ["scaleX(0)", "scaleX(1)"],
},
{
fill: "both",
timeline,
},
);
output.textContent += `Subject element: ${timeline.subject.nodeName}, `;
output.textContent += `start offset: ${timeline.startOffset}, `;
output.textContent += `end offset: ${timeline.endOffset}.`;
結果
滾動以檢視主體元素的動畫效果。
規範
| 規範 |
|---|
| 滾動驅動動畫 # viewtimeline-interface |
瀏覽器相容性
載入中…