JS原生封装动画函数

封装一个简单的原生匀速动画函数

/**
 * 匀速动画函数
 * @param {位移的元素} elm 
 * @param {位移的目标位置} target 
 */
function moveAnimation(elm, target) {
    
    
    clearInterval(elm.timeID);
    let position = elm.offsetLeft;
    let step = (target - position) > 0 ? 10 : -10;
    elm.timeID = setInterval(
        function () {
    
    
            position += step;
            if (Math.abs(target - position) > Math.abs(step)) {
    
    
                elm.style.left = position + 'px';
            } else {
    
    
                elm.style.left = target + 'px';
                clearInterval(elm.timeID);
            }
        }, 10
    )
}

缓动动画函数

/**
 * 缓动动画函数
 * @param {位移元素} elm 
 * @param {位移目标} target 
 */
function slowAnimation(elm, target) {
    
    
    clearInterval(elm.timeID);
    let position = elm.offsetLeft;
    elm.timeID = setInterval(
        function () {
    
    
            let step = position > target ? Math.floor((target - position) / 10) : Math.ceil((target - position) / 10);
            position += step;
            elm.style.left = position + 'px';
            if (target == position) {
    
    
                clearInterval(elm.timeID);
            }
        }, 20
    )
}