ViewTimeline

有限可用性

此功能不是基线,因为它在一些最广泛使用的浏览器中不起作用。

实验性: 这是一个 实验性技术
在生产环境中使用之前,请仔细查看 浏览器兼容性表

ViewTimeline网页动画 API 的一个接口,它表示视图进度时间线(有关详细信息,请参阅 CSS 滚动驱动的动画)。

ViewTimeline 实例传递给 Animation() 构造函数或 animate() 方法,将其指定为将控制动画进度的时

AnimationTimeline ScrollTimeline ViewTimeline

构造函数

ViewTimeline() 实验性

创建一个新的 ViewTimeline 对象实例。

实例属性

此接口还继承了其父级 ScrollTimeline 的属性。

subject 只读 实验性

返回对主题元素的引用,该主题元素在其最近的祖先可滚动元素(滚动器)内的可见性驱动着时间线的进度,进而驱动着动画。

startOffset 只读 实验性

返回一个 CSSNumericValue,表示时间线的开始(0% 进度)滚动位置,作为滚动器中溢出内容区

endOffset 只读 实验性

返回一个 CSSNumericValue,表示时间线的结束(100% 进度)滚动位置,作为滚动器中溢出内容区

实例方法

此接口继承了其父级 ScrollTimeline 的方法。

示例

显示视图进度时间线的主题和偏移量

在此示例中,我们使用 ViewTimeline 动画化了一个具有 classsubject 的元素——当它向上滚动通过文档时,它会

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 中,我们获取对 subjectoutput <div> 的引用,然后创建一个新的 ViewTimeline,将它与

然后,我们使用 Web 动画 API 动画化 subject 元素。最后,我们在 output 元素中显示 subjectstartOffset

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 表格仅在浏览器中加载

另请参阅