2. 程式人生 > >移動端 H5 場景應用【破繭成蝶】案例鑑賞

移動端 H5 場景應用【破繭成蝶】案例鑑賞

阿新 • • 發佈：2018-11-16

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

一、什麼是微信場景應用

二、場景執行環境

  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. 幀

十三 、入場動畫

  1. 文字樣式
  2. css3+js
    a. transform
    b. transition
  3. 圖示
    a. 可以用圖片
    b. 也可以用字型庫，Font Awesome

十四、音樂

  1. audio
    a. play()
    b. pause()

十五、載入

  1. css3
  2. 控制scale
  3. animation-delay
  4. js
  5. new Image

十六、檢視場景二效果

  1. 聲音，音樂，載入，3D魔方，3D劃屏，粒子操作

十七、適配

  1. 第二種模式方案

十八、音樂

  1. audio
  2. play()
  3. pause()

十九、3D魔方

  1. perspective
  2. preserve-3d
  3. transform-origin

二十、3D劃屏

  1. translateZ

二十一、粒子操作

  1. canvas畫素級操作
  2. canvas運動模式

二十二、載入

  1. linear-gradient

妙味課堂–案例詳情

相關推薦

移動端 H5 場景應用【破繭成蝶】案例鑑賞

移動端 H5 場景應用【破繭成蝶】案例鑑賞 移動端【破繭成蝶】場景請用微信掃描二維碼訪問（溫馨提示：H5案例有聲音，請開啟聲音體驗）： 案例： <!DOCTYPE HTML> <html> <head> <meta http-equiv

破繭成蝶2——以產品為中心的設計革命

內容簡介 本書作者結合數年來從事網際網路產品架構和設計工作的實踐經驗，加以融會貫通，概括並闡釋了“以產品為中心”的網際網路產品設計內在規律，以幫助產品設計師快速成長進階。 全書分為3篇，共10章。第一篇包括前3章，審時度勢地分析了網際網路市場的環境變遷，幫助產品設計師找準自身定位，並確定產品設計

IPFS承載著區塊鏈破繭成蝶的希望

六問合東居士 揭祕謙謙君子對IPFS的獨特觀點 人物名片 李彥東 ■ 合東居士 ■ IPFS星際大陸CEO Q＆A 1 問 小編：您為什麼會關注到IPFS這個生態，它吸引您的點在哪？ 答 合東居士：世間一切，無非因緣。我在大學研究哲學時讀了兩年佛經，大學畢業皈依了佛教，我常常

一個等待破繭成蝶，飛向藍天的工程師

寫在最前面的話 2011年考入國內某不知名二本大學，專業是軟體開發。2014年7月在崑山實訓3個月。一句話概括自己的大學生涯就是平庸的混到了畢業證。2014年10月面試通過進去一家上海不知名科技公司實習。2015年7月順利答辯通過拿到畢業證。同月在公司轉正，8月底離職。 2015年9月入職國內某大型服裝公

產品讀書《破繭成蝶：使用者體驗設計師的成長之路》

  作者簡介         劉津，現為阿里巴巴互動設計專家，北京大學數字藝術系碩士。2009年至今從事互動設計工作5年。2010年加入網易使用者體驗設計中心，後擔任網易技術部UED主管，負責互動、視覺、用研團隊的管理

BetterScroll 在移動端滾動場景的應用

rtx max 會有 快速滾動 container 切換圖片 real 由於 ecan BetterScroll 是一款重點解決移動端各種滾動場景需求的開源插件（ GitHub地址 ），適用於滾動列表、選擇器、輪播圖、索引列表、開屏引導等應用場景。 為了滿足這些場景，它不僅

移動端二三事【四】：陀螺儀（重力感應器）實現手機位置、加速度感應以及常見應用。

效果 防止 size tro 通過 select 代碼 陀螺儀 prime 首先說明一下：陀螺儀感應需在真機環境下進行調試，PC端無效果。 1.獲取感應器 需在window上監聽devicemotion事件，再通過事件對象獲取accelerationIncludingG

【筆記】移動端H5數字鍵盤input type=number的處理（IOS和Android）

!= 字符串 文檔 代碼 || clear tcl rfi 導致 在Vue中的項目，基於VUX-UI開發，一個常見的需求： 1、金額輸入框 2、彈出數字鍵盤 3、僅支持輸入兩位小數，限制最大11位數，不允許0開頭　　 第一，首先想到額就是在VUX-UI中制定ty

移動端二三事【五】：陀螺儀（重力感應器）實現手機位置、加速度感應以及常見應用。

首先說明一下：陀螺儀感應需在真機環境下進行除錯，PC端無效果。 1.獲取感應器 需在window上監聽devicemotion事件，再通過事件物件獲取accelerationIncludingGravity（內建重力加速度感應器）物件。程式碼如下：

移動端H5頁面截圖【含 domtoimage、html2canvas 】

// 裁剪名片 cropCard() {     let self = this; // 獲取dom結構 let card_target = this.refs.copyCardArea;  domtoimage.toPng(card_target).then(func

BetterScroll：在移動端滾動場景的應用

BetterScroll 是一款重點解決移動端各種滾動場景需求的開源外掛（GitHub地址），適用於滾動列表、選擇器、輪播圖、索引列表、開屏引導等應用場景。 為了滿足這些場景，它不僅支援慣性滾動、邊界回彈、滾動條淡入淡出等效果的靈活配置，讓滾動更加流暢，同時還提

移動端h5開發相關內容總結css篇--自己總結

pan class 寬度 absolute html ive min-width 百分比 number 原文參考http://mp.weixin.qq.com/s/Nho2DHj-Y59j2F62vpN9jQ1.開發移動端，頭部必要的配置<meta name="vie

移動端 h5開發相關內容總結——CSS篇

開發 beta 節點 dev ios8 參考 cal 屏幕適配 加載 1.移動端開發視窗口的添加 h5端開發下面這段話是必須配置的 <meta name="viewport" content="width=device-width, initial-scale=1,

移動端h5頁面常見問題總結

webkit style 總結 mar 常見問題 就會 所有 真的 abs 　　從去年開始在公司一直做嵌入式的h5頁面，遇見了很多問題，做一個小小的總結~ 　　1.IOS設備鏈接、按鈕等點擊產生灰色背景 　　在傲嬌的iOS中可點擊元素被點擊時候會出現覆蓋顯示的高亮顏色，也就

移動端二三事【二】：移動端觸摸事件點透及多種解決方案。

優化 提前 sta 屬性 lis 剛才 觸摸事件 功能 觸發 大家都知道的少說，多分享一些幹貨。 一、首先說移動端的三大主要事件： 1.手指按下： ontouchstart2.手指移動：ontouchmove3.手指擡起 ontouchend *使用移動端事件時，為盡

移動端H5 判斷IOS還是Android 平臺

hone one 平臺 useragent ont navig navigator span ios 1.方法 (function($) { var UA = window.navigator.userAgent; if(/Android|HTC/i.te

移動端H5活動頁優化方案

nginx服務 || 做的 教程 網上 存在 方法 tee cat 背景 項目：移動端H5電商項目 痛點：慢！！！ 初始方案：最基本的圖片懶加載，靜態資源放到cdn，predns等等已經都做了。但是還是慢，慢在哪？ 顯而易見的原因：由於前後端分離，所有的數據都由接口下發，之

移動端h5下ul實現橫向滾動css代碼

html style idt htm float overflow inline css AD html代碼： 1 <ul id="category"> 2 <li>品牌團</li> 3 <li>美體個護&l

移動端h5直播專案|html5直播實戰開發|h5仿陌陌

最近一些直播、小視訊什麼的都比較火，像陌陌、抖音、火山短視訊… 於是空閒時間自己也利用html5技術也試著倒騰了下直播專案，使用到了h5+css3+iscroll+zepot+swiper+wlsPop架構開發了一個仿陌陌、火山小視訊，專案效果挺不錯噠！同時解決了在直播頁面聊天時候頁面撐起的問題。 效果圖如

移動端h5開發解析度自適應

在做H5開發時，都會遇到螢幕解析度自適應問題，那麼怎麼更好地讓頁面自適應？ 這裡介紹一種用js計算螢幕寬度+rem單位的方法（網易新聞在用） 不同手機有不同的解析度，UI在做設計圖的時候大都會以iPhone6/7/8的解析度為標準，即375×667，畫素比為2，所以我們這裡計算螢