zepto 移动端案例(动画等)

￡神魔★判官ぃ 2021-07-25 00:33 418阅读 0赞

处理:滑动页面事件、动画效果(缩放、各方位滑动、抖动、明暗)、

代码示例:  
**js文件:**

$(function(){ 
        //定义方向对象
        var direction={ up:1,right:2,down:3,left:4};
        //初始化两个页面坐标
        var now={ col:1,row:1};
        var last={ col:0,row:0};
    
        //上一个页面动画结束标志
        var isMoving=false;
    
        //定义滑动功能
        function movePage(dir)
        { 
            //初始化参与动画的页面,加'.'是因为可以之间获取dom对象
            var lastPage='.page-'+last.col+'-'+last.row;
            var nowPage='.page-'+now.col+'-'+now.row;
    
            //初始化动画类
            var inClass='';//进场动画类
            var outClass=''; //出场动画类
    
            //匹配方向
            switch(dir){ 
                case direction.up:
                    outClass='pg-moveToTop';
                    inClass='pg-moveFromBottom';
                    break;
                case direction.right:
                    outClass='pg-moveToRight';
                    inClass='pg-moveFromLeft';
                    break;
                case direction.down:
                    outClass='pg-moveToBottom';
                    inClass='pg-moveFromTop';
                    break;
                case direction.left:
                    outClass='pg-moveToLeft';
                    inClass='pg-moveFromRight';
                    break;
            }
            //之前页面退场
            $(lastPage).addClass(outClass);
            //当前页面进场
            $(nowPage).removeClass('hide');
            $(nowPage).addClass(inClass);
    
            isMoving=true;
    
    
            //动画执行完清除动画类,否则添加的重复类只执行一次
            //触发滑动事件后，等待600毫秒，即页面完全占据屏幕后，再执行动画
            //isMoving页面还未占据屏幕时，不能滑动
            //元素若设置了display:none;只有当元素显示的时候,动画才会执行，因此当600毫秒页面完全占据屏幕，才显示元素并加载动画
            setTimeout(function(){ 
                $(lastPage).removeClass(outClass);
                $(lastPage).addClass('hide');
                $(lastPage).removeClass('page-current');
                $(lastPage).find('img').addClass('hide');
    
                $(nowPage).removeClass(inClass);
                $(nowPage).addClass('page-current');
                $(nowPage).find('img').removeClass('hide');
    
                isMoving=false;
            },600);
    
        }
        //滑动事件(要先禁止滑动的默认行为)
        $('.page').swipeUp(function(){ 
            //判断页面是否滑动
            if(isMoving)
            { 
                return;
            }
    
                //出场页面
            console.log(1);
                last.col=now.col;
                last.row=now.row;
            //最后一页不能滑动
                if(last.col<5)
                { 
                    //进场页面
                    now.col=last.col+1;
                    now.row=last.row;
                    movePage(direction.up);
                }
    
    
        })
    
        $('.page').swipeDown(function(){ 
            if(isMoving)
            { 
                return;
            }
        console.log(2);
            last.col=now.col;
            last.row=now.row;
            if(last.col>1)
            { 
                now.col=last.col-1;
                now.row=last.row;
                movePage(direction.down);
            }
    
        })
    
        $('.page').swipeLeft(function(){ 
            if(isMoving)
            { 
                return;
            }
            console.log(3);
            last.col=now.col;
            last.row=now.row;
            console.log(last.col,last.row);
            //只有第一个页面和最后一个页面无额外页面,并且左右只有两个页面
            if(last.col<5&&last.col>1&&last.row==1)
            { 
    
                now.row=last.row+1;
                now.col=last.col;
                movePage(direction.left);
                console.log(now.col,now.row);
            }
        })
    
        $('.page').swipeRight(function(){ 
            if(isMoving)
            { 
                return;
            }
            console.log(4);
            last.col=now.col;
            last.row=now.row;
            //只有第一个页面和最后一个页面无额外页面,并且左右只有两个页面
            if(last.col<5&&last.col>1&&last.row==2)
            { 
    
                now.row=last.row-1;
                now.col=last.col;
                movePage(direction.right);
    
            }
        })
    
    
    })

--------------------

**动画css文件:**

/*定义四方向的动画*/
    /*向上滑动*/
    /*进场*/
    .pg-moveToTop{ 
        animation:moveToTop 0.6s ease both;
    }
    /*出场*/
    .pg-moveFromBottom{ 
        animation:moveFromBottom 0.6s ease both;
    }
    
    /*向下滑动*/
    .pg-moveToBottom{ 
        animation:moveToBottom 0.6s ease both;
    }
    .pg-moveFromTop{ 
        animation:moveFromTop 0.6s ease both;
    }
    
    /*向左滑动*/
    .pg-moveToLeft{ 
        animation:moveToLeft 0.6s ease both;
    }
    .pg-moveFromRight{ 
        animation:moveFromRight 0.6s ease both;
    }
    
    /*向右滑动*/
    .pg-moveToRight{ 
        animation:moveToRight 0.6s ease both;
    }
    .pg-moveFromLeft{ 
        animation:moveFromLeft 0.6s ease both;
    }
    /*向上*/
    @keyframes moveToTop{ 
        /*因为是出场,从元素最初设置的默认位置向上移动整个元素的高度*/
        from { }
        to { transform:translateY(-100%)}
    }
    @keyframes moveFromBottom{ 
        /*因为是进场,从离默认位置的下方距离一个元素的高度向上移动到默认位置*/
        from { transform:translateY(100%)}
        to { }
    }
    /*向下*/
    @keyframes moveToBottom{ 
    
        from { }
        to { transform:translateY(100%)}
    }
    @keyframes moveFromTop{ 
    
        from { transform:translateY(-100%)}
        to { }
    }
    
    /*向右*/
    @keyframes moveToRight{ 
    
        from { }
        to { transform:translateX(100%)}
    }
    @keyframes moveFromLeft{ 
    
        from { transform:translateX(-100%)}
        to { }
    }
    
    /*向左*/
    @keyframes moveToLeft{ 
    
        from { }
        to { transform:translateX(-100%)}
    }
    @keyframes moveFromRight{ 
    
        from { transform:translateX(100%)}
        to { }
    }
    
    /*箭头动画*/
    .pt-arrow{ 
        animation:moveUp 1.5s ease both infinite;
    }
    @keyframes moveUp { 
        0%{ 
            transform:translateY(100%);
            opacity:0;
        }
        50%{ 
            transform:translateY(0%);
            opacity:1;
        }
        100%{ 
            transform:translateY(-100%);
            opacity:0;
        }
    }
    
    /*定义原抖动动画*/
    .pg-moveCircle{ 
        animation:moveCircle 1.5s ease both;
    }
    @keyframes moveCircle { 
        0%{ transform: translateY(-80%);opacity: 0.1;}
        20%{ transform: translateY(-80%);opacity: 0.3;}
        35%{ transform: translateY(10%);opacity: 0.8;}
        60%{ transform: translateY(-5%);opacity: 0.8;}
        65%{ transform: translateY(-2%);opacity: 0.8;}
        70%{ transform: translateY(-1%);opacity: 0.9;}
        75%{ transform: translateY(-0.5%);opacity: 0.95;}
        80%{ transform: translateY(0%);opacity: 1;}
        100%{ transform: translateY(0%);opacity: 1;}
    }
    /*定义缩放的动画*/
    .pg-scaleUp{ 
        animation:scaleUp 0.6s ease both;
    }
    
    @keyframes scaleUp { 
        from{ transform: scale(0.4);}
        to{ }
    }
    
    /*定义翻转动画*/
    .pg-turn{ 
        animation:turn 0.6s ease both;
        transform-origin: 50% 50%;
    }
    
    @keyframes turn { 
        from { transform:rotateY(90deg)}
        to{ }
    }

--------------------

**布局css文件:**

#container{ 
        width:100%;
        height:100%;
    }
    
    .page{ 
        width:100%;
        height:100%;
        position: absolute;
    }
    /*定义页面背景色*/
    .page-1-1{ 
        background-color:#083846;
    }
    .page-2-1{ 
        background-color:#9261BF;
    }
    .page-2-2{ 
        background-color:#9261BF;
    }
    /*定义隐藏类*/
    .hide{ 
        display:none;
    }
    /*定义层级*/
    .page-current{ 
        z-index:2;
    }
    /*禁止滑动默认事件*/
    *{ 
        touch-action: none;
    }
    
    
    .page-1-1 .img_1{ 
        height:auto;;
        width:248px;
        position: absolute;
        top:1%;
        left:50%;
        margin-left:-124px;
    }
    .page-1-1 .img_2{ 
        height: auto;
        width: 185px;
        position: absolute;
        top:62%;
        left: 50%;
        margin-left: -92px;
    }
    .page-2-1 .img_1{ 
        height: auto;
        width: 158px;
        position: absolute;
        top: 2%;
        left: 50%;
        margin-left:-79px ;
        z-index:2;
    }
    
    .page-2-1 .img_2{ 
        height: auto;
        width: 240px;
        position: absolute;
        top: 28%;
        left: 50%;
        margin-left:-120px ;
    }
    
    .page-2-1 .img_3{ 
        height: auto;
        width: 241px;
        position: absolute;
        top: 36%;
        left: 50%;
        margin-left:-120px ;
    }
    
    .page-2-1 .img_4{ 
        height: auto;
        width: 20px;
        position: absolute;
        top: 87%;
        left: 50%;
        margin-left:-10px ;
    }
    
    .page-2-1 .img_5{ 
        height: auto;
        width: 142px;
        position: absolute;
        top: 82%;
        left: 50%;
        margin-left:-71px ;
    }
    
    .page-2-1 .img_7{ 
        height: auto;
        width: 248px;
        position: absolute;
        top: 8%;
        left: 50%;
        margin-left:-124px ;
    }
    
    
    .page-2-2 .img_1 { 
        height:auto;
        width:293px;
        position:absolute;
        left:50%;
        top:5%;
        margin-left:-146px;
    }
    .page-2-2 .img_2 { 
        height:auto;
        width:260px;
        position:absolute;
        left:50%;
        top:75%;
        margin-left:-130px;
    }
    .page-2-2 .img_3 { 
        height:auto;
        width:20px;
        position:absolute;
        left:50%;
        top:87%;
        margin-left:-10px;
    }
    .page-2-2 .img_6 { 
        height:auto;
        width:25px;
        position:absolute;
        left:50%;
        top:92%;
        margin-left:-12px;
    }
    
    /*当以公共的样式*/
    .common_img{ 
         height: auto;
         width: 25px;
         position: absolute;
         top: 92%;
         left: 50%;
         margin-left:-12px;
     }

--------------------

**主页面:**

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
      <title>do it</title>
      <link rel="stylesheet" href="css/reset.css">
      <link rel="stylesheet" href="css/index.css"/>
      <link rel="stylesheet" href="css/animate.css"/>
    
    </head>
    <body>
    <div id="container">
    
      <div class="page page-1-1 page-cuurent ">
        <img class="img_1 pg-moveFromTop" src="img/cover.png" alt=""/>
        <img class='img_2 pg-moveFromLeft' src="img/wording_cover.png" alt=""/>
        <img class="img_3 common_img pg-moveToTop pt-arrow"src="img/icon_up.png" alt=""/>
    
      </div>
    
      <div class="page page-2-1 hide">
        <img class="img_1 hide pg-moveFromBottom" src="img/wording.png" />
        <img class="img_2 hide pg-moveCircle" src="img/circle.png" />
        <img class="img_3 hide pg-moveFromLeft" src="img/people.png" />
        <img class="img_4 hide pg-scaleUp" src="img/dot1.png" />
        <img class="img_5 hide pg-scaleUp" src="img/check_develop.png" />
        <img class="img_6 hide common_img pt-arrow" src="img/icon_up.png" />
        <img class="img_7 hide pg-scaleUp" src="img/floating_develop.png" />
      </div>
    
      <div class="page page-2-2 hide">
        <img class="img_1 hide pg-turn" src="img/introduction.png" />
        <img class="img_2 hide pg-turn" src="img/btn_develop.png" />
        <img class="img_3 hide pg-turn" src="img/dot2.png" />
        <img class="img_6 hide common_img pt-arrow" src="img/icon_up.png" />
      </div>
    
    </div>
    
    
    
    <script type='text/javascript' src='js/zepto.js'></script>
    <script type='text/javascript' src='js/touch.js'></script>
    <script type='text/javascript' src='js/index.js'></script>
    </body>
    </html>