欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS原生封装动画函数

程序员文章站 2024-03-17 11:33:46
...

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

/**
 * 匀速动画函数
 * @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
    )
}
相关标签: js javascript