网页|利用Zepto框架实现宝箱开启效果
1.Zepto框架的优势
Zepto简单来说是一个轻量级的JS库。它的优势在于能减少下载和与运行时间，兼容大多数移动浏览器和主流桌面现代浏览器。而传统的js框架，为了兼容低级、高级浏览器，代码量较大、运行时间长。移动端浏览器功能差异较小，兼容问题不突出。传统js框架代码大，在移动端会造成终端流量加大、显示迟缓的情况。zepto还实现了jQuery的大部分功能，其功能也是十分强大的。
2.解析思路
联想到平时在玩游戏的时候弹出的一些宝箱，其打开过程无非就是单击宝箱的时候，宝箱摇晃。摇晃动画结束后，宝箱打开，出现获得的奖励。分析制作开启宝箱的实现细节
（1）使用 addClass 方法给宝箱添加相应的摇晃类；
（2）使用 setTimeout、removeClass、closest、find、addClass 等方法让原来的宝箱变为打开状态，并显示奖励模块，宝箱下面的文字在宝箱打开后消失。
Zepto的部分方法和事件如下：
图2.1 zepto方法和事件
3.制作过程
需要制作的是如下图3.1效果的宝箱开启图：
（1）首先当然是引入zepto.min.js文件。
（可以通过访问github地址：
https://github.com/madrobby/zepto下载到所需要的文件）
<script type="text/javascript" src="js/zepto.min.js"></script>（2）利用h5实现百宝箱的的基础布局，再添加css样式进行调整。
<body ontouchstart="">
<div>
<div class="bg rotate"></div>
<div class="open-has ">
<h3><span>四川旅游学院</span>送你一个宝箱</h3>
<h3>恭喜你，</br>成功领取<span></span>旅游百宝箱</h3>
<div>
<div class="chest-close show ">
<div></div>
<div>
<i></i>
</div>
</div>
<div class="chest-open ">
<div class="mod-chest-cont open-cont">
<div>
<div>
<div><img src="img/chest-icon-zuan.png"></div> x 500
</div>
<div>
<button>查看详情并提取</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display:none">
<h3>恭喜你，中奖了</h3>
<div>
<div class="chest-open show"></div>
</div>
<div>
<button>查看领取详情</button>
</div>
</div>
</div>
</body>（3）利用动画效果和css实现背景光环的闪耀、宝箱左右摇摆后开启等动画效果。@keyframes里设置transform:rotate();控制动画暂停和运动可以用属性:animation-play-state:paused(暂停)、running(运动)。transform:shake实现动画的摆动，transform: move实现动画的移动。（代码过多，部分代码已删减）
@-webkit-keyframes rotate {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
}
}
@-webkit-keyframes move {
0% {
-webkit-transform:translate(0px ,0px);
}
100% {
-webkit-transform:translate(0px ,-5px);
}
}
@-webkit-keyframes shake {
0% {
transform: scale(1);
-webkit-transform: scale3d(1, 1, 1);
}
6%{
-webkit-transform: scale(.9) rotate(-8deg);
-webkit-transform: scale3d(1, 1, 1) rotate(0, 0, 1, -8deg);
}
18%, 30%,42%{
-webkit-transform: scale(1.1) rotate(8deg);
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 8deg);
}
12%,24%, 36%,48%{
-webkit-transform: scale(1.1) rotate(-8deg);
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -8deg); }
90% {
-webkit-transform: scale(1) translate(0px,130px);
-webkit-transform: scale3d(1, 1, 1) translate3d(0px,130px,0);
}
100% {
-webkit-transform: scale(1) translate(0px,150px);
-webkit-transform: scale3d(1, 1, 1) translate3d(0px,150px,0);
}
}（4）添加js代码实现最后的效果。
$(".chest-close").click(function(){
$(this).addClass("shake");
var that=this;
this.addEventListener("webkitAnimationEnd", function(){
$(that).closest(".open-has").addClass("opened");
setTimeout(function(){
$(that).removeClass("show");
$(that).closest(".mod-chest").find(".chest-open").addClass("show");
setTimeout(function(){
$(".chest-open").addClass("blur");
},500)
},200)
}, false);
})END
编 辑 | 王楠岚
责 编 | 刘 连
where2go 团队