微信小程序点击按钮聚合动画 效果如下
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
