欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-09-08 10:50:58
微信小程序动画之弹出菜单,供大家参考,具体内容如下 效果图 js: page({ data: { ispopping: false, an...

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

效果图

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

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:

<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>

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

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