本文主要是介绍移动端 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
妙味课堂–案例详情
这篇关于移动端 H5 场景应用【破茧成蝶】案例鉴赏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
