使用js封装一个缓动动画函数

在前端开发中，我们经常需要使用缓动动画来创建平滑的过渡效果。以下是一个使用JavaScript封装的简单的缓动动画函数：

// 缓动函数
function ease(t) {
    // 这里使用了简单的二次缓出效果，你可以根据需要替换为其他缓动函数
    return t * (2 - t);
}

// 动画函数
function animate(element, target, duration, property = 'transform', easing = ease) {
    let start = null;
    const initial = parseFloat(getComputedStyle(element)[property].replace(/[^0-9]/g, '')) || 0;
    const distance = target - initial;

    function step(timestamp) {
        if (!start) start = timestamp;
        const progress = timestamp - start;
        const t = Math.min(progress / duration, 1); // 确保t的值在0到1之间
        const value = initial + distance * easing(t);
        element.style[property] = `translateX(${value}px)`; // 这里以translateX为例，你可以根据需要修改
        if (t < 1) {
            window.requestAnimationFrame(step);
        }
    }

    window.requestAnimationFrame(step);
}

// 使用示例：
const element = document.querySelector('.my-element'); // 选择需要动画的元素
animate(element, 200, 1000); // 在1秒内将元素移动到200px的位置

注意：这个示例中的ease函数使用了简单的二次缓出效果。在实际应用中，你可能需要使用更复杂的缓动函数，如easeInOutQuad、easeInOutCubic等。你可以在网上找到许多现成的缓动函数，或者根据需要自己编写。

此外，这个示例中的动画函数默认修改元素的transform属性，并使用了translateX来移动元素。如果你需要修改其他属性，或者应用其他类型的变换，你可以相应地修改property参数和element.style[property]的赋值语句。

另外，请注意浏览器的兼容性问题。requestAnimationFrame和getComputedStyle函数在较新的浏览器中通常都可用，但在一些较旧的浏览器中可能不受支持。如果你的应用需要支持这些浏览器，你可能需要使用其他方法来实现动画效果。