微信小程序实现弹出菜单动画-创新互联

微信小程序动画之弹出菜单，供大家参考，具体内容如下

效果图

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。