此页面由 Cloud Translation API 翻译。

滚动条驱动动画案例研究

Swetha Gopalakrishnan

Saurabh Rajpal

滚动驱动的动画是网络上常见的用户体验模式。滚动式推动动画与滚动容器的滚动位置相关联。这意味着这样，当您向上或向下滚动时，关联的动画就会向前或向后拖动进行直接反应。例如，视差背景等效果图片或阅读指示器，它们会随着您滚动而移动

开发者通常使用 JavaScript 来创建滚动条驱动的动画来响应主线程上的滚动事件。这使得创建与滚动同步的高性能滚动驱动动画，原因在于滚动事件异步传送，通常因都位于主线程上

不过，作为新的 CSS 和界面功能登陆浏览器，你现在可以创建声明式滚动驱动动画。带滚动时间轴和视图时间表，与现有现有概念相集成的新概念 Web Animations API (WAAPI) 和 CSS Animations API 你现在可以获得丝滑的在主线程以外运行滚动条驱动的动画，代码。阅读本案例研究，了解 Tokopedia、redBus 和 Policybazaar 的已经受益于这项新功能

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

Tokopedia

Tokopedia 将之前的自定义 JavaScript 实现替换为了滚动条驱动的动画，以优化网页性能，并增强整体浏览体验。

与使用传统算法相比，并观察到，平均 CPU 使用量从 50% 降低至 2%，即： Andy Wihalim， Tokopedia 高级软件工程师

。 <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

以动画形式根据用户滚动操作更改顶部粘性栏的可见性位置。

代码

以下实现使用 scroll() 函数设置匿名滚动进度时间轴，用于控制 CSS 动画的进度。通过顶部粘性栏的可见性会随着已定义 animationRange。

const toggleBar = keyframes({
  to: { height: 48 },
});

export const cssWrapper = css({
  position: 'fixed',
  left: 0,
  width: '100vw',
  pointerEvents: 'none',
  marginTop: 120,
  height: 0,
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
  animation: `${toggleBar} linear both`,
  animationTimeline: 'scroll()',
  animationRange: '20px 70px',
});

redBus

redBus 在移动设备和桌面设备上分别提供了不同的动画效果，推荐活动着陆页在转化漏斗早期阶段向所有用户展示对于滚动驱动的动画，它们能够将这些自定义 JavaScript 实施替换为 CSS 效果一样

使用场景

带有图片显示的图库（适用于和翻唱歌曲流程（适用于桌面设备）。

</ph> <ph type="x-smartling-placeholder">

在 redBus“推荐活动”上加载图片时，滚动驱动的动画图片显示效果照片图库。

代码（手机）

在前面的示例中，Tokopedia 使用匿名滚动进度时间轴。在以下代码中，redBus 使用指定的视图进度时间轴。动画会更改 <img> 的 opacity 和 clip-path 定义的 animation-range 内的元素，位于该元素最近的元素内祖先滚动条，在本例中为图库滚动条。

const reveal = keyframes`
   from {
       opacity: 0;
       clip-path: inset(45% 20% 45% 20%);
   }
   to {
       opacity: 1;
       clip-path: inset(0% 0% 0% 0%);
   }`

const CardImage = styled.div`
   width: 100%;
   height: 100%;
   img {
       border-top-left-radius: 0.75rem;
       border-top-right-radius: 0.75rem;
       height: 100%;
       width: 100%;
       object-fit: cover;
       view-timeline-name: --revealing-image;
       view-timeline-axis: block;
  
       /* Attach animation, linked to the  View Timeline */
       animation: linear ${reveal} both;
       animation-timeline: --revealing-image;
  
       /* Tweak range when effect should run*/
       animation-range: entry 25% cover 50%;
   }
`;

我们非常高兴能看到这一功能完美结合了广告效果改善了网页体验，从而提升搜索引擎优化 (SEO) 的“网页体验”衡量因素。顶部极短的学习曲线使其成为所有电子商务的必备工具网站。我们还获得了其他团队的积极反馈和支持 SDA（用于更多用户体验历程）- Amit Kumar，高级工程团队 redBus 经理。

政策集市

比较保险计划是用户反复采取的重要行动，决策制定流程。通过使用滚动条驱动的动画，Policybazaar 将指定低优先级元素的尺寸，以响应用户滚动表格的操作。本次这样既能提供流畅的滚动体验，又能提高可读性。

借助滚动驱动的动画，我们能够最大限度地扩大方便用户比较各方案，确保阅读内容专注且井然有序 —Rishabh Mehrotra，主管 Design for Life Insurance BU，PolicyBazaar。

。 <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

“投资和生命”中的比较计划表格上滚动驱动的动画 animate-timeline LOB（业务线）。

代码

与之前来自 Tokopedia 的示例类似，Policybazaar 使用 scroll() 函数，用于为以下对象设置匿名滚动进度时间轴：控制 CSS 动画的进度。在本示例中，缩小字体并根据定义的 animation-range。

@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}

@keyframes move-and-fade-header {
  to {
    translate: 0% -5%;
    top:103px;
}
}

@keyframes shrink-name {
  to {
    font-size: 1.5rem;
  }
}

滚动条驱动的动画是整个用户体验历程中的一种常见模式

所有精选电子商务公司都在网页上使用了滚动驱动的动画以及为卡片添加动画效果，以吸引用户的注意力。通过以下示例显示了用户不同部分的卡片的滚动效果这通常使用匿名观看进度时间轴来实现用于控制自定义 CSS 动画的进度，以下 CSS 代码段。

@keyframes animate-in {
 0% { opacity: 0; transform: translateY(10%); }
 100% { opacity: 1; transform: translateY(0); }
}

@keyframes animate-out {
 0% { opacity: 1; transform: translateY(0); }
 100% { opacity: 0; transform: translateY(-10%); }
}

.flyin_animate {
   animation: animate-in linear forwards;
   animation-timeline: view();
   animation-range: entry;
}

redBus（首页）

</ph> <ph type="x-smartling-placeholder">

在 redBus 的“推荐活动”中加载产品卡片时，滚动驱动的动画飞入效果着陆页。

Policybazaar（商品详情页）

</ph> <ph type="x-smartling-placeholder">

Investment and Life LOB 中由滚动驱动的动画淡入、产品卡片淡出（业务线）。

Tokopedia（“商品详情”页面）

</ph> <ph type="x-smartling-placeholder">

滚动浏览产品时淡入、淡出动画。

使用滚动驱动的动画 API 时的注意事项

对于不支持的浏览器，可以对滚动驱动的动画执行 polyfill 操作，例如使用滚动时间轴 polyfill。否则需要进行额外的测试，以确保它能与您的框架，并且使用 polyfill 的浏览器不会遇到动画出现故障或卡顿等问题

在 CSS 中，您可以使用 @supports 来测试是否支持动画时间轴然后再使用滚动驱动的动画例如：

@supports (animation-timeline: scroll()) {

}

资源

敬请阅读本系列中的其他文章，这些文章介绍了电子商务公司如何通过使用新的 CSS 和界面功能（例如视图过渡、弹出式窗口、容器查询和 has() 选择器）获益。