IT资讯 微软如何改进 Microsoft Edge 的滚动效果?

woody · 2020-04-07 11:00:06 · 热度: 1

微软 Microsoft Edge 团队在博客分享了他们如何改进新版 Edge 的滚动效果,包括改进滚动动画和优化滚动体验(交互和外观)。

在旧版 Edge 中,团队通过与操作系统 Compositor (DirectComposition) 和输入 API (Direct Manipulation) 的紧密集成,实现了与 Windows 系统一致的平滑滚动效果(Smooth Scrolling)。由于两者都是微软的产品,所以 Edge 团队在实现此效果上并没有太大的阻碍。

不过与操作系统紧密集成的弊端也显而易见 —— 难以将同样的体验移植到其他操作系统上,其中就包括旧版 Windows 系统。更糟糕的是,此方案虽然独立于浏览器主线程来处理输入和输出以提升响应速度,并提供了稳定的帧率,但这对于根据帧更新执行更新的脚本却效果不佳,从而导致出现抖动的情况,这也是当时团队收到的最常见反馈之一。

为此,在新版 Microsoft Edge 中,团队从过去的经验中吸取教训,希望改进 Microsoft Edge 和所有基于 Chromium 的浏览器的滚动效果,并在最开始的时候就明确了一件事:仅仅把此前与 Windows 操作系统同样的依赖关系照搬过来是不可行的,因为 Microsoft Edge 和其他基于 Chromium 的浏览器在兼容性和跨平台要求上有很高的标准。

在此基础上,Edge 团队再考虑到用户反馈和技术方案,以及开源准则,他们决定先将精力最大程度地集中在优化滚动效果和提升性能上。

总结起来,Edge 团队对 Microsoft Edge 滚动效果的改进包括:

  • 改进滚动动画曲线

  • 使用基于百分比的滚动

  • 引入滚动到底时的回弹效果

  • 引入旧版本 Edge 的部分滚动效果

改进滚动动画曲线

改进后的动画曲线使得滚动速度的变化更自然,滚动时间稍微变长,让用户更能感受到动画效果。简单来说,这条曲线让通过鼠标滚轮、键盘或滚动条进行的滚动以及触控滚动都有了旧版 Edge 中的顺滑效果。

Chromium 的部分上游变化:

使用基于百分比的滚动(Percent-based scrolling)

滑动滚动条时,Chromium 使用了固定的的滚动增量值(使用鼠标滚轮增加 100px,使用滚动条的点击按钮或键盘箭头增加 40px)。Edge 团队改变了这一行为,它采用旧版 Edge 中的方案:通过滚动条高度来计算滚动增量值而不是,这样做的好处是当滚动条高度较小时,浏览器依然能提供合理的滚动范围以浏览内容。

Chromium 的部分上游变化:

引入滚动到底时的回弹效果(Overscroll bounce)

Overscroll bounce 主要是向用户发出一个信号,告知他们已滚动至页面的底部或顶部,类似的效果也被称为橡皮筋特效或弹性滚动。Microsoft Edge 为任何方向的滚动都加入了此效果。

微软如何改进 Microsoft Edge 的滚动效果?

引入旧版 Edge 的部分滚动效果

scroll chaining vs. scroll latching

scroll chaining 是旧版 Edge 使用的方案,它提供的效果是当子滚动条到达边界时,父滚动条会自动跟随滚动。

微软如何改进 Microsoft Edge 的滚动效果?

类似的场景,Chromium 已经有了 scroll latching 的概念,两者不同之处在于后者将所有的滚动操作集中到同一个滚动跳上。Edge 团队指出几乎所有用户都更喜欢 scroll chaining (97% 好评),所以他们决定在 Microsoft Edge 中使用 scroll chaining,不过不打算将其引入 Chromium。

惯性滑动加速(Fling boosting)

此效果主要是提升快速滚动页面时的速度,同时整合了动画曲线。例如当用户希望快速拉至页面底部,fling boosting 不但提供了友好的动画效果,还加快了滚动速度。

微软如何改进 Microsoft Edge 的滚动效果?

微软希望 Microsoft Edge 不完全照搬 EdgeHTML 的方案,而是结合 Chromium 和 EdgeHTML 的优点进行改进。为此,他们正在评估其他效果,并研究如何在即将到来的更新中应用这些改进,这些效果目前包括:

  1. 子滚动条中的回弹效果(overscroll effect)
  2. 缩放操作的回弹效果

文章转载自 OSCHINA 社区 [http://www.oschina.net]

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册