使用 scroll-timeline-name 实现文件阅读进度动画

导读

随着 CSS 动画表现能力的提升，开发者们不断寻找新的 CSS 动画效果来提高用户体验。scroll-timeline-name 是 CSS 领域的新兴概念之一，旨在让动画更加生动和与用户互动。通过使用 scroll-timeline-name，开发者可以根据用户的滚动行为来控制动画的播放，创造出更为流畅和自然的效果。

scroll-timeline-name 简介

scroll-timeline-name 是一个 CSS 属性，它与 @scroll-timeline 或 animation-timeline 规则结合使用，用来定义基于滚动的时间轴。通过它，开发者可以将滚动行为与动画联系起来，使得动画随着页面的滚动而触发和进展。

@scroll-timeline 规则

在理解 scroll-timeline-name 之前，需要先了解 @scroll-timeline 规则。@scroll-timeline 允许你定义一个滚动时间轴，这个时间轴可以绑定到一个元素的滚动行为上。以下是一个简单的例子：

@scroll-timeline theScrollTimeline {
  source: auto;
  axis: vertical;
}

在这个例子中，theScrollTimeline 是定义的时间轴名称，它基于垂直滚动（axis: vertical）来运作。

animation-timeline 规则

animation-timeline 是一个 CSS 属性，用于指定动画的时间轴。与传统的 animation 属性直接定义动画的持续时间和播放方式不同，animation-timeline 允许开发者通过时间轴来精确控制动画的进展，使动画的播放与用户的滚动行为紧密结合。

例如，以下代码展示了如何使用 animation-timeline 和 @scroll-timeline：

@scroll-timeline slideScrollTimeline {
  source: auto;
  axis: vertical;
}

.slider {
  animation: slide 2s infinite;
  animation-timeline: slideScrollTimeline;
}

在这个示例中，.slider 的 slide 动画与 slideScrollTimeline 时间轴绑定。这意味着动画将根据用户滚动页面的进度来播放。

如何使用 scroll-timeline-name

一旦定义了 @scroll-timeline 规则，就可以使用 scroll-timeline-name 属性将这个时间轴应用到某个动画上。以下是一个简单的示例：

@scroll-timeline slideScrollTimeline {
  source: auto;
  axis: vertical;
}

.slider {
  animation: slide 2s infinite;
  scroll-timeline-name: slideScrollTimeline;
}

在这个示例中，.slider 元素的 slide 动画将根据用户的滚动行为来播放。scroll-timeline-name: slideScrollTimeline; 这行代码将动画绑定到先前定义的 slideScrollTimeline 时间轴上。

发现没有，跟使用 animation-timeline 感觉没有什么区别啊？别着急，下文的应用实例中会介绍综合两种方式的滚动动画的实现。

使用场景与优势

scroll-timeline-name 为开发者提供了多种应用场景，特别适用于以下场合：

1. 视差滚动效果：随着用户滚动页面，背景图像或前景元素以不同速度移动，从而创造出视差效果。
2. 延迟加载动画：在用户滚动到页面特定部分时触发动画，这样可以减少初始加载时间，同时提升用户体验。
3. 进度指示器：可以创建基于滚动的进度条，指示用户在页面中的滚动进度。

浏览器支持与兼容性

由于 scroll-timeline-name 是一个较新的 CSS 特性，目前的浏览器支持可能尚不完善。在开始使用之前，建议检查浏览器的兼容性，并在必要时提供回退方案。

scroll-timeline-name 的应用实践

还是以我 outline.js项目中实现的阅读进度条效果为例子：

在阅读模式下，用户滚动页面向下或者向上滚动的时候，在页面的最上方就会出现一个蓝色的阅读进度条的动画交互（这个是真进度哦！)。来看看实现的 CSS 代码吧：

.outline-reader {
    /* 进度条样式 */
    &__progress {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 3;
      height: 4px;
      width: 100%;
      background-color: @primary_color;
      scale: 0 1;
      transform-origin: left;
      animation: outline-reader-progress linear;
      animation-timeline: --ProgressTimeline;
    }
    
    /* 阅读模式的滚动区域 */
    &--reading {
      display: block;
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      box-sizing: border-box;
      padding: 3em 4em;
      background-color: @bg_color;
      scroll-timeline-name: --ProgressTimeline;
      overflow: scroll;
    }
}

/* 滚动动画 */
@keyframes outline-reader-progress {
  to {
    scale: 1 1;
  }
}

细心的同学应该发现了，我的实际应用中结合了 scroll-timeline-name 和 animation-timeline，而动画则使用了 @keyframes 取代了 @scroll-timeline。没有什么特殊的，@keyframes 目前的浏览器支持情况要比 @scroll-timeline 更好。

然后，需要特别说明的一个小技巧就是使用 scroll-timeline-name: --ProgressTimeline; 指定了 --ProgressTimeline 变量，然后使用 animation-timeline: --ProgressTimeline; 将滚动进度条 .outline-reader__progress 动画与 .outline-reader--reading 的滚动关联起来了，实现了滚动 .outline-reader--reading 的时候，.outline-reader__progress 动画展示阅读进度。

结论

scroll-timeline-name 通过将滚动行为与动画关联，为网���动画带来了新的可能性。它允许开发者创造更为生动、互动性更强的用户体验，尤其适用于需要基于滚动触发动画的场景。特别就是 outline.js 那种滚动显示阅读进度的应用场景。

随着浏览器对这一特性的支持逐步增强，scroll-timeline-name 有望成为现代网页设计中的一个重要工具。作为前端开发人员，我们需要一直保持对新技术的关注度，我们应该尝试创新，以给我们用户带来更好的用户体验。