微信小程序实现弹出菜单动画

微信(小程序)  /  管理员 发布于 5年前   377

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

效果图

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

wxml：

wxss：

.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;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 微信小程序实现拍照画布指定区域生成图片
• 微信小程序实现圆形进度条动画
• 微信小程序实现下拉刷新动画
• 微信小程序实现录音时的麦克风动画效果实例
• 微信小程序使用canvas的画图操作示例
• 微信小程序CSS3动画下拉菜单效果
• 小程序和web画三角形实现解析