小程序左侧抽屉动画（侧栏菜单）

小程序对于JS的高度封装让每个前端用户都有一种撕心裂肺的感觉；
由于不能是用JS来获取DOM，所以以往使用Jquery编写的动画，在小程序里面都不能使用；
**
**
忘了从哪里看到的文章，这里我用自己的方式给他整理出来~知识都在于分享。

首先微信下程序的每一个页面基本的格式是由四个文件来表现的，分别是：
wxml结构层；
wxss样式层；
js逻辑层；
json数据层；以下主要以前三个层来分别阐述：

wxml：

bindtap 是点击事件；
data-statu 是自己声明的数据；
wx:if 是条件渲染 用来控制模块是否显示 这里也可以使用hidden；
animation 是小程序声明动画

<!--蒙版抽屉曾-->
<view class='mask' bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}">  </view>
<view class='Drawer' animation="{{animationData}}" wx:if="{{showModalStatus}}">  </view>

<!--主界面-->
<!--这里只显示要点击的左上角的图片，主界面结构省略了-->
<vies class='top_img'  bindtap="powerDrawer" data-statu="open"></view>

wxss：

这里只写了蒙版层mask与抽屉层的drawer的样式

.mask{
  position:fixed;
  width:100%;
  height:100%;
  background: #000000;
  opacity: 0.5;
  z-index: 100;
}
.Drawer{
  position:fixed;
  background:#091e3e;
  width:220px;
  height:100%;
  left:-220px;
  z-index: 200;
  color: #ffffff;
}
.top_img{
  width:60px;
  height:60px;
  background:#000000;
}

js：

关键代码：
e.currentTarget.dataset.statu 表示手指点击的view模块的data-statu数据；（前面wxml中说名的data-statu；）；

整体上这个动画的逻辑是：每点击一次，动画都是重复一次，（没看错，就是重复同一个动作），只不过每次根据data-statu的数据来控制蒙版层是否显示而已。
下面的代码放在page({})中；

data: {
    showModalStatus: false,
    // animationData:"",
  },
  powerDrawer: function (e) {
    var currentStatu = e.currentTarget.dataset.statu;
    this.util(currentStatu)
  },
  util: function (currentStatu) {
    /* 动画部分 */
    // 第1步：创建动画实例 
    var animation = wx.createAnimation({
      duration: 200, //动画时长
      timingFunction: "linear", //线性
      delay: 0 //0则不延迟
    });

    // 第2步：这个动画实例赋给当前的动画实例
    this.animation = animation;

    // 第3步：执行第一组动画：x轴不偏移；
    animation.translateX(0).step();

    // 第4步：导出动画对象赋给数据对象储存
    this.setData({
      animationData: animation.export()
    })

    // 第5步：设置定时器到指定时候后，执行第二组动画
    setTimeout(function () {
      // 执行第二组动画：X轴偏移22px，停
      animation.translateX(220).step()
      // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
      this.setData({
        animationData: animation
      })

      //关闭抽屉
      if (currentStatu == "close") {
        this.setData({
          showModalStatus: false
        });
      }
    }.bind(this), 200)

    // 显示抽屉
    if (currentStatu == "open") {
      this.setData({
        showModalStatus: true
      });
    }
  },

三个层次所有代码就这么简单；JS中的逻辑理解了其实也不难；
要是不想用这个同一动作隐层显示的方法，也可以分别声明函数，来“科学”的创建动画~
实在看不懂复制粘贴就行了…