ViewTimeline
ViewTimeline
是 网页动画 API 的一个接口,它表示视图进度时间线(有关详细信息,请参阅 CSS 滚动驱动的动画)。
将 ViewTimeline
实例传递给 Animation()
构造函数或 animate()
方法,将其指定为将控制动画进度的时
构造函数
ViewTimeline()
实验性-
创建一个新的
ViewTimeline
对象实例。
实例属性
此接口还继承了其父级 ScrollTimeline
的属性。
subject
只读 实验性-
返回对主题元素的引用,该主题元素在其最近的祖先可滚动元素(滚动器)内的可见性驱动着时间线的进度,进而驱动着动画。
startOffset
只读 实验性-
返回一个
CSSNumericValue
,表示时间线的开始(0% 进度)滚动位置,作为滚动器中溢出内容区 endOffset
只读 实验性-
返回一个
CSSNumericValue
,表示时间线的结束(100% 进度)滚动位置,作为滚动器中溢出内容区
实例方法
此接口继承了其父级 ScrollTimeline
的方法。
示例
显示视图进度时间线的主题和偏移量
在此示例中,我们使用 ViewTimeline
动画化了一个具有 class
为 subject
的元素——当它向上滚动通过文档时,它会
HTML
示例的 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 代码如下所示。
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: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1.5rem;
line-height: 1.5;
}
JavaScript
在 JavaScript 中,我们获取对 subject
和 output
<div>
的引用,然后创建一个新的 ViewTimeline
,将它与
然后,我们使用 Web 动画 API 动画化 subject
元素。最后,我们在 output
元素中显示 subject
、startOffset
js
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 |
浏览器兼容性
BCD 表格仅在浏览器中加载