微信小程序点击按钮聚合动画

微信小程序点击按钮聚合动画
效果如下

wxml

<view class="allimgs">
    <image src="qst_img/999_1.png" class="img-style" animation="{{animCollect}}" bindtap="collect"></image>
    <image src="qst_img/999.png" class="img-style" animation="{{animTranspond}}" bindtap="transpond"></image>
    <image src="qst_img/6999.png" class="img-style" animation="{{animInput}}" bindtap="input"></image>
		<image src="qst_img/6999.png" class="img-style" animation="{{animInput1}}" bindtap="input"></image>
		<image src="qst_img/6999.png" class="img-style" animation="{{animInput2}}" bindtap="input"></image>
		<image src="qst_img/1999.png" class="img-plus-style"  catchtap="moreBtn"></image>
</view>

wxss

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

js
js 根据需要展示按钮的数量调整x以及y轴的值即可

    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'
        })
        let animationInput1 = wx.createAnimation({
            duration: 500,
            timingFunction: 'ease'
          })
          let animationInput2 = wx.createAnimation({
            duration: 500,
            timingFunction: 'ease'
          })
        // animationPlus.rotateZ(180).step(); // 暂时注释
        animationcollect.translate(-0, -60).rotateZ(0).opacity(1).step();
        animationTranspond.translate(-55, -40).rotateZ(0).opacity(1).step();
        animationInput.translate(-75, 10).rotateZ(0).opacity(1).step();
        animationInput1.translate(-55, 60).rotateZ(0).opacity(1).step();
        animationInput2.translate(-0, 80).rotateZ(0).opacity(1).step();
        this.setData({
          animPlus: animationPlus.export(),
          animCollect: animationcollect.export(),
          animTranspond: animationTranspond.export(),
          animInput: animationInput.export(),
          animInput1:animationInput1.export(),
          animInput2:animationInput2.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'
        })
        let animationInput1 = wx.createAnimation({
            duration: 500,
            timingFunction: 'ease'
          })
          let animationInput2 = 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();
        animationInput1.translate(0, 0).rotateZ(0).opacity(0).step();
        animationInput2.translate(0, 0).rotateZ(0).opacity(0).step();
        this.setData({
          animPlus: animationPlus.export(),
          animCollect: animationcollect.export(),
          animTranspond: animationTranspond.export(),
          animInput: animationInput.export(),
          animInput1: animationInput1.export(),
          animInput2: animationInput2.export(),
        })
      },

希望此文对正在学习进步的你有所帮助 ~一起加油
转载于:https://my.oschina.net/lanyu96/blog/3093995