微信小程序 动画之一（侧边菜单展开和闭合）

1.效果如下：

2，全部代码

1.js

Page({
  data: {
    choose: false,
    animationData: {},
    stopBtn: true, //动画未执行完之前禁用按钮
  },
  showContent: function (e) {
    var that = this;
    // 创建一个动画实例
    var animation = wx.createAnimation({
      duration: 500,      // 动画持续时间
      timingFunction: 'linear'      // 定义动画效果，当前是匀速
    })
    that.animation = animation
    animation.height("0").opacity(0).step()
    that.setData({
      // 通过export()方法导出数据
      animationData: animation.export(),
      choose: true,
      width: 200,
    })
    // 设置setTimeout来改变高度以及透明度，实现有感觉的展开
    setTimeout(function () {
      animation.height("60rpx").opacity(1).step({
        duration: 500
      })
      that.setData({
        animationData: animation.export(),
      })
    }, 50)
    //在动画时间禁用按钮
    setTimeout(function () {
      that.setData({
        stopBtn: false
      })
    }, 500)
  },

  // 隐藏
  hideContent: function (e) {
    var that = this;
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: 'linear'
    })
    that.animation = animation
    animation.height(0).opacity(0).step({
      duration: 500
    })
    that.setData({
      animationData: animation.export()
    })
    setTimeout(function () {
      animation.height("60rpx").step();
      that.setData({
        animationData: animation.export(),
        choose: false,
        width: 50,
      })
    }, 500)
    //收回动画开始禁用按钮
    that.setData({
      stopBtn: true,
    })
  },
})

2.wxml

<view class="fixBox" bindtap="{{ stopBtn ? 'showContent' : 'hideContent' }}" style="width:{{width}}px;">
  <view wx:if="{{choose}}" class='companyInfo' animation='{{animationData}}'>
      *[内容自己添加]
  </view>
  <view wx:else>
       *[内容自己添加]
  </view>
</view>

3.wxss

.fixBox{
	width: 50px;
	text-align: center;
	height:40px;
	line-height: 40px;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	border-right: 1px solid #333333;
	border-radius: 0px 10px 10px 0px;
	position: fixed;
	top: 25%;
}