JavaScript原生Bezier曲线过渡函数

参数说明

/*
 * @param t 动画已消耗时间
 * @param c 目标值
 * @param d 持续时间
 */

函数

var tween = {
    linear: function ( t, c, d ) {
        return c * t / d;
    },
    easeIn: function ( t, c, d ) {
        return c * ( t /= d ) * t;
    },
    strongEaseIn: function (t, c, d) {
        return c * ( t /= d ) * t * t * t * t;
    },
    strongEaseOut: function (t, c, d) {
        return c * ( ( t = t / d - 1) * t * t * t * t + 1 );
    },
    sineaseIn: function ( t, c, d ) {
        return c * ( t /= d) * t * t;
    },
    sineaseOut: function (t,c,d) {
        return c * ( ( t = t / d - 1) * t * t + 1 );
    },
}

示例

// 页面滚动过渡
const rollingTo = function(from,to,duration) {
    let start = null,
        run = null;
    const step = (timestamp) => {
        if (!start) {
            start = timestamp
        }
        let stepScroll = tween.sineaseOut(timestamp - start, to - from, duration);
        let total = from + stepScroll;
        window.scrollTo({
            top: total,
            behavior: "auto"
        })
        run = requestAnimationFrame(step);
        if((from <= to && total >= to) || (from >= to && total <= to)){
            cancelAnimationFrame(run);
            this.canClickToScroll = true
        }
    }
    requestAnimationFrame(step);
}
// 运行
rollingTo(0, window.innerHeight, 600);