微软这样改进MicrosoftEdge的滚动效果
微软MicrosoftEdge团队在博客分享了他们如何改进新版Edge的滚动效果,包括改进滚动动画和优化滚动体验(交互和外观)。
在旧版Edge中,团队通过与操作系统Compositor(DirectComposition)和输入API(DirectManipulation)的紧密集成,实现了与Windows系统一致的平滑滚动效果(SmoothScrolling)。由于两者都是微软的产品,所以Edge团队在实现此效果上并没有太大的阻碍。
不过与操作系统紧密集成的弊端也显而易见——难以将同样的体验移植到其他操作系统上,其中就包括旧版Windows系统。更糟糕的是,此方案虽然独立于浏览器主线程来处理输入和输出以提升响应速度,并提供了稳定的帧率,但这对于根据帧更新执行更新的脚本却效果不佳,从而导致出现抖动的情况,这也是当时团队收到的最常见反馈之一。
为此,在新版MicrosoftEdge中,团队从过去的经验中吸取教训,希望改进MicrosoftEdge和所有基于Chromium的浏览器的滚动效果,并在最开始的时候就明确了一件事:仅仅把此前与Windows操作系统同样的依赖关系照搬过来是不可行的,因为MicrosoftEdge和其他基于Chromium的浏览器在兼容性和跨平台要求上有很高的标准。
在此基础上,Edge团队再考虑到用户反馈和技术方案,以及开源准则,他们决定先将精力最大程度地集中在优化滚动效果和提升性能上。
总结起来,Edge团队对MicrosoftEdge滚动效果的改进包括:
改进滚动动画曲线
使用基于百分比的滚动
引入滚动到底时的回弹效果
引入旧版本Edge的部分滚动效果
改进滚动动画曲线
改进后的动画曲线使得滚动速度的变化更自然,滚动时间稍微变长,让用户更能感受到动画效果。简单来说,这条曲线让通过鼠标滚轮、键盘或滚动条进行的滚动以及触控滚动都有了旧版Edge中的顺滑效果。
Chromium的部分上游变化:
AddImpulse-stylescrollanimations
RefactoredScrollOffsetAnimationCurvetofacilitatenewanimations
ImplementnewWindowsflinganimationcurve
FlingAnimationCurve–Part1
FlingAnimationCurve–Part2
使用基于百分比的滚动(Percent-basedscrolling)
滑动滚动条时,Chromium使用了固定的的滚动增量值(使用鼠标滚轮增加100px,使用滚动条的点击按钮或键盘箭头增加40px)。Edge团队改变了这一行为,它采用旧版Edge中的方案:通过滚动条高度来计算滚动增量值而不是,这样做的好处是当滚动条高度较小时,浏览器依然能提供合理的滚动范围以浏览内容。
Chromium的部分上游变化:
Addpercent-basedscrollingforWindows
Addmainthreadpercentagescrollingforkeyboardandscrollbar
引入滚动到底时的回弹效果(Overscrollbounce)
Overscrollbounce主要是向用户发出一个信号,告知他们已滚动至页面的底部或顶部,类似的效果也被称为橡皮筋特效或弹性滚动。MicrosoftEdge为任何方向的滚动都加入了此效果。
引入旧版Edge的部分滚动效果
scrollchainingvs.scrolllatching
scrollchaining是旧版Edge使用的方案,它提供的效果是当子滚动条到达边界时,父滚动条会自动跟随滚动。
类似的场景,Chromium已经有了scrolllatching的概念,两者不同之处在于后者将所有的滚动操作集中到同一个滚动跳上。Edge团队指出几乎所有用户都更喜欢scrollchaining(97%好评),所以他们决定在MicrosoftEdge中使用scrollchaining,不过不打算将其引入Chromium。
惯性滑动加速(Flingboosting)
此效果主要是提升快速滚动页面时的速度,同时整合了动画曲线。例如当用户希望快速拉至页面底部,flingboosting不但提供了友好的动画效果,还加快了滚动速度。
微软希望MicrosoftEdge不完全照搬EdgeHTML的方案,而是结合Chromium和EdgeHTML的优点进行改进。为此,他们正在评估其他效果,并研究如何在即将到来的更新中应用这些改进,这些效果目前包括:
子滚动条中的回弹效果(overscrolleffect)
缩放操作的回弹效果