【JavaScript框架封装】实现一个类似于JQuery的动画框架的封装

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123854 ...
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123854
// 动画框架
(function (xframe) {
    // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
    xframe.extend({});

    // 不需要参与链式访问的
    xframe.extend(xframe, {});


    // 实现动画框架的封装
    xframe.Animate = (function (xframe) {

        // 1. 定义需要的API接口(API内部用于放置属性)
        var api = {
            timer: null,// 这是一个动画循环句柄
            queen: []  // 多个对象同时运行的一个数组队列
        };


        // 运行部门-------------------------------------------------
        /**
         * 在把需要的运行参数都准备好了之后(多个对象),就开始执行这个运行函数
         */
        api.run = function () {
            // 定义一个定时器,用于不断地执行我自己定义的动画函数信息
            api.timer = setInterval(function () {
                // 由于所有的参数都已经准备好了,因此这里只需要直接进行循环操作即可
                api.loop();
            }, 16);     // 这里循环的周期设置的是16mm
        }
        /**
         * 执行动画循环操作
         */
        api.loop = function () {
            // obj里面存储了obj = {id, now, pass, tween, duration, style}
            api.queen.forEach(function (obj) {
                // 遍历队列中的每一项参数,开始执行移动操作
                api.move(obj);
            });
        }
        /**
         * 实现物体的移动
         */
        api.move = function (obj) {
            // 1. 计算当前的时间
            obj.pass = +new Date();
            // 2. 获取动画时间进程(这里的动画样式默认是一个弹簧的显示样式)
            var tween = api.getTween(obj.now, obj.pass, obj.duration, 'easeOutBounce');
            // 注意我们再每一次移动这个物体对象之前需要把这个物体对象的动画时间进程更新一下,这样到了后面的修改对象的属性的时候这个参数的数值才会动态改变
            obj.tween = tween;

            //console.log(tween);

            // 3. 设置属性信息
            if (tween >= 1) {
                // 如果动画时间进程结束了(百分比信息)
                api.stop();
            } else {
                // 4. 通过设置对象的属性信息来移动每一个对象
                api.setManyProperty(obj);
            }
        }

        // 添加部门-------------------------------------------------
        /**
         * @param 获取用户输入的参数,开始对参数进行解析,开始添加参数,然后实现动画的开始运行
         */
        api.add = function () {
            var args = arguments,
                id = args[0],
                json = args[1],
                duration = args[2];

            // 获取输入的参数,然后开始使用适配器解析数据
            try {
                // 1. 调用适配器准备参数
                api.adapterMany(id, json, duration);

                // 2. 开始运行动画
                api.run();
            } catch (e) {
                console.error(e.message);
            }
        }
        /**
         * 这是一个适配器,用于解析一个对象的参数信息(只能处理一个对象)
         * @param id
         * @param json
         * @param duration
         */
        api.adapterOne = function (id, json, duration) {
            var obj = {}                    // 这里的OBj就是一个字面量格式, 用于存储需要的参数信息
            obj.id = id                     // ID编号
            obj.now = +new Date()           // 开始时间
            obj.pass = 0                    // 当前时间
            obj.tween = 0                   // 动画时间进程
            obj.duration = duration         // 动画的持续时间
            obj.styles = []                 // 用于存放所有的样式信息

            // 根据用户输入的参数信息选择不同的动画速度
            if ($.isString(duration)) {
                switch (duration) {
                    case 'slow':
                    case '慢':
                        duration = 8000;
                        break;
                    case 'normal':
                    case '普通':
                        duration = 4000;
                        break;
                    case 'fast':
                    case '快':
                        duration = 1000;
                        break;
                }
            }

            // 设置样式信息
            obj.styles = api.getStyles(id, json);
            return obj;
        }
        /**
         * 这个适配器针对的是处理多个对象的动画信息
         * @param id
         * @param json
         * @param data
         */
        api.adapterMany = function (id, json, data) {
            // 处理多个对象的参数信息(同样的参数,但是需要处理不同的信息,针对的是多个对象的参数)
            var obj = this.adapterOne(id, json, data);
            // 开始向我已有的队列中添加数据信息(此时queen队列里面就是存放了我所有的数据信息)
            api.queen.push(obj);
        }
        /**
         * 获取样式信息
         * @param id
         * @param json
         */
        api.getStyles = function (id, json) {
            // animate('#sun', {left: 200, top : 500}, 7000);
            // 把用户传递过来的参数信息转换我需要的格式
            var styles = [];
            // 开始解析json数据信息
            for (var item in json) {
                var style = {};
                // 这里的item就是下面的:left, top
                style.name = item;
                // 获取物体开始的位置
                style.start = parseFloat($(id).css(item).toString());
                // 计算物体的偏移量(移动的距离)
                style.length = parseFloat(json[item]) - style.start;

                styles.push(style);
            }
            return styles;
        }
        /**
         * 用于获取一个动画时间进程
         * @param now 开始时间
         * @param pass 当前时间
         * @param all 持续时间
         * @param ease 动画效果
         */
        api.getTween = function (now, pass, all, ease) {
            // 1.定义常见的动画效果
            var eases = {
                //线性匀速
                linear: function (t, b, c, d) {
                    return (c - b) * (t / d);
                },
                //弹性运动
                easeOutBounce: function (t, b, c, d) {
                    if ((t /= d) < (1 / 2.75)) {
                        return c * (7.5625 * t * t) + b;
                    } else if (t < (2 / 2.75)) {
                        return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
                    } else if (t < (2.5 / 2.75)) {
                        return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
                    } else {
                        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
                    }
                },
                //其他
                swing: function (t, b, c, d) {
                    return this.easeOutQuad(t, b, c, d);
                },
                easeInQuad: function (t, b, c, d) {
                    return c * (t /= d) * t + b;
                },
                easeOutQuad: function (t, b, c, d) {
                    return -c * (t /= d) * (t - 2) + b;
                },
                easeInOutQuad: function (t, b, c, d) {
                    if ((t /= d / 2) < 1) return c / 2 * t * t + b;
                    return -c / 2 * ((--t) * (t - 2) - 1) + b;
                },
                easeInCubic: function (t, b, c, d) {
                    return c * (t /= d) * t * t + b;
                },
                easeOutCubic: function (t, b, c, d) {
                    return c * ((t = t / d - 1) * t * t + 1) + b;
                },
                easeInOutCubic: function (t, b, c, d) {
                    if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
                    return c / 2 * ((t -= 2) * t * t + 2) + b;
                },
                easeInQuart: function (t, b, c, d) {
                    return c * (t /= d) * t * t * t + b;
                },
                easeOutQuart: function (t, b, c, d) {
                    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
                },
                easeInOutQuart: function (t, b, c, d) {
                    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
                    return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
                },
                easeInQuint: function (t, b, c, d) {
                    return c * (t /= d) * t * t * t * t + b;
                },
                easeOutQuint: function (t, b, c, d) {
                    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
                },
                easeInOutQuint: function (t, b, c, d) {
                    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
                    return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
                },
                easeInSine: function (t, b, c, d) {
                    return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
                },
                easeOutSine: function (t, b, c, d) {
                    return c * Math.sin(t / d * (Math.PI / 2)) + b;
                },
                easeInOutSine: function (t, b, c, d) {
                    return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
                },
                easeInExpo: function (t, b, c, d) {
                    return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
                },
                easeOutExpo: function (t, b, c, d) {
                    return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
                },
                easeInOutExpo: function (t, b, c, d) {
                    if (t == 0) return b;
                    if (t == d) return b + c;
                    if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
                    return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
                },
                easeInCirc: function (t, b, c, d) {
                    return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
                },
                easeOutCirc: function (t, b, c, d) {
                    return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
                },
                easeInOutCirc: function (t, b, c, d) {
                    if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
                    return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
                },
                easeInElastic: function (t, b, c, d) {
                    var s = 1.70158;
                    var p = 0;
                    var a = c;
                    if (t == 0) return b;
                    if ((t /= d) == 1) return b + c;
                    if (!p) p = d * .3;
                    if (a < Math.abs(c)) {
                        a = c;
                        var s = p / 4;
                    }
                    else var s = p / (2 * Math.PI) * Math.asin(c / a);
                    return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
                },
                easeOutElastic: function (t, b, c, d) {
                    var s = 1.70158;
                    var p = 0;
                    var a = c;
                    if (t == 0) return b;
                    if ((t /= d) == 1) return b + c;
                    if (!p) p = d * .3;
                    if (a < Math.abs(c)) {
                        a = c;
                        var s = p / 4;
                    }
                    else var s = p / (2 * Math.PI) * Math.asin(c / a);
                    return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
                },
                easeInOutElastic: function (t, b, c, d) {
                    var s = 1.70158;
                    var p = 0;
                    var a = c;
                    if (t == 0) return b;
                    if ((t /= d / 2) == 2) return b + c;
                    if (!p) p = d * (.3 * 1.5);
                    if (a < Math.abs(c)) {
                        a = c;
                        var s = p / 4;
                    }
                    else var s = p / (2 * Math.PI) * Math.asin(c / a);
                    if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
                    return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
                },
                easeInBack: function (t, b, c, d, s) {
                    if (s == undefined) s = 1.70158;
                    return c * (t /= d) * t * ((s + 1) * t - s) + b;
                },
                easeOutBack: function (t, b, c, d, s) {
                    if (s == undefined) s = 1.70158;
                    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
                },
                easeInOutBack: function (t, b, c, d, s) {
                    if (s == undefined) s = 1.70158;
                    if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
                    return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
                },
                easeInBounce: function (t, b, c, d) {
                    return c - this.easeOutBounce(d - t, 0, c, d) + b;
                },
                easeInOutBounce: function (t, b, c, d) {
                    if (t < d / 2) return this.easeInBounce(t * 2, 0, c, d) * .5 + b;
                    return this.easeOutBounce(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
                }
            };
            // 2. 计算每一次动画循环的小号时长
            var yongshi = pass - now;

            // 3. 获取相应的动画效果
            return eases[ease](yongshi, 0, 1, all);
        }

        /**
         * 通过设置一个对象的属性信息来实现物体的运动效果(如果只有一个属性信息的话)
         * @param obj
         */
        api.setOneProperty = function (obj) {
            // 用于设置一个对象的属性信息(obj.id, obj.json)
            // 【注意点】:这里是动画实现的一个核心要点,通过修改对象的属性信息来移动物体
            if (obj.name === 'opacity') {
                $(obj.id).css(obj.name, (obj.start + obj.length * obj.tween));
            } else {
                // 对于设置对象的其他属性信息都是需要添加一个px,像素值信息
                $(obj.id).css(obj.name, (obj.start + obj.length * obj.tween) + 'px');
            }
        }
        /**
         * 用于设置一个对象的锁哥属性信息 obj.json = {width : '200px', height : '500px', 'opacity' : '0.1'}
         */
        api.setManyProperty = function (obj) {
            // 由于obj.styles里面是一个数组
            obj.styles.forEach(function (style) {
                // 遍历当前对象的所有样式属性信息
                obj.name = style.name;
                obj.start = style.start;
                obj.length = style.length;
                api.setOneProperty(obj);
                console.log(obj.tween);
            });

            // 由于styles里面只存储了style.name, style.start, style.length三个属性信息, 因此需要处理一下

        }
        /**
         * 结束动画的执行
         */
        api.stop = function () {
            clearInterval(api.timer);
        }

        // 后勤部门----------------------------------------------------
        api.destory = function () {

        }


        // 用户只需要把需要的参数添加进来们就可以执行一个动画
        // 用户只需要传进来三个参数,id, json, duration就可以实现一个动画
        xframe.animate = api.add;

    })(xframe);
})(xframe);

 

相关文章
|
1天前
|
JavaScript 前端开发
JavaScript实现缓慢动画的封装
JavaScript实现缓慢动画的封装
|
2天前
|
JavaScript Java 测试技术
基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
7 1
|
2天前
|
Web App开发 JavaScript 前端开发
构建高效Web API:使用Node.js与Express框架
构建高效Web API:使用Node.js与Express框架
7 0
|
7天前
|
JavaScript 前端开发
JavaScript-jQuery的使用 + JS的案例
JavaScript-jQuery的使用 + JS的案例
14 0
|
8天前
|
移动开发 JavaScript 前端开发
【热门话题】Vue.js:现代前端开发的轻量级框架之旅
Vue.js,由尤雨溪于2014年创建,是一个轻量级的前端框架,因其简洁API、高效渲染和组件系统深受全球开发者喜爱。本文探讨Vue的核心理念、技术架构、开发实践及在现代Web开发中的应用。Vue遵循渐进式框架思想,提供声明式编程、组件化和响应式数据绑定。技术上,它采用双向数据绑定、虚拟DOM和生命周期钩子。开发实践中,Vue CLI和Vuex、Vue Router分别加速开发和管理状态、路由。Vue不仅适用于单页应用,还支持多页应用、移动开发和跨平台项目,拥有丰富的社区生态和插件。随着Vue 3的推出,Vue将持续创新并影响前端开发领域。
31 0
|
13天前
|
XML 前端开发 JavaScript
jQuery与javascript的区别+案例 锋芒毕露
jQuery与javascript的区别+案例 锋芒毕露
|
13天前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
15天前
|
资源调度
在 Next.js 中使用自定义服务器框架进行服务器端渲染
在 Next.js 中使用自定义服务器框架进行服务器端渲染
Next.js 的服务器端渲染框架集成
Next.js 的服务器端渲染框架集成
|
15天前
|
前端开发 网络架构 UED
React Next.js框架
React Next.js 是一个基于 React 的服务器渲染框架,用于构建高性能的现代Web应用。它提供内置的服务器渲染、静态导出、动态路由功能,并自动进行代码拆分。Next.js 还支持热模块替换、CSS-in-JS 和客户端路由,拥有丰富的插件生态系统,简化了开发过程,提升了应用的性能和用户体验。