微信小程序動畫之彈出菜單，供大家參考，具體內容如下

效果圖

js：

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' // 分享路徑  } }})