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

移动端【破茧成蝶】场景请用微信扫描二维码访问（温馨提示：H5案例有声音，请打开声音体验）：

案例代码展示：

一、什么是微信场景应用

二、场景运行环境

微信内嵌的浏览器

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

妙味课堂–案例详情

二维码扫码学习