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