Web Animation API 滚动驱动动画：从旧语法到新规范的演进与实践

1. 滚动驱动动画概述

滚动驱动动画（Scroll-driven Animations）是一种强大的网页交互技术，它允许动画的播放进度与用户的滚动位置紧密关联。这意味着用户滚动页面时，动画会根据滚动的方向和距离进行播放、暂停、反向或加速。这种技术能够创造出引人入胜的视觉效果，如视差滚动、元素渐入渐出、进度条等。

Web Animation API (WAAPI) 是现代浏览器提供的一种原生 JavaScript API，用于创建和控制网页动画。它提供了一个高性能且灵活的动画解决方案，相较于传统的 CSS 动画或第三方库，WAAPI 提供了更细粒度的控制和更好的性能表现。将 WAAPI 与滚动驱动动画结合，可以实现更为复杂和流畅的交互体验。

2. 滚动驱动动画规范的演进与新语法

早期的滚动驱动动画实现，包括一些在线示例和 polyfill，可能采用了与当前 W3C 规范不同的语法。这导致了许多开发者在尝试复现旧示例时遇到动画不生效或行为异常的问题。例如，一些旧的 @scroll-timeline CSS 规则或 JavaScript API 调用已不再符合最新的标准。

核心变化在于：

• CSS scroll-timeline 和 view-timeline 属性： 现代规范引入了 CSS 属性来直接定义滚动时间线。scroll-timeline 用于将动画绑定到特定滚动容器的滚动进度，而 view-timeline 则将动画绑定到元素在滚动容器视口中的可见性。
• JavaScript ScrollTimeline 和 ViewTimeline 对象： 在 JavaScript 中，可以通过构造函数 new ScrollTimeline() 或 new ViewTimeline() 来创建自定义的滚动时间线对象，并将其作为 Element.animate() 方法的 timeline 选项传入。

理解这一语法演进至关重要，因为它是实现正确滚动驱动动画的基础。

3. 实现多个元素的滚动驱动渐入动画

为了实现多个元素在滚动时逐个渐入的效果，我们可以利用 CSS 的 view-timeline 属性或 JavaScript 的 ViewTimeline 对象。以下是使用 CSS 和 JavaScript 两种方式的示例。

3.1 使用 CSS 实现（推荐）

对于简单的渐入渐出效果，CSS 方式更为简洁和声明性。

HTML 结构：

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>

CSS 样式：

.container {
    height: 300vh; /* 确保有足够的滚动空间 */
    padding-top: 50vh; /* 初始偏移，让元素从屏幕外进入 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item {
    width: 200px;
    height: 100px;
    margin: 50px 0;
    background-color: lightblue;
    border: 1px solid steelblue;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    opacity: 0; /* 初始透明度 */
    transform: translateY(50px); /* 初始位置 */

    /* 定义视图时间线 */
    view-timeline-name: --item-reveal;
    view-timeline-axis: block; /* 垂直滚动 */

    /* 绑定动画到时间线 */
    animation: fade-in linear forwards;
    animation-timeline: --item-reveal;
    animation-range: entry 0% cover 50%; /* 当元素进入视口0%到50%时完成动画 */
}

/* 定义动画关键帧 */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

解释：

1. view-timeline-name: --item-reveal; 为每个 .item 元素定义了一个名为 --item-reveal 的视图时间线。每个元素都有自己的时间线。
2. animation-timeline: --item-reveal; 将 fade-in 动画绑定到这个自定义时间线。
3. animation-range: entry 0% cover 50%; 定义了动画的触发范围。当元素从视口底部进入（entry）且其顶部到达视口 0% 位置时开始，直到元素顶部到达视口 50% 位置时动画完全播放。这使得动画在元素进入视口时逐渐显现。

3.2 使用 JavaScript 实现

JavaScript 提供了更灵活的控制，尤其适用于更复杂的动画逻辑或动态生成的元素。

HTML 结构（同上）

JavaScript 代码：

// 引入 polyfill，确保浏览器兼容性
// 注意：最新的 polyfill 地址可能有所变化，请查阅官方文档
// 例如：https://unpkg.com/@scroll-timeline/polyfill/dist/scroll-timeline.js
import 'https://rawcdn.githack.com/flackr/scroll-timeline/55c54c10ccf3308f36c09cbca4935286fe99f14f/dist/scroll-timeline.js';

document.addEventListener('DOMContentLoaded', () => {
    const items = document.querySelectorAll('.item');

    items.forEach(item => {
        // 定义动画关键帧
        const keyframes = [
            { opacity: 0, transform: 'translateY(50px)' },
            { opacity: 1, transform: 'translateY(0px)' }
        ];

        // 创建 ViewTimeline 实例
        // source: 动画所基于的滚动容器，默认为 document.documentElement (根滚动元素)
        // subject: 触发动画的元素本身
        // axis: 'block' (垂直滚动) 或 'inline' (水平滚动)
        const itemTimeline = new ViewTimeline({
            subject: item,
            axis: 'block',
            // inset: ['auto', 'auto', 'auto', 'auto'] // 可选，定义视口内触发区域
        });

        // 使用 Element.animate() 方法创建动画
        item.animate(
            keyframes,
            {
                duration: 1000, // 动画持续时间（在此上下文中表示动画完成所需的时间线长度）
                fill: 'forwards', // 动画结束后保持最终状态
                easing: 'linear',
                timeline: itemTimeline, // 绑定到自定义时间线
                rangeStart: 'entry 0%', // 当元素进入视口0%时开始
                rangeEnd: 'cover 50%' // 当元素顶部到达视口50%时结束
            }
        );

        // 初始样式设置，确保动画前是隐藏的
        item.style.opacity = '0';
        item.style.transform = 'translateY(50px)';
    });
});

解释：

1. Polyfill: 鉴于滚动驱动动画仍是实验性特性，引入 scroll-timeline polyfill 是必要的，以确保在不支持的浏览器中也能运行。请确保使用最新且兼容的 polyfill。
2. querySelectorAll 和 forEach: 通过 document.querySelectorAll('.item') 获取所有目标元素，然后使用 forEach 遍历每个元素，为它们独立创建动画。这是解决“只动画一个元素”问题的关键。
3. new ViewTimeline({ subject: item, axis: 'block' }): 为每个 item 创建一个新的 ViewTimeline 实例。subject 属性指定了动画的触发元素，axis 指定了滚动方向。
4. item.animate(keyframes, options): 使用 Element.animate() 方法创建动画。
   • keyframes: 定义动画的起始和结束状态。
   • timeline: itemTimeline: 将动画绑定到前面创建的 ViewTimeline 实例。
   • rangeStart 和 rangeEnd: 定义动画在时间线上的开始和结束位置，与 CSS 中的 animation-range 类似。这里 entry 0% 表示元素顶部刚进入视口时开始，cover 50% 表示元素顶部到达视口 50% 位置时动画完成。

4. 注意事项与最佳实践

• 浏览器兼容性与 Polyfill： 滚动驱动动画目前仍是实验性特性，主要在 Chromium 浏览器中得到支持。在生产环境中使用时，务必引入最新的 scroll-timeline polyfill 以确保跨浏览器兼容性。
• 性能优化： 尽管 WAAPI 性能优异，但过度复杂的动画或大量同时播放的动画仍可能影响性能。优化动画关键帧、避免在动画中触发布局重排和重绘是关键。
• 动画范围 (animation-range) 的理解： 精确控制动画的触发时机和持续范围是实现预期效果的关键。entry、exit、cover 等关键字结合百分比可以定义复杂的动画行为。
• 调试： 现代浏览器（如 Chrome）的开发者工具提供了强大的动画调试功能，可以可视化动画时间线和播放进度，这对于调试滚动驱动动画非常有帮助。
• 渐进增强： 考虑在不支持滚动驱动动画的浏览器中提供降级方案，例如简单的 CSS 动画或直接显示元素，确保用户体验不受影响。
• 避免旧语法： 始终查阅最新的 W3C 规范和 MDN 文档，避免使用已过时或即将废弃的语法。

5. 总结

Web Animation API 结合滚动驱动动画为网页带来了前所未有的交互可能性。理解其最新的规范和语法是成功实现高性能、流畅动画的关键。通过为每个目标元素独立创建动画并将其绑定到各自的视图时间线，我们可以轻松实现多个元素在滚动时逐个动画的效果。随着浏览器对这一特性的原生支持日益完善，滚动驱动动画必将成为现代网页设计中不可或缺的一部分。

以上就是Web Animation API 滚动驱动动画：从旧语法到新规范的演进与实践的详细内容，更多请关注php中文网其它相关文章！