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

时间 2019-12-13

原文原文链接

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

案例代码：html

<!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、什么是微信场景应用jquery

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

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

5、jQuery
1) 版本2.1.3canvas

6、手机分辨率
1) 屏幕
2) 设备浏览器

7、主流屏幕分辨率
1) 640 * 960
2) 640 * 1136微信

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

9、设置高度
1) 经过JS动态设置
2) background-size : cover字体

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

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

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

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

十4、入场动画
1) 文字样式
2) css3+js
a. transform
b. transition
3) 图标
a. 能够用图片
b. 也能够用字体库，Font Awesome

十5、音乐
1) audio
a. play()
b. pause()
十6、加载
1) css3
2) 控制scale
3) animation-delay
4) js
5) new Image

十7、查看场景二效果
1) 声音，音乐，加载，3D魔方，3D划屏，粒子操做

十8、适配
1) 第二种模式方案

十9、音乐
1) audio
2) play()
3) pause()

二10、3D魔方
1) perspective
2) preserve-3d
3) transform-origin

二11、3D划屏
1) translateZ

二12、粒子操做
1) canvas像素级操做
2) canvas运动模式

二十3、加载 1) linear-gradient