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

移动端【破茧成蝶】场景请用微信扫描二维码访问（温馨提示：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>

一、什么是微信场景应用

二、场景运行环境

微信内嵌的浏览器
Chrome自带移动端Emulation(模拟器)

三、场景一功能

加载，刮开，划屏，动画，音乐等

四、jQuery

版本2.1.3

五、手机分辨率

屏幕
设备

六、主流屏幕分辨率

640 * 960
640 * 1136

七、viewport

默认视口
width=device-width , user-scalable=no
target-densityDpi=device-dpi
固定值640即可

八、设置高度

通过JS动态设置
background-size : cover

九、刮开效果

canvas
globalCompositeOperation
a. source-over
b. destination-over
c. destination-out

十、移动端事件

touchstart
touchmove
touchend
原生event
a. originalEvent
b. changedTouches
阻止默认touchmove
a. preventDefault

十一、划屏切换

css3
运动实现
transform
a. translate
b. scale
c. transition
d. transitionEnd事件

十二、提示箭头

css3
a. animation
b. 名字
c. 时间
d. 执行次数
e. infinite
@keyframes
a. 帧

十三、入场动画

文字样式
css3+js
a. transform
b. transition
图标
a. 可以用图片
b. 也可以用字体库，Font Awesome

十四、音乐

audio
a. play()
b. pause()

十五、加载

css3
控制scale
animation-delay
js
new Image

十六、查看场景二效果

声音，音乐，加载，3D魔方，3D划屏，粒子操作

十七、适配

第二种模式方案

十八、音乐

audio
play()
pause()

十九、3D魔方

perspective
preserve-3d
transform-origin

二十、3D划屏

translateZ

二十一、粒子操作

canvas像素级操作
canvas运动模式

二十二、加载

linear-gradient

妙味课堂–案例详情

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

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

猜你喜欢