微信小程序开发之弹出菜单

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_31383345/article/details/53841192

周五.玩具一枚.
gif:

代码:
1.index.js

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    isPopping: false,//是否已经弹出
    animationPlus: {},//旋转动画
    animationcollect: {},//item位移,透明度
    animationTranspond: {},//item位移,透明度
    animationInput: {},//item位移,透明度
    //我的博客:http://blog.csdn.net/qq_31383345
    //CSDN微信小程序开发专栏:http://blog.csdn.net/column/details/13721.html
  },
  onLoad: function () {

  },
  //点击弹出
  plus: function () {
    if (this.data.isPopping) {
      //缩回动画
      popp.call(this);
      this.setData({
        isPopping: false
      })
    } else {
      //弹出动画
      takeback.call(this);
      this.setData({
        isPopping: true
      })
    }
  },
  input: function () {
    console.log("input")
  },
  transpond: function () {
    console.log("transpond")
  },
  collect: function () {
    console.log("collect")
  }
})



//弹出动画
function popp() {
  //plus顺时针旋转
  var animationPlus = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease-out'
  })
  var animationcollect = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease-out'
  })
  var animationTranspond = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease-out'
  })
  var animationInput = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease-out'
  })
  animationPlus.rotateZ(180).step();
  animationcollect.translate(-100, -100).rotateZ(180).opacity(1).step();
  animationTranspond.translate(-140, 0).rotateZ(180).opacity(1).step();
  animationInput.translate(-100, 100).rotateZ(180).opacity(1).step();
  this.setData({
    animationPlus: animationPlus.export(),
    animationcollect: animationcollect.export(),
    animationTranspond: animationTranspond.export(),
    animationInput: animationInput.export(),
  })
}
//收回动画
function takeback() {
  //plus逆时针旋转
  var animationPlus = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease-out'
  })
  var animationcollect = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease-out'
  })
  var animationTranspond = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease-out'
  })
  var animationInput = wx.createAnimation({
    duration: 500,
    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();
  this.setData({
    animationPlus: animationPlus.export(),
    animationcollect: animationcollect.export(),
    animationTranspond: animationTranspond.export(),
    animationInput: animationInput.export(),
  })
}

2.index.wxml

<!--index.wxml-->
<image src="../../images/collect.png" animation="{{animationcollect}}" class="image-style" bindtap="collect"></image>
<image src="../../images/transpond.png" animation="{{animationTranspond}}" class="image-style" bindtap="transpond"></image>
<image src="../../images/input.png" animation="{{animationInput}}" class="image-style" bindtap="input"></image>
<image src="../../images/plus.png" animation="{{animationPlus}}" class="image-plus-style" bindtap="plus"></image>

3.index.wxss

/**index.wxss**/

.image-style {
  height: 150rpx;
  width: 150rpx;
  position: absolute;
  bottom: 250rpx;
  right: 100rpx;
  opacity: 0;
}

.image-plus-style {
  height: 150rpx;
  width: 150rpx;
  position: absolute;
  bottom: 250rpx;
  right: 100rpx;
  z-index: 100;
}

demo代码下载
我的博客,欢迎交流批评!
CSDN微信小程序开发专栏