js动画(animate)简单引擎代码示例

以下是一个简单的JavaScript动画（animate）引擎的示例代码。这个引擎使用`requestAnimationFrame`来创建平滑的动画效果，同时保持高效的性能。

// 简单的动画引擎
function animate(element, properties, duration, easingFunction, callback) {
    // 初始时间
    let startTime = null;

    // 动画状态
    const animation = {
        target: element,
        start: {},
        propertyNames: [],
        end: {},
        duration: duration,
        easingFunction: easingFunction,
        progress: 0,
        update: function() {
            // 获取当前时间
            const now = new Date().getTime();

            // 检查是否开始计时
            if (startTime === null) startTime = now;

            // 计算已用时间
            const timeElapsed = now - startTime;

            // 计算进度
            this.progress = timeElapsed / duration;

            // 防止进度超过1
            if (this.progress > 1) this.progress = 1;

            // 计算每个属性的值
            const delta = this.easingFunction(this.progress);

            this.propertyNames.forEach(propertyName => {
                const start = this.start[propertyName];
                const end = this.end[propertyName];
                const change = end - start;
                this.target.style[propertyName] = start + change * delta + 'px';
            });

            // 如果动画未完成，则继续动画
            if (this.progress < 1) {
                requestAnimationFrame(this.update.bind(this));
            } else {
                // 调用完成回调
                if (typeof callback === 'function') callback();
            }
        }
    };

    // 初始化动画属性
    for (let propertyName in properties) {
        if (properties.hasOwnProperty(propertyName)) {
            // 获取起始值
            animation.start[propertyName] = parseInt(getComputedStyle(element).getPropertyValue(propertyName), 10) || 0;
            animation.end[propertyName] = properties[propertyName];
            animation.propertyNames.push(propertyName);
        }
    }

    // 开始动画
    animation.update();
}

// 示例用法
// 定义一个简单的缓动函数
function linear(t) {
    return t;
}

// 使用animate函数
const div = document.getElementById('myDiv');
animate(div, { left: 200 }, 1000, linear, function() {
    console.log('动画完成！');
});

// 确保HTML中有一个id为'myDiv'的元素
// <div id="myDiv" style="position: absolute; left: 0px; width: 100px; height: 100px; background-color: red;"></div>

在这个例子中，`animate`函数接受五个参数：

- `element`：要应用动画的DOM元素。

- `properties`：一个对象，键是CSS属性名，值是动画结束时应达到的值。

- `duration`：动画持续时间（毫秒）。

- `easingFunction`：缓动函数，用于控制动画的速度曲线。这里使用的是`linear`，即线性速度。

- `callback`：动画完成后调用的回调函数（可选）。

动画引擎内部使用`requestAnimationFrame`来循环更新元素样式，直到动画完成。