原生JS封装动画

用过jQuery的都知道，jQuery中有提供了一个动画方法，那就是animate方法。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。

使用方法

$("#box").animate({left: 500}， 3000);

上面是jQuery中的动画方法，那么使用原生JS我们如何封装这样的动画方法呢？

开始封装

function linear(t, b, c, d) {
    return c / d * t + b
}

function tween(element, target, duration, callback) {
    let change = {};
    let begin = {};
    for (let key in target) {
        begin[key] = getCss(element, key);
        change[key] = removeUnit(target[key]) - begin[key];
    }

    let time = 0;
    let timing = setInterval(() => {
        time += 20;
    if (time >= duration) {
        clearInterval(timing);
        for (let key in target) {
            setCss(element, key, target[key]);
        }
        callback && callback.call(element);
        return;
    }
    for (let key in target) {
        let current = linear(time, begin[key], change[key], duration);
        setCss(element, key, current);
    }
}, 20)
}

function getCss(ele, attr) {
    let value = window.getComputedStyle(ele)[attr];
    return removeUnit(value);
}

function removeUnit(value) {
    let reg = /^[-+]?([1-9]d+|d)(.d+)?(px|pt|em|rem)$/;
    if (isNaN(value) && reg.test(value)) return parseFloat(value);
    if (isNaN(value)) return Number(value);
    return value
}

function setCss(ele, attr, val) {
    let reg = /^(width|height|top|bottom|left|right|(margin|padding)(Top|Left|Bottom|Right)?)$/;
    if (!isNaN(val) && reg.test(attr)) {
        ele.style[attr] = val + "px";
        return;
    }
    ele.style[attr] = val;
}

在这个封装的方法中，linear是表示匀速运动，如果你想支持其他动画公式，请自行修改。

使用封装的动画也很简单：

let box = document.getElementById("box");
tween(box, {left: 500}, 3000);

代码源码在GitHub中：传送门

最后

以上就是酷酷寒风为你收集整理的原生JS封装动画的全部内容，希望文章能够帮你解决原生JS封装动画所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。