微信小程序實現彈出菜單動畫

Page({
 data: {
 isPopping: false,
 animPlus: {},
 animCollect: {},
 animTranspond: {},
 animInput: {},
 animCloud:{},
 aninWrite:{},
 },
 //點擊彈出
 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("input")
 },
 transpond: function () {
 console.log("transpond")
 },
 collect: function () {
 console.log("collect")
 },
 cloud:function(){
 console.log("cloud")
 },
 write: function () {
 console.log("cloud")
 },


 //彈出動畫
 popp: function () {
 //plus順時針旋轉
 var animationPlus = wx.createAnimation({
 duration: 400,
 timingFunction: 'ease-out'
 })
 var animationcollect = wx.createAnimation({
 duration: 400,
 timingFunction: 'ease-out'
 })
 var animationTranspond = wx.createAnimation({
 duration: 400,
 timingFunction: 'ease-out'
 })
 var animationInput = wx.createAnimation({
 duration: 400,
 timingFunction: 'ease-out'
 })
 var animationCloud = wx.createAnimation({
 duration: 400,
 timingFunction: 'ease-out'
 })
 var animationWrite = wx.createAnimation({
 duration: 400,
 timingFunction: 'ease-out'
 })
 animationPlus.rotateZ(180).step();
 animationcollect.translate(-90, -100).rotateZ(180).opacity(1).step();
 animationTranspond.translate(-140, 0).rotateZ(180).opacity(1).step();
 animationInput.translate(-90, 100).rotateZ(180).opacity(1).step();
 animationCloud.translate(0, 135).rotateZ(180).opacity(1).step();
 animationWrite.translate(0, -135).rotateZ(180).opacity(1).step();
 this.setData({
 animPlus: animationPlus.export(),
 animCollect: animationcollect.export(),
 animTranspond: animationTranspond.export(),
 animInput: animationInput.export(),
 animCloud: animationCloud.export(),
 animWrite: animationWrite.export(),
 })
 },
 //收回動畫
 takeback: function () {
 //plus逆時針旋轉
 var animationPlus = wx.createAnimation({
 duration: 400,
 timingFunction: 'ease-out'
 })
 var animationcollect = wx.createAnimation({
 duration: 400,
 timingFunction: 'ease-out'
 })
 var animationTranspond = wx.createAnimation({
 duration: 400,
 timingFunction: 'ease-out'
 })
 var animationInput = wx.createAnimation({
 duration: 400,
 timingFunction: 'ease-out'
 })
 var animationCloud = wx.createAnimation({
 duration: 400,
 timingFunction: 'ease-out'
 })
 var animationWrite = wx.createAnimation({
 duration: 400,
 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();
 animationCloud.translate(0, 0).rotateZ(0).opacity(0).step();
 animationWrite.translate(0, 0).rotateZ(0).opacity(0).step();
 this.setData({
 animPlus: animationPlus.export(),
 animCollect: animationcollect.export(),
 animTranspond: animationTranspond.export(),
 animInput: animationInput.export(),
 animCloud: animationCloud.export(),
 animWrite: animationWrite.export(),
 })
 },


 onLoad: function (options) {
 // 生命周期函數--監聽頁面加載
 },
 onReady: function () {
 // 生命周期函數--監聽頁面初次渲染完成
 },
 onShow: function () {
 // 生命周期函數--監聽頁面顯示
 },
 onHide: function () {
 // 生命周期函數--監聽頁面隱藏
 },
 onUnload: function () {
 // 生命周期函數--監聽頁面卸載
 },
 onPullDownRefresh: function () {
 // 頁面相關事件處理函數--監聽用戶下拉動作
 },
 onReachBottom: function () {
 // 頁面上拉觸底事件的處理函數
 },
 onShareAppMessage: function () {
 // 用戶點擊右上角分享
 return {
 title: 'title', // 分享標題
 desc: 'desc', // 分享描述
 path: 'path' // 分享路徑
 }
 }
})

<view>
 <image src="../../image/1.png" class="img-style" animation="{{animWrite}}" bindtap="write"></image>
 <image src="../../image/4.png" class="img-style" animation="{{animCollect}}" bindtap="collect"></image>
 <image src="../../image/2.png" class="img-style" animation="{{animTranspond}}" bindtap="transpond"></image>
 <image src="../../image/3.png" class="img-style" animation="{{animInput}}" bindtap="input"></image>
 <image src="../../image/5.png" class="img-style" animation="{{animCloud}}" bindtap="cloud"></image>
 <image src="../../image/6.png" class="img-switch-style" animation="{{animPlus}}" bindtap="plus"></image>
</view>

.img-switch-style {
 height: 120rpx;
 width: 120rpx;
 position: absolute;
 bottom: 250rpx;
 right: 100rpx;
 z-index: 100;
}
 
.img-style {
 height: 120rpx;
 width: 120rpx;
 position: absolute;
 bottom: 250rpx;
 right: 100rpx;
 opacity: 0;
}