微信小程序 按钮点击动态展开收起（开发记录）

wxml代码

<view>
    <image src="/pages/icon/daikaifa.png" class="img-style" animation="{{animCollect}}" bindtap="collect"></image>
    <image src="/pages/icon/daikaifa.png" class="img-style" animation="{{animTranspond}}" bindtap="transpond"></image>
    <image src="/pages/icon/daikaifa.png" class="img-style" animation="{{animInput}}" bindtap="input"></image>
    <image src="/pages/icon/add.png" class="img-plus-style" animation="{{animPlus}}" catchtap="moreBtn"></image>
</view>

wxss代码

.img-plus-style {
    height: 100rpx;
    width: 100rpx;
    position: fixed;
    bottom: 4%;
    right: 5%;
    z-index: 100;
}

.img-style {
    height: 120rpx;
    width: 120rpx;
    position: fixed;
    bottom: 4%;
    right: 5%;
    opacity: 0;
}

js代码

moreBtn: function () {
  this.plus();
},
//点击弹出
plus: function () {
  if (!this.data.isPopping) {
    //弹出
    this.popp();
    this.setData({
      isPopping: true
    })
    }
  else {

    //缩回
    this.takeback();
    this.setData({
      isPopping: false
    });
    // console.log("弹出")
  }
},
input: function () {
  console.log("input")
},
transpond: function () {
  console.log("transpond")
},
collect: function () {
 console.log("transpond")
},

//弹出动画
popp: function () {
  //plus顺时针旋转
  let animationPlus = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease'
  })
  let animationcollect = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease'
  })
  let animationTranspond = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease'
  })
  let animationInput = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease'
  })
  animationPlus.rotateZ(180).step();
  animationcollect.translate(-0, -100).rotateZ(0).opacity(1).step();
  animationTranspond.translate(-85, -75).rotateZ(0).opacity(1).step();
  animationInput.translate(-80, 10).rotateZ(0).opacity(1).step();
  this.setData({
    animPlus: animationPlus.export(),
    animCollect: animationcollect.export(),
    animTranspond: animationTranspond.export(),
    animInput: animationInput.export(),
  })
},
//收回动画
takeback: function () {
  //plus逆时针旋转
  let animationPlus = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease'
  })
  let animationcollect = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease'
  })
  let animationTranspond = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease'
  })
  let animationInput = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease'
  })
  animationPlus.rotateZ(0).step();
  animationcollect.translate(0, 0).rotateZ(0).opacity(0).step();
  animationTranspond.translate(0, 0).rotateZ(0).opacity(0).step();
  animationInput.translate(0, 0).rotateZ(0).opacity(0).step();
  this.setData({
    animPlus: animationPlus.export(),
    animCollect: animationcollect.export(),
    animTranspond: animationTranspond.export(),
    animInput: animationInput.export(),
  })
},