小程序动画学习-遮罩动画

实现效果：

index.wxml

<view class="container">
  <view>我是内容</view>
</view>


<view class='shade' wx:if="{{isShow}}" animation="{{animationData}}">
<text bindtap="noShade">我是遮罩</text>
</view>


<button type="primary" bindtap="shade" disabled="{{isDisabled}}">遮罩</button>

index.wxss

.shade {
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  background:rgba(0,0,0,0.4);
  overflow: hidden;
}

index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 遮罩(true显示、false不显示)
    isShow: false,
    // 按钮是否可以点击(true不可以、false可以)
    isDisabled: false,
    // 动画
    animationData: {}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  // 遮罩
  shade: function(e) {
    this.setData({
      isShow: true,
      isDisabled: true
    })
    var that = this
    // 实例化一个动画
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'linear',
    })
    this.animation = animation
    // -500向上   500向下
    // 移动（如果不写定时器移动的速度很快,体验不是很好）
    animation.translateY(500).step()
    this.setData({
      animationData: animation.export()
    })
    // 设置setTimeout来改变y轴偏移量，实现有感觉的滑动
    setTimeout(function () {
      animation.translateY(0).step()
      that.setData({
        animationData: animation.export()
      })
    }, 200)
  },
  // 取消遮罩
  noShade: function(e) {
    var that = this
    //实例化一个动画
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'linear',
    })
    this.animation = animation
    // -500向上   500向下
    // 移动（如果不写定时器移动的速度很快,体验不是很好）
    animation.translateY(500).step()
    this.setData({
      animationData: animation.export()
    })
    // 设置setTimeout来改变y轴偏移量，实现有感觉的滑动
    setTimeout(function () {
      animation.translateY(0).step()
      that.setData({
        animationData: animation.export(),
        isShow: false,
        isDisabled: false
      })
    }, 200)
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})