小程序菜单弹出缩回动画效果

小程序菜单弹出缩回动画效果

下面看图，图片效果不是很好，因为是图片转换成的gif ，将就看下吧，具体效果会很流畅。

下面贴出代码

js部分代码

Page({
  data: {
    mainMenu: {}, //主菜单动画
    menu1: {}, //菜单1动画
    menu2: {}, //菜单2动画
    menu3: {}, //菜单3动画
    menu4: {}, //菜单3动画

    isPopping: false, //是否弹出
  },

  //点击主菜单
  mainMenuClick: function() {
    //判断主菜单状态，从而调用弹出还是缩回     
    if (this.data.isPopping) {
      console.log("收缩菜单")
      //缩回动画
      this.shrink()
      this.setData({
        isPopping: false
      })
    } else {
      console.log("弹出菜单")
      //弹出动画
      this.eJect()
      this.setData({
        isPopping: true
      })
    }
  },

  /**
   * 菜单1点击
   */
  menu1Click: function() {
    console.log("《新》菜单点击")
    this.setData({
      isPopping: false
    })
    this.shrink()
  },

  /**
   * 菜单2点击
   */
  menu2Click: function() {
    console.log("《春》菜单点击")
    this.setData({
      isPopping: false
    })
    this.shrink()
  },

  /**
   * 菜单3点击
   */
  menu3Click: function() {
    console.log("《快》菜单点击")
    this.setData({
      isPopping: false
    })
    this.shrink()
  },

  /**
   * 菜单4点击
   */
  menu4Click: function() {
    console.log("《乐》菜单点击")
    this.setData({
      isPopping: false
    })
    this.shrink()
  },

  //弹出动画
  eJect: function() {
    //顺时针旋转
    var menu1 = wx.createAnimation({
      duration: 500, // 弹出的速度
      timingFunction: 'ease-out'
    })
    var menu2 = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    var menu3 = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    var menu4 = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })

    /**
     * 下面写法参数说明：
     * 第一个括号值(弹出的菜单与主菜单左右之间的距离，弹出的菜单与主菜单上下之间的距离)
     * 第二个括号值(菜单弹出旋转的度数)
     * 第三个括号值(菜单的透明度0.0~1.0之间)
     */
    menu1.translate(35, -70).rotateZ(360).opacity(1).step();
    menu2.translate(70, -28).rotateZ(360).opacity(1).step();
    menu3.translate(70, 28).rotateZ(360).opacity(1).step();
    menu4.translate(35, 70).rotateZ(360).opacity(1).step();

    this.setData({
      menu1: menu1.export(),
      menu2: menu2.export(),
      menu3: menu3.export(),
      menu4: menu4.export(),
    })
  },

  //收回动画
  shrink: function() {
    var menu1 = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    var menu2 = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    var menu3 = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    var menu4 = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })

    //处理动画效果
    menu1.translate(0, 0).rotateZ(0).opacity(0).step();
    menu2.translate(0, 0).rotateZ(0).opacity(0).step();
    menu3.translate(0, 0).rotateZ(0).opacity(0).step();
    menu4.translate(0, 0).rotateZ(0).opacity(0).step();

    this.setData({
      menu1: menu1.export(),
      menu2: menu2.export(),
      menu3: menu3.export(),
      menu4: menu4.export(),
    })
  }
})

wxml部分代码

<view>
  <!--弹出菜单1-->
  <image src="/images/xin.png" class="img-style" animation="{{menu1}}" bindtap="menu1Click"></image>
  <!--弹出菜单2-->
  <image src="/images/chun.png" class="img-style" animation="{{menu2}}" bindtap="menu2Click"></image>
  <!--弹出菜单3-->
  <image src="/images/kuai.png" class="img-style" animation="{{menu3}}" bindtap="menu3Click"></image>
  <!--弹出菜单4-->
  <image src="/images/le.png" class="img-style" animation="{{menu4}}" bindtap="menu4Click"></image>
  <!--主菜单-->
  <image src="/images/zhu.png" class="main-menu" animation="{{mainMenu}}" bindtap="mainMenuClick"></image>
</view>

wxss代码部分

page {
  background-color: #eee;
}

/*主菜单*/

.main-menu {
  height: 100rpx;
  width: 100rpx;
  position: absolute;
  bottom: 500rpx;
  left: 0rpx;
  z-index: 100;
}

/**opacity 设置不透明级别  0.0到 1.0 之间*/

.img-style {
  height: 100rpx;
  width: 100rpx;
  position: absolute;
  bottom: 500rpx;
  left: 0rpx;
  opacity: 0;
}

直接代码赋值下来就能看到效果了，有什么问题或者需要改正的地方欢迎留言