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 |
浏览器兼容性
加载中…