网页|利用Zepto框架实现宝箱开启效果

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

欢迎加入团队圈子！与作者面对面！直接点击！

1.Zepto框架的优势

Zepto简单来说是一个轻量级的JS库。它的优势在于能减少下载和与运行时间，兼容大多数移动浏览器和主流桌面现代浏览器。而传统的js框架，为了兼容低级、高级浏览器，代码量较大、运行时间长。移动端浏览器功能差异较小，兼容问题不突出。传统js框架代码大，在移动端会造成终端流量加大、显示迟缓的情况。zepto还实现了jQuery的大部分功能，其功能也是十分强大的。

2.解析思路

联想到平时在玩游戏的时候弹出的一些宝箱，其打开过程无非就是单击宝箱的时候，宝箱摇晃。摇晃动画结束后，宝箱打开，出现获得的奖励。分析制作开启宝箱的实现细节

（1）使用 addClass 方法给宝箱添加相应的摇晃类；

（2）使用 setTimeout、removeClass、closest、find、addClass 等方法让原来的宝箱变为打开状态，并显示奖励模块，宝箱下面的文字在宝箱打开后消失。

Zepto的部分方法和事件如下：

网页|利用Zepto框架实现宝箱开启效果

图2.1 zepto方法和事件

3.制作过程

需要制作的是如下图3.1效果的宝箱开启图：

网页|利用Zepto框架实现宝箱开启效果

（1）首先当然是引入zepto.min.js文件。

（可以通过访问github地址：

https://github.com/madrobby/zepto下载到所需要的文件）

（2）利用h5实现百宝箱的的基础布局，再添加css样式进行调整。

<div>

<h3><span>四川旅游学院</span>送你一个宝箱</h3>

<h3>恭喜你，</br>成功领取<span></span>旅游百宝箱</h3>

<div>

<div>

<i></i>

</div>

<div>

<div><img src="img/chest-icon-zuan.png"></div> x 500

</div>

<div>

<button>查看详情并提取</button>

</div>

<div>

</div>

<div>

<button>查看领取详情</button>

</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 团队

微信号：算法与编程之美

网页|利用Zepto框架实现宝箱开启效果

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！

网页|利用Zepto框架实现宝箱开启效果

相关推荐