移动端 H5 场景应用【破茧成蝶】案例鉴赏
移动端 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>
一、什么是微信场景应用
二、场景运行环境
- 微信内嵌的浏览器
- Chrome自带移动端Emulation(模拟器)
三、场景一功能
- 加载，刮开，划屏，动画，音乐等
四、jQuery
- 版本2.1.3
五、手机分辨率
- 屏幕
- 设备
六、主流屏幕分辨率
- 640 * 960
- 640 * 1136
七、viewport
- 默认视口
- width=device-width , user-scalable=no
- target-densityDpi=device-dpi
- 固定值640即可
八、设置高度
- 通过JS动态设置
- background-size : cover
九、刮开效果
- canvas
- globalCompositeOperation
a. source-over
b. destination-over
c. destination-out
十、移动端事件
- touchstart
- touchmove
- touchend
- 原生event
a. originalEvent
b. changedTouches - 阻止默认touchmove
a. preventDefault
十一、划屏切换
- css3
- 运动实现
- transform
a. translate
b. scale
c. transition
d. transitionEnd事件
十二、提示箭头
- css3
a. animation
b. 名字
c. 时间
d. 执行次数
e. infinite - @keyframes
a. 帧
十三 、入场动画
- 文字样式
- css3+js
a. transform
b. transition - 图标
a. 可以用图片
b. 也可以用字体库，Font Awesome
十四、音乐
- audio
a. play()
b. pause()
十五、加载
- css3
- 控制scale
- animation-delay
- js
- new Image
十六、查看场景二效果
- 声音，音乐，加载，3D魔方，3D划屏，粒子操作
十七、适配
- 第二种模式方案
十八、音乐
- audio
- play()
- pause()
十九、3D魔方
- perspective
- preserve-3d
- transform-origin
二十、3D划屏
- translateZ
二十一、粒子操作
- canvas像素级操作
- canvas运动模式
二十二、加载
- linear-gradient
妙味课堂–案例详情