基于Zepto框架实现开启宝箱

问题

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

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

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

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

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

图2.1 zepto方法和事件

方法

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

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

（可以通过访问github地址：

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

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

   

（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);

   })

 结语

本文提出了一种基于Zepto实现了开启宝箱的效果，方法简单，易于上手。