JavaScript中简单的实现动画缓存效果

简单的实现动画缓存效果

/**

* @description: 动画缓存 函数
* @param {string} targetId - 要移动的目标元素 id
* @param {number} targetPosition - 要移动的目标位置
* @param {number} frequency - 每次移动的频率

*/

function move(targetId,targetPosition,frequency = 20){
// 先获取要移动的元素
var targetId = document.getElementById('targetId');
// 判断如果原本是否保存了计时器,如果有的话就立刻清空,重新启动一个新的计时器
clearInterval(targetId.timerId);

// 开始计时器
targetId.timerId = setInterval(function() {
    // 先获取目标实际位置
    var curPosition = targetId.offsetLeft;
    // 设置缓存速度
    var step = (targetPosition - curPosition);
    // 每次对计算的数字进行取整 , 防止因为JavaScript精准不足而导致无限循环浪费性能
    step = Math.ceil(step);
    // 累计移动的距离
    curPosition += step;
    // 修改元素节点的位置
    targetId.style.left = curPosition + 'px';
    
    // 距离判断,到达目标位置时停止计时器
    if (curPosition == targetPosition) {
        // 关闭计时器
        clearInterval(targetId.timerId);
    }
    
}, frequency);