移动端 H5 场景应用【破茧成蝶】案例鉴赏

最新推荐文章于 2024-05-03 13:32:04 发布

weixin_34367845

最新推荐文章于 2024-05-03 13:32:04 发布

阅读量302

点赞数

文章标签：移动开发 python javascript ViewUI

原文链接：https://my.oschina.net/u/3989863/blog/2239849

版权

2019独角兽企业重金招聘Python工程师标准>>>

移动端【破茧成蝶】场景请用微信扫描二维码访问（温馨提示：H5案例有声音，请打开声音体验）：

案例代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta name="viewport" content="width=640, user-scalable=no,target-densityDpi=device-dpi">
<style>
*{ margin:0; padding:0;}
html{ overflow:hidden;}
li{ list-style:none;}
#main{ width:640px; height:auto; position:relative; overflow:hidden;}
#c1{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:10;}
#list{}
#list > li{ width:100%; height:100%; background-repeat:no-repeat; position:absolute; left:0; top:0; background-size:cover; z-index:5; display:none;}
#list > li.zIndex{ z-index:6;}
#list > li:nth-of-type(1){ background-image:url(img/b.png); display:block;}
#list > li:nth-of-type(2){ background-image:url(img/c.png);}
#list > li:nth-of-type(3){ background-image:url(img/d.png);}
#list > li:nth-of-type(4){ background-image:url(img/e.png);}
#list > li:nth-of-type(5){ background-image:url(img/ad1.png);}
#list > li:nth-of-type(6){ background-image:url(img/ad2.png);}
#list > li:nth-of-type(7){ background-image:url(img/ad3.png);}
#list > li:nth-of-type(8){ background-image:url(img/ad4.png);}
</style>
<script src="jquery-2.1.3.min.js"></script>
<script>
$(document).on('touchmove',function(ev){
    ev.preventDefault();
});
$(function(){
    var $main = $('#main');
    var $list = $('#list');
    var $li = $list.find('>li');
    var viewHeight = $(window).height();
    $main.css('height',viewHeight);
    slideCanvas();
    slideImg(); 
    function slideCanvas(){
        var $c = $('#c1');
        var gc = $c.get(0).getContext('2d');
        var img = new Image();
        var bBtn = true;
        $c.attr('height',viewHeight);
        img.src = 'img/a.png';      
        img.onload = function(){
            gc.drawImage(img,(640 - nowViewWidth())/2,0,nowViewWidth(),viewHeight);
            gc.strokeStyle = 'blue';
            gc.lineWidth = 60;
            gc.lineCap = 'round';
            gc.globalCompositeOperation = 'destination-out';
            $c.on('touchstart',function(ev){    
                var touch = ev.originalEvent.changedTouches[0];
                var x = touch.pageX - $(this).offset().left;
                var y = touch.pageY - $(this).offset().top;
                /*gc.arc(x,y,100,0,360*Math.PI/180);
                gc.fill();*/
                if(bBtn){
                    bBtn = false;
                    gc.moveTo(x,y);
                    gc.lineTo(x+1,y+1);
                }
                else{
                    gc.lineTo(x,y);
                }
                gc.stroke();
                $c.on('touchmove.move',function(ev){    
                    var touch = ev.originalEvent.changedTouches[0];
                    var x = touch.pageX - $(this).offset().left;
                    var y = touch.pageY - $(this).offset().top;
                    gc.lineTo(x,y);
                    gc.stroke();                    
                });
                $c.on('touchend.move',function(ev){
                    var imgData = gc.getImageData(0,0,640,viewHeight);
                    var allPx = imgData.width * imgData.height;
                    var num = 0;
                    for(var i=0;i<allPx;i++){
                        if( imgData.data[4*i+3] == 0 ){
                            num++;
                        }
                    }
                    if( num > allPx/2 ){
                        $c.animate({opacity:0},1000,function(){
                            $(this).remove();
                        });
                    }
                    $c.off('.move');
                });
            }); 
        };
    }   
    function slideImg(){
        var startY = 0;
        var step = 1/4;
        var nowIndex = 0;
        var nextorprevIndex = 0;
        var bBtn = true;
        $li.css('backgroundPosition', (640 - nowViewWidth())/2 +'px 0');
        $li.on('touchstart',function(ev){
            if(bBtn){
                bBtn = false;
                var touch = ev.originalEvent.changedTouches[0];
                startY = touch.pageY;
                nowIndex = $(this).index();
                $li.on('touchmove.move',function(ev){
                    var touch = ev.originalEvent.changedTouches[0];
                    $(this).siblings().hide();
                    if( touch.pageY < startY ){   //↑
                        nextorprevIndex = nowIndex == $li.length-1 ? 0 : nowIndex + 1;
                        $li.eq(nextorprevIndex).css('transform','translate(0,'+( viewHeight + touch.pageY - startY )+'px)');                    
                    }
                    else{   //↓
                        nextorprevIndex = nowIndex == 0 ? $li.length-1 : nowIndex - 1;
                        $li.eq(nextorprevIndex).css('transform','translate(0,'+( -viewHeight + touch.pageY - startY )+'px)');                   
                    }
                    $li.eq(nextorprevIndex).show().addClass('zIndex');
                    //Math.abs((touch.pageY - startY))/viewHeight -> 最大值 -viewHeight~viewHeight
                    $(this).css('transform','translate(0,'+ (touch.pageY - startY)*step +'px) scale('+(1 - Math.abs((touch.pageY - startY))*step/viewHeight )+')');

                });     
                $li.on('touchend.move',function(ev){
                    var touch = ev.originalEvent.changedTouches[0];
                    if( touch.pageY < startY ){   //↑
                        $li.eq(nowIndex).css('transform','translate(0,'+(-viewHeight * step)+'px) scale('+(1 - step)+')');
                    }
                    else{  //↓
                        $li.eq(nowIndex).css('transform','translate(0,'+(viewHeight * step)+'px) scale('+(1 - step)+')');
                    }
                    $li.eq(nowIndex).css('transition','.3s');
                    $li.eq(nextorprevIndex).css('transform','translate(0,0)');
                    $li.eq(nextorprevIndex).css('transition','.3s');
                    $li.off('.move');
                });
            }
        });
        $li.on('transitionEnd webkitTransitionEnd',function(){
            resetFn();
        });
        function resetFn(){
            $li.css('transform','');
            $li.css('transition','');
            $li.eq(nextorprevIndex).removeClass('zIndex').siblings().hide();
            bBtn = true;
        }
    }
    function nowViewWidth(){
        var w = 640 * viewHeight / 960;
        w = w > 640 ? w : 640;
        return w;
    }   
});
</script>
</head>
<body>
<div id="main">
    <canvas id="c1" width="640" height="960"></canvas>
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

一、什么是微信场景应用

三、场景运行环境
1) 微信内嵌的浏览器
2) Chrome自带移动端Emulation(模拟器)

四、场景一功能
1) 加载，刮开，划屏，动画，音乐等

五、jQuery
1) 版本2.1.3

六、手机分辨率
1) 屏幕
2) 设备

七、主流屏幕分辨率
1) 640 * 960
2) 640 * 1136

八、viewport
1) 默认视口
2) width=device-width , user-scalable=no
3) target-densityDpi=device-dpi
4) 固定值640即可

九、设置高度
1) 通过JS动态设置
2) background-size : cover

十、刮开效果
1) canvas
2) globalCompositeOperation
a. source-over
b. destination-over
c. destination-out

十一、移动端事件
1) touchstart
2) touchmove
3) touchend
4) 原生event
a. originalEvent
b. changedTouches
5) 阻止默认touchmove
a. preventDefault

十二、划屏切换
1) css3
2) 运动实现
3) transform
a. translate
b. scale
c. transition
d. transitionEnd事件

十三、提示箭头
1) css3
a. animation
b. 名字
c. 时间
d. 执行次数
e. infinite
2) @keyframes
a. 帧