WXML
<view>
<image src="../../image/[email protected]" class="img-style" animation="{{animCollect}}" bindtap="collect"></image>
<image src="../../image/[email protected]" class="img-style" animation="{{animTranspond}}" bindtap="transpond"></image>
<image src="../../image/[email protected]" class="img-style" animation="{{animInput}}" bindtap="input"></image>
<image src="../../image/[email protected]" class="img-plus-style" animation="{{animPlus}}" bindtap="plus"></image>
</view>
JS
Page({
data: {
isPopping: true,//是否已经弹出
},
//点击弹出
plus: function () {
if (this.data.isPopping) {
//缩回动画
this.popp();
this.setData({
isPopping: false
})
} else if (!this.data.isPopping) {
//弹出动画
this.takeback();
this.setData({
isPopping: true
})
}
},
input: function () {
console.log("1")
},
transpond: function () {
console.log("2")
},
collect: function () {
console.log("3")
},
//弹出动画
popp: function () {
//plus顺时针旋转
var animationPlus = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
var animationcollect = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
var animationTranspond = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
var animationInput = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
animationPlus.rotateZ(90).step();
animationcollect.translate(-50, -50).rotateZ(180).opacity(1).step();
animationTranspond.translate(-40, 0).rotateZ(180).opacity(1).step();
animationInput.translate(-50, 50).rotateZ(180).opacity(1).step();
this.setData({
animPlus: animationPlus.export(),
animCollect: animationcollect.export(),
animTranspond: animationTranspond.export(),
animInput: animationInput.export(),
})
},
//收回动画
takeback: function () {
//plus逆时针旋转
var animationPlus = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
var animationcollect = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
var animationTranspond = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
var animationInput = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
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(),
})
},
})
WXSS
.img-plus-style {
height: 50rpx;
width: 50rpx;
position: absolute;
bottom: 250rpx;
right: 100rpx;
z-index: 100;
}
.img-style {
height: 50rpx;
width: 50rpx;
position: absolute;
bottom: 250rpx;
right: 100rpx;
opacity: 0;
}