Question

我一直在努力用普通的js创建一个平滑的滚动。我用典型的动画时序尝试了它：

function animate(x) {
    var start = new Date();
    var id = setInterval(function () {
        var timepassed = new Date() - start;
        var progress = timepassed / x.duration;
        if (progress > 1) {
            progress = 1;
        }
        var delta = x.delta(progress);
        x.step(delta);
        if (progress == 1) {
            clearInterval(id);
        }
    }, x.delay);
}

之后我会测量offsetTop元素并使用scrollTo()来实现目标 window.scrollTo(0, delta * to.offsetTop); 其中delta返回的时间进度。但问题是我的眼睛看起来并不那么顺利。我错过了一些关于动画的重要信息吗？

Demo

（使用其他如果要找出分析应该走哪条路 - 至少目前为止）

Answer 1

您的问题有两个方面：

性能
感知顺畅

<强>性能

在您的代码中，您可以使用requestAnimationFrame()代替setInterval()来获得性能。在mozilla或article for transitioning to the new method上也有一个不错的in-depth article by Paul Irish。注意：因为你想要达到60fps，你的代码计算时间不应超过16ms。

感知动画平滑度＆amp;缓和

对于第二个问题：你的动画是线性的，因此很无聊。当（如果你曾经做过）你使用动画库或jQuery进行一些动画时，你总是可以指定动画应该使用哪个计时功能。这些是例如“缓入”，“缓出”等。您可以在function through some math中实施这些内容。网络中有许多工具visualize these easing-equotations中的different ways。

如果您现在渴望获得更多输入，请查看Robert Penner's Easing Page。

最后，但并非最不重要的是，看看this gist，它还提供了不同缓动函数的JavaScript实现 - 哦，以及Vanilla JS中的另一个可能的解决方案;）

P.S。仅用于演示，your code with a little ease

Answer 2

分享@ Sebastian的回答是使用window.requestAnimationFrame();

快速演示您的代码

http://jsfiddle.net/xerxesnoble/e53qm15L/4/

不仅如此，这是另一种简单的方法（使用jQuery）在代码中有一个平滑的滚动：

https://css-tricks.com/snippets/jquery/smooth-scrolling/

平滑滚动不是那么顺利

2 个答案: