简单的放天灯动画

Posted 2020-08-08 Myisqq

公司中秋节要上线一个线上的活动：放天灯，简单的动画，所以花费不了很多时间

先上一下放天灯的动画代码，代码是根据一个下雪花代码改编的，直接操作dom当然效率不会很高，不过正好使用我们的业务

    var windowHeight = $(window).height();;
    var starAreaBottomHeight = parseInt(windowHeight / 2); //灯笼出现的基本位置
    var zindex = 0; //最高层数
    var docWidth = $(window).width(); //文档宽度

    $(function () {

        $(".starbg,.allbody").height($(window).height());
        var d = "<div class=\'star\'><div>";

        function Tideng() {
            var x = Math.random() * docWidth; //出现位置偏移量，随机
            var y = starAreaBottomHeight + (starAreaBottomHeight / 5) - Math.random() * starAreaBottomHeight; //出现位置y方向坐标

            var o = 1 - y / windowHeight; //透明度，随机(位置越靠下透明度越高)

            var fon = 80 - y / windowHeight * 100; //大小，随机(位置月靠下-y越大 越小)

            var l = x + 20 * Math.random(); //终止位置偏移量，
            var z = 1000 - (y / windowHeight * 100); //层
            var filter = (5 * (y / windowHeight) - 1) * (5 * (y / windowHeight) - 1);
            var k = 10000 + 5000 * Math.random(); //速度，随机
            var tw = 40 + Math.random() * 50;

            $(d).clone().appendTo(".starbg").css({

                left: x + "px",
                top: y + "px",
                "-webkit-filter": "blur(" + filter + "px)", //模糊效果

                // opacity: o,
                width: fon,
                height: fon,
                zindex: z

            }).animate({

                top: (-fon),
                left: l + "px",

                //opacity: 0.1,

            }, k, "linear", function () {
                $(this).remove()
            })
        }

        Tideng();
        setInterval(function () {
            Tideng();
        }, 2000);

    })
 

根据天灯出现位置计算天灯的大小和模糊度来实现一些立体效果，可惜公司美工给的背景图不是很好。

放一个我自己坐的demo效果

图中的效果与给出的代码有些区别，并且没有为天灯做模糊效果，仅供参考

 

在开发的过程中遇到了几个问题不太好解决，这里写出做为备注

问题1：

文本框在安卓手机上不能被键盘顶上去或者隐藏，经过调试观察室因为外层div（@A）的position设置的问题和高度的问题。

现象1：整个div  A 下半部分不见了（向上滑动页面时候可以看到）。 解决方案：因为A未设置高度，并且是overflow:hidden  ，所以键盘顶上去时候，A的下部分被隐藏掉了，设置A的绝对高度解决。

现象2：文本框被键盘遮挡到了，不会再获取焦点的时候被顶到键盘顶部。解决方案：设置A的Position为绝对定位absolute即可，其他几种定位方式未测试，但是不能是fixed ,正是因为这种定位方式，导致它无法被顶上去

 

问题2：

页面中有背景音乐，有多个页面，但是想在A页面跳转到B页面时候能够继续A页面的播放

解决方案

Audio有一个currentTime特性，可以获取或设置当前播放的位置。配合  Audio的oncanplay事件可以设置其播放起始位置

          var audio = $("audio")[0];
           

            //获取cookiet
            var tiv = $.cookie("tiv");

            if (tiv > 0) {
                try {
                    audio.oncanplay = function () {
                        audio.currentTime = tiv;
                    };
                }
                catch (err) {

                }
            }

在A页面记录当前播放位置，在B页面获取即可，我用cookie做存储。当然这种方法在长音频中是有重大bug的。

 

 

问题3：

jquery自带动画，是比较坑的本来要执行两个动画动作，但是对  animate 的了解不够，无法实现，于是自己写了一个按中心点缩放div的动画，然后移动div到顶部的实现

 trg.animate({ "width": w + "px", "top": top + "px", left: left + "px" }, 1000, function () {

            setTimeout(function () {

                var topH = trg.offset().top; //当前图片距离父元素顶部的高度
                var parentOffTop = trg.parent().offset().top; //父元素距离顶部的高度
                var trgH = trg.height();
                var tou = setInterval(function () {

                    topH -= 1; //调整右侧的值（增大）可以增加上升速度[强烈]
                    trg.get(0).style.top = topH + "px";
                    if (topH < -(trgH + parentOffTop)) {
                        clearInterval(tou);
                        //删除节点

                        var clrT = setInterval(function () { //200ms检测一次是否飞出视窗，飞出后则删除当前结点并显示按钮

                            if (trg.offset().top < -(trgH + parentOffTop)) {
                                $(\'.btns_wrap\').show();

                                $(".tc_wishes_write").remove();
                                clearInterval(clrT);
                            }
                        }, 200);
                    }

                },
                    15); //调整这里的值（减少），可以增加上升速度[弱]

            },
                400);

        });

 

 

由于是公司的项目，因此不能够上源码，但是放天灯部分，我自己做了demo是可以供下载查看的

 

=》这里不是图片丢失了，是因为他就不是一个正经图片，将图片右键另存为修改为rar后缀解压即可。懒得上传附件，就这样了