移动端 H5 场景应用【破茧成蝶】案例鉴赏

阅读：评论：0

移动端【破茧成蝶】场景请用微信扫描二维码访问（温馨提示：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';      load = 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 = veTo(x,y);gc.lineTo(x+1,y+1);}else{gc.lineTo(x,y);}gc.stroke();$c.on(&#ve',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(&#ve',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(&#ve',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(&#ve',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

妙味课堂–案例详情

本文发布于:2024-02-01 05:43:01，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170673737934313.html

上一篇：百度Java岗一面+二面内容，我用2个月的时间破茧成蝶

下一篇：并发编程挑战！我用2个月的时间破茧成蝶

标签：场景案例破茧成蝶

留言与评论（共有 0 条评论）