小程序组件 | 右下角弹出菜单

index.json

{
  "component": true,
  "usingComponents": {}
}

index.js

// components/popmenu/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    isPopping: true,//是否已经弹出
    animPlus: {},//旋转动画
    animCollect: {},//item位移,透明度
    animTranspond: {},//item位移,透明度
    animInput: {}//item位移,透明度

  },

  /**
   * 组件的方法列表
   */
  methods: {
    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")
    },

    //弹出动画
    popp: function () {
      //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({
        animPlus: animationPlus.export(),
        animCollect: animationcollect.export(),
        animTranspond: animationTranspond.export(),
        animInput: animationInput.export(),
      })
    },
    //收回动画
    takeback: function () {
      //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({
        animPlus: animationPlus.export(),
        animCollect: animationcollect.export(),
        animTranspond: animationTranspond.export(),
        animInput: animationInput.export(),
      })
    }


  }
})

index.wxml

<view>
  <image src="http://i10.hoopchina.com.cn/hupuapp/bbs/966/16313966/thread_16313966_20180726164538_s_65949_o_w1024_h1024_62044.jpg?x-oss-process=image/resize,w_800/format,jpg" class="img-style" animation="{{animCollect}}" bindtap="collect"></image>
  <image src="http://i10.hoopchina.com.cn/hupuapp/bbs/966/16313966/thread_16313966_20180726164538_s_65949_o_w1024_h1024_62044.jpg?x-oss-process=image/resize,w_800/format,jpg" class="img-style" animation="{{animTranspond}}" bindtap="transpond"></image>
  <image src="http://i10.hoopchina.com.cn/hupuapp/bbs/966/16313966/thread_16313966_20180726164538_s_65949_o_w1024_h1024_62044.jpg?x-oss-process=image/resize,w_800/format,jpg" class="img-style" animation="{{animInput}}" bindtap="input"></image>
  <image src="/images/ico/zhankai.png" class="img-plus-style" animation="{{animPlus}}" bindtap="plus"></image>
</view>

index.wxss

.img-plus-style {
  height: 150rpx;
  width: 150rpx;
  position: absolute;
  bottom: 250rpx;
  right: 50rpx;
  z-index: 100;
}
 
.img-style {
  height: 150rpx;
  width: 150rpx;
  position: absolute;
  bottom: 250rpx;
  right: 30rpx;
  opacity: 0;
}