三个js中的补间js

function linearTween(start, end, duration, onUpdate, onComplete) {
    let startTime = null;

    function step(timestamp) {
        if (!startTime) startTime = timestamp;
        const progress = Math.min((timestamp - startTime) / duration, 1);
        const value = start + (end - start) * progress;
        onUpdate(value);

        if (progress < 1) {
            requestAnimationFrame(step);
        } else if (onComplete) {
            onComplete();
        }
    }

    requestAnimationFrame(step);
}

// 使用示例
linearTween(0, 100, 1000, (value) => {
    console.log(value); // 输出从0到100的值
}, () => {
    console.log('Animation complete');
});

function easeInOutQuad(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
}

function easingTween(start, end, duration, onUpdate, onComplete) {
    let startTime = null;

    function step(timestamp) {
        if (!startTime) startTime = timestamp;
        const progress = Math.min((timestamp - startTime) / duration, 1);
        const value = easeInOutQuad(progress, start, end - start, 1);
        onUpdate(value);

        if (progress < 1) {
            requestAnimationFrame(step);
        } else if (onComplete) {
            onComplete();
        }
    }

    requestAnimationFrame(step);
}

// 使用示例
easingTween(0, 100, 1000, (value) => {
    console.log(value); // 输出从0到100的值，带有缓动效果
}, () => {
    console.log('Animation complete');
});

class ChainedTween {
    constructor() {
        this.tweens = [];
        this.currentTween = null;
    }

    addTween(start, end, duration, easing = easeInOutQuad) {
        this.tweens.push({ start, end, duration, easing });
        return this;
    }

    start(onUpdate, onComplete) {
        const nextTween = () => {
            if (this.tweens.length > 0) {
                const { start, end, duration, easing } = this.tweens.shift();
                this.currentTween = { start, end, duration, easing, startTime: null };
                requestAnimationFrame(() => this.step(onUpdate, onComplete));
            } else if (onComplete) {
                onComplete();
            }
        };

        nextTween();
    }

    step(onUpdate, onComplete) {
        const { start, end, duration, easing, startTime } = this.currentTween;
        if (!startTime) startTime = performance.now();

        const progress = Math.min((performance.now() - startTime) / duration, 1);
        const value = easing(progress, start, end - start, 1);
        onUpdate(value);

        if (progress < 1) {
            requestAnimationFrame(() => this.step(onUpdate, onComplete));
        } else {
            this.currentTween = null;
            nextTween();
        }
    }
}

// 使用示例
const chainedTween = new ChainedTween();
chainedTween.addTween(0, 100, 1000)
           .addTween(100, 0, 1000);
chainedTween.start((value) => {
    console.log(value); // 输出从0到100再到0的值
}, () => {
    console.log('Animation complete');
});