javascript - Vanilla js平滑滚动中的计时功能

Question

我的单页网站在 vanilla js 中有一个平滑的滚动，我尝试在没有 jquery 的情况下实现它，我想添加一个像 cubic bezier 这样的计时函数。有没有办法在 javascript 中做到这一点？这是代码:

{
    'use strict';

    let currentY = 0;
    let destination = 0;
    let speed = 40;
    let scroller = null;


    function smoothScroll(id) {

        destination = document.getElementById(id).offsetTop;

        //if the user scrolls down
        if (window.pageYOffset < destination) {

            scroller = setTimeout(function () {
                smoothScroll(id);
            }, 1);

            currentY = currentY + speed;

            if (currentY >= destination) {
                clearTimeout(scroller);
            }

            //if the user scrolls up
        } else {

            scroller = setTimeout(function () {
                smoothScroll(id);
            }, 1);

            currentY = currentY - speed;

            if (currentY <= destination) {
                clearTimeout(scroller);
            }

        }

        window.scroll(0, currentY);

    }

    window.onscroll = function () {
        currentY = this.pageYOffset;
    };


    Array.from(document.querySelectorAll(".scroll")).forEach(e => {

        e.addEventListener('click', () => {

            smoothScroll(e.href.split('#')[1]);

        });
    });

}

这是一个代码笔来观看它的运行:https://codepen.io/anon/pen/NYNQym

提前致谢。

Answer 1

首先，您应该使用 requestAnimationFrame(fn) 而不是 setTimeout(fn,1)。

您的动画系统是增量式的——它会说“我到了吗？”如果没有，靠近点；如果是，停止。这没问题，但它为您提供的关于动画的唯一信息是它是否已完成。

缓和就像“接近尾声时，放慢速度”，但您不知道何时接近尾声。

假设我们要从滚动位置 100 移动到滚动位置 200，从时间 0 开始到时间 500 结束。这是时间到位置的映射。如果是时间 250，我们应该在位置 150 - 他们都在中间。同样的事情适用于任何其他时间。这称为补间动画，它是制作动画的最常见方式。

一旦我们以这种方式工作，我们就可以进行缓动。缓动函数本身非常简单 - here are all the classic ones .

如果你愿意，我可以发布代码，但听起来你正在尝试自己解决这个问题，希望这对你有所帮助，祝你好运。