移動端【破繭成蝶】場景請用微信掃描二維碼訪問（溫馨提示：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