欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

红包出来-晃动-回去-停顿-循环效果

程序员文章站 2024-03-24 11:25:16
...
<style>
        *{
            padding: 0;
            margin: 0;
        }
        body {
            width: 100%;
            height: 500px;
            background: #ccc;
        }
        span {
            display: block;
            position: fixed;
            width: 100px;
            height: 150px;
            background: red;
            right: -50px;
            bottom: 200px;
            font-size: 24px;
            line-height: 150px;
            text-align: center;
            transform:rotate(0);
        }
</style>

<span>红包</span>

<script src="jquery-1.11.1.js"></script>
<script>
    /*
        a : 初始角度
        b : 到达晃动时,a为右晃动,b的初始为a的有晃动峰值
        c : c为b的左晃动的峰值
        d : 为更替循环到a时的变量
      sun :晃动的次数
     lDis : 距离右侧的初始距离
     rDis :与lDis的最大移动到的距离相同
     cont : 测试用,用来实验循环动画一次,所需要的时间,并非与外侧定时器时间,从而达到执行一周后出现停顿效果
    timer :给予里的定时器的变量
     */

    var a=-30;
    var b=15;
    var c=-15;
    var d=0;
    var sun=0;
    var lDis=-50;
    var rDis=100;
    var cont=0
    var timer=null

setInterval(function () {
    timer=setInterval(function () {
        // cont++;
        // 一开始是-30deg,然后慢慢的变正
        if(a<0){
            $('span').css('transform','rotate('+a+'deg)');
            a++;
        }
        // 正了之后,给予lDis最大的移动距离,开始移动
        if(a==0&&lDis<100){
            $('span').css('right',lDis+'px');
            lDis+=2;
            if(lDis==100){
                rDis=100;
            }
        }
        // 移动到规定距离后,开始右晃到指定角度
        if(lDis==100&&a>=0&&a<15){
            a++;
            if(a==15){
                b=15;
            }
            $('span').css('transform','rotate('+a+'deg)');
        }
        // 右晃到指定角度后,开始左晃到指定角度
        if(lDis==100&&a==15&&b>-15){
            b--
            if(b==-15){
                c=-15
            }
            $('span').css('transform','rotate('+b+'deg)');
        }
        // 然后左晃到指定角度后,让他回正
        if(lDis==100&&b==-15&&c<0){
            c++
            if(c==0) {
                a = 0;
                sun++
                // 晃动循环3次
                if(sun>3){
                    sun=3;
                }
            }
            $('span').css('transform','rotate('+c+'deg)');
        }
        // 循环3次后,初始下各个值,然后向回移动
        if(sun==3&&rDis>-50){
            a=0;
            rDis-=2;
            b=15;
            c=-15;
            d=0;
            $('span').css('right',rDis+'px');
        }
        // 移动到一开始的位置后,使用d来执行到a原来的-30角度(如果这里直接用a会出现闪动)
        if(rDis==-50&&d>-30){
            d--;
            $('span').css('transform','rotate('+d+'deg)');
        // 把a、sun、和lDis变为初始值
            if(d==-30){
                lDis=-50;
                sun=0;
                a=-30
                // 停止计时器,即为执行了整整一次完整的动画循环
                clearInterval(timer)
                // console.log(cont);
            }
        }
    },10)
    // 根据cont的值,为外侧定时器给予秒数,从而达到停顿效果
},5000)
</script>