自制JQ动画插件

青叶个人博客的第一个JQ插件,在此奉上,希望大家能够用得上,经过一些测试,在使用上是没有什么太大问题的,但毕竟是个人的初次JQ插件编写,一些技术上的细节可能并不成熟,也许也有一些未知的bug,如果大家在使用插件的过程中发现了可优化的地方,请一定在博客中留言告知,多谢!好了,废话不多说了,插件奉上。

插件名:myAnimate

插件功能:指定需要运用动画的DOM元素,当该元素(或一些元素)到达浏览器的可视区域时,执行你自己定义好的动画。(css动画博大精深,故此插件中并没有写具体的动画效果,也不可能写完,所有的动画效果都需要自行编写,这也使得插件的可扩展性更强)

插件使用:

$(“yourAnimateElement”).myAnimate({

    animateClass: “demo”

})

提供接口:

animateClass:”demo”,   //自己编写动画的名称

opacty: 0,                //初始透明  选填  默认为0

animateRestrict: 0,       //动画限制  选填  默认为1200px屏幕以下不执行动画

ieAnimate: true           //IE动画   选填   默认为false关闭IE动画

温馨提示:由于具体的动画效果需要自行定义,故在编写css动画的时候,请一定要注意css动画兼容性。

具体代码以及demo:

/**通用动画jQuery插件    jQuery-animate.js   功能:元素进入可视窗口,执行动画class,动画class效果自行编写
 made by
青叶 in 2018.10.29
 
插件使用:$('yourAnimateElement').myAnimate({ animateClass: 'demo'});
 
代码分析: 1.ifIE() 根据调用者的要求决定是否开启IE浏览器的动画效果
          2.ifWinWidth()
分析用户浏览设备的屏幕宽度,根据插件调用者自定义的设备宽度,判断在什么设备上执行动画
          3.bindEvent
() window绑定scroll事件,出于性能方面的考虑,采用闭包节流的方式控制
          4.mainAnimation()
主要的动画代码
          5.destructor() 
动画执行完毕,销毁绑定的scroll事件,优化性能
 */
(function ($) {
    function MyAnimate(el, opts) {
        this.init(el, opts);
    }
    MyAnimate.OPTS = {
        animateClass: 'demo',                //动画class  必填 否则没有动画效果
        opacity: 1,                          //初始透明    选填 默认为1
        animateRestrict: 1200,               //动画限制    选填 默认为1200px,即以设备宽1200px及以上可以显示动画
        ieAnimate: false                     //IE动画     选填 默认为false,即默认关闭IE动画,为true则开启IE动画,注意css3的兼容性
    };
    MyAnimate.prototype.init = function (el, opts) {
        this.$el = $(el);
        this.opts = $.extend({}, MyAnimate.OPTS, opts);
        this.$win = $(window);

        this.ifIE();
    };
    MyAnimate.prototype.ifIE = function () {
        if (this.opts.ieAnimate===false) return false;
        else this.ifWinWidth();
    };
    MyAnimate.prototype.ifWinWidth = function () {
        if (this.$win.width() >= this.opts.animateRestrict) {
            this.bindEvent();
            this.mainAnimation();
        }
    };
    MyAnimate.prototype.bindEvent = function () {
        var _this = this,
            timer = null;
        this.fn = function () {
            if (timer) return;
            timer = setTimeout(function () {
                _this.mainAnimation();
                timer = null;
            }, 150)
        };
        this.$win.on('scroll', this.fn)    //window绑定事件scroll
    };
    MyAnimate.prototype.mainAnimation = function () {
        var self = this,
            $el = this.$el;
        $el.css({opacity: self.opts.opacity});  //设定初始状态的透明度

        $el.each(function () {    //遍历所有未完成动画的元素
            if (!this.loaded) {
                if (inVisibleArea(this)) {
                    appear(this)
                }
            }
        });
        function inVisibleArea(elem) {    //检测动画元素是否进入可视窗口
            var $win = self.$win;
            //滚动高度         +  可视区域高度    >= 元素到文档顶部的高度     结果为true 元素已经进入了可视区域,或者曾经进入过可视区域
            return $win.scrollTop() + $win.height() >= $(elem).offset().top;
        }
        if (isAllLoaded()) {    //全部动画完成,销毁绑定的scroll事件,优化性能
            self.destructor();
        }
        function isAllLoaded() {    //检测是否所有元素完成动画
            return $el.length === 0
        }
        function appear(elem) {    //可视窗口,执行动画,剔除已经完成动画的元素,避免重复遍历循环,优化性能
            // $(elem).css("animation", self.opts.animateName + " " + self.opts.duration + " " + self.opts.timingFunction + " " + self.opts.delay + " " + self.opts.iterationCount + " " + self.opts.direction + " " + self.opts.fillMode);
            $(elem).addClass(self.opts.animateClass);
            elem.loaded = true;

            var tmp = $.grep($el, function (elem) {    //剔除已经完成动画的元素,避免重复遍历循环,优化性能
                return !elem.loaded;
            });
            $el = $(tmp)
        }
    };
    MyAnimate.prototype.destructor = function () {  //当所有动画完成  销毁绑定的事件  优化性能
        this.$win.off('scroll', this.fn)
    };
    //业务代码完成
    $.fn.extend({
        myAnimate: function (opts) {      //myAnimate  外部调用插件名
            new MyAnimate(this, opts);
            return this;
        }
    })
})(jQuery);

演示demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-animate-test1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="jQuery-animate.js"></script>
    <style>
        strong,h2{
            display: block!important;
            margin: 2% 0;
            font-size: 24px;
        }
        .test1{
            height: 500px;
            border: 1px solid red;
        }
        /* 实际生产中注意@keyframes的兼容性 */

        @keyframes animation_strong{
            from{opacity:0;transform: translateY(100%)}
            to{opacity:1;transform: translateY(0)}
        }
        .demoH2{
            -webkit-animation: animation_strong 1s 0s linear 1 normal forwards;
            -moz-animation: animation_strong 1s 0s linear 1 normal forwards;
            -o-animation: animation_strong 1s 0s linear 1 normal forwards;
            animation: animation_strong 1s 0s linear 1 normal forwards;
        }
        @keyframes animation_p{
            from{opacity:0;transform: translateY(100%)}
            to{opacity:1;transform: translateY(0)}
        }
        .demoP{
            -webkit-animation: animation_p 1s 0s linear 1 normal forwards;
            -moz-animation: animation_p 1s 0s linear 1 normal forwards;
            -o-animation: animation_p 1s 0s linear 1 normal forwards;
            animation: animation_p 1s 0s linear 1 normal forwards;
        }
    </style>
</head>
<body>
<div class="test1">
    <h2>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</h2>
    <p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<div class="test1">
    <h2>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</h2>
    <p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<div class="test1">
    <h2>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</h2>
    <p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<div class="test1">
    <strong>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</strong>
    <p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<div class="test1">
    <strong>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</strong>
    <p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<div class="test1">
    <strong>AC1200 Wi-Fi and AV1200 Gigabit Powerline Kit</strong>
    <p>Equipped with Mains Filter and Built-in QoS, NWP507G2 assures a high quality of bandwidth sensitive applications such as voice and video, with no interfering power supply on other devices to bother.</p>
</div>
<script>
    $('.test1>h2').add('.test1>strong').myAnimate({
        animateClass: 'demoH2',
        opacity: 0,                          //初始透明    选填 默认为0
        animateRestrict: 0,                  //动画限制    选填 默认为1200px,即以设备宽1200px及以上可以显示动画
        ieAnimate: true                      //IE动画     选填 默认为false,即默认关闭IE动画,为true则开启IE动画,注意css3的兼容性
    });
    $('.test1>p').myAnimate({
        animateClass: 'demoP',
        opacity: 0,                          //初始透明    选填 默认为0
        animateRestrict: 0,                  //动画限制    选填 默认为1200px,即以设备宽1200px及以上可以显示动画
        ieAnimate: true                      //IE动画     选填 默认为false,即默认关闭IE动画,为true则开启IE动画,注意css3的兼容性
    })
</script>
</body>
</html>

好了,JQ插件到这里就介绍完毕,如果大家在使用过程中发现有什么问题,请在此留言告知,将尽快修改。谢谢!更多插件尽在青叶博客!

标签: