JavaScript动画函数animate封装

最新推荐文章于 2023-11-05 18:22:34 发布

҉ 加载中

最新推荐文章于 2023-11-05 18:22:34 发布

阅读量132

点赞数 5

分类专栏： JavaScript 文章标签：前端动画 javascript css3

本文链接：https://blog.csdn.net/qq_51500147/article/details/133781183

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文比较了JavaScript和CSS3在动画制作中的优缺点，强调了JavaScript动画的灵活性和处理复杂效果的能力，同时提到了CSS3的简洁性和浏览器兼容性。作者分享了JavaScript动画函数的封装示例和注意事项。

摘要由CSDN通过智能技术生成

写作原因

JavaScript的动画学习

JavaScript动画

缺点：

因为JavaScript在运行的过程中可能还需要执行其他的脚本语言,所以可能会造成丢帧的情况
在代码书写方面略难于CSS3动画

优点：

JavaScript动画灵活性强,可以控制动画的开始,停止,返回,取消
在动画效果的实现上面也是比CSS3动画强的,比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成
CSS3需要考虑浏览器的兼容问题,但是JavaScript在大部分时候都不会有兼容问题出现

CSS动画

缺点：

控制能力比较差,不能绑定事件执行回调函数,无法在指定的时间点进行指定的事件
代码冗长,往往需要较长的代码来实现一段动画

优点：

代码相对简单,性能调优方向固定
CSS3可以做到自适应低版本浏览器，而JS则需要撰写额外代码

JavaScript动画函数封装

ele 需要添加动画的元素

options 对象{‘属性’:‘结束时的属性值’}
例如:我需要让ball这个元素向左移动到想对父元素1000px的位置,并且同时在移动的过程中逐渐透明,那么我就可以这么写{left:1000px,opacity:0}

callback 回调函数可以实现链式动画
只有在前一个动画结束后才会执行下一个动画

function animate(ele, options, callback) {
    var pos = {};
    var end = {};
    var speed = {};
    for (var key in options) {
        if (key == 'opacity') {
            pos[key] = parseFloat(getStyle(ele, key)) * 1000;
            end[key] = options[key] * 1000;
        } else {
            pos[key] = parseFloat(getStyle(ele, key));
            end[key] = options[key];
        }
        speed[key] = end[key] - pos[key] > 0 ? 10 : -10;
    }

    clearInterval(ele.timeId)
    ele.timeId = setInterval(function () {
        var flag = true;
        for (var csskey in options) {
            pos[csskey] += speed[csskey];

            if (csskey == 'opacity') {
                ele.style[csskey] = pos[csskey] / 1000;
            } else {
                ele.style[csskey] = pos[csskey] + 'px';
            }

            if (Math.abs(pos[csskey] - end[csskey]) <= Math.abs(speed[csskey])) {
                pos[csskey] = end[csskey];
                ele.style[csskey] = end[csskey] + 'px';
            } else {
                flag = false;
            }
        }
        if (flag) {
            clearInterval(ele.timeId);
            if (callback) {
                callback()
            }
        }
    }, 4)
}

//获取非行内样式的css属性
function getStyle(ele, csskey) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(ele)[csskey];
    } else {
        return ele.currentStyle[csskey];
    }
}