移動端 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。