微信小程序（4）--二维码窗口

<view class="btn" bindtap="powerDrawer" data-statu="open">button</view>

<!--mask-->

<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>

<!--content-->

<!--使用animation属性指定需要执行的动画-->

<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}"> 

 <!--drawer content-->

  <view class="drawer_content">

    <view class="contant-poup">

      <view class="poup-box clearfix">

        <view class="img-poup"><image src="../../images/user.jpg"></image></view>

        <view class="text-box">

          <view class="text-poup">Cindy</view>

          <view class="position-poup">广东 深圳</view>

        </view>

      </view>

      <view class="erweima-box"><view class="erweima-in"><image src="../../images/erweima.jpg"></image></view></view>

      <view class="bot-text">扫一扫上面的二维码图案，关注我的益新闻中心</view>

    </view>

  </view>

</view> 

Page({

  data: {

    showModalStatus: false

  },

  powerDrawer: function (e) {

    var currentStatu = e.currentTarget.dataset.statu;

    this.util(currentStatu)

  },

  util: function (currentStatu) {

    /* 动画部分 */

    // 第1步：创建动画实例

    var animation = wx.createAnimation({

      duration: , //动画时长

      timingFunction: "linear", //线性

      delay:  //0则不延迟

    });

    // 第2步：这个动画实例赋给当前的动画实例

    this.animation = animation;

    // 第3步：执行第一组动画

    animation.opacity().rotateX(-).step();

    // 第4步：导出动画对象赋给数据对象储存

    this.setData({

      animationData: animation.export()

    })

    // 第5步：设置定时器到指定时候后，执行第二组动画

    setTimeout(function () {

      // 执行第二组动画

      animation.opacity().rotateX().step();

      // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象

      this.setData({

        animationData: animation

      })

      //关闭

      if (currentStatu == "close") {

        this.setData(

          {

            showModalStatus: false

          }

        );

      }

    }.bind(this), )

    // 显示

    if (currentStatu == "open") {

      this.setData(

        {

          showModalStatus: true

        }

      );

    }

  }

})