微信小程序—悬浮球弹出多个item

悬浮球弹出多个item这个效果应用的场景还是挺多的，小程序中实现比较简单，思路也比较清晰，所以写这个demo不为别的，只为熟悉一下小程序的动画操作。

效果：

体验：

实现要求：

1、悬浮球固定悬浮在屏幕右下角
2、点击悬浮球成扇形弹出多个items，并扇形排列（弹出效果由透明到不透明、由小到大）
3、item可点击
4、再次点击悬浮球或者点击屏幕空白位置，items沿着原路收回

实现思路：

1、利用position：fixed布局与z-index属性将悬浮球、多个item与透明遮罩重叠放至屏幕右下角，悬浮球处于最顶层
2、点击悬浮球后，各个item执行平移（提前计算好扇形尺寸）、缩放、透明度动画，遮罩执行缩放覆盖全屏动画
3、再次点击悬浮球或者透明遮罩后，各个item与遮罩执行原路返回动画
4、增加item点击事件

代码：

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isShow: false,
    animationContact: {},
    animationSave: {},
    animationShare: {},
    animationHome: {},
    animationModal: {},
    animationContainer:{}
  },
  contorlAnimate(){
    if(this.data.isShow){
      this.closeAnimate()
    }else{
      this.showAnimate()
    }
  },
  closeAnimate() {
    var animationModal = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-in'
    })
    animationModal.opacity(0).scale(0.0, 0.0).step()

    var animationContact = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-in'
    })
    animationContact.opacity(0).scale(0.0, 0.0).translateX(0).step()

    var animationSave = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-in'
    })
    animationSave.opacity(0).scale(0.0, 0.0).translateX(0).step()

    var animationShare = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-in'
    })
    animationShare.opacity(0).scale(0.0, 0.0).translateX(0).step()

    var animationHome = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-in'
    })
    animationHome.opacity(0).scale(0.0, 0.0).translateX(0).step()
    this.data.isShow = false
    this.setData({
      animationContact: animationContact.export(),
      animationSave: animationSave.export(),
      animationShare: animationShare.export(),
      animationHome: animationHome.export(),
      animationModal: animationModal.export()
    })
  },
  showAnimate() {
    var animationModal = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-out'
    })
    animationModal.opacity(0.0).scale(300, 300).step()
    var animationContact = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-out'
    })
    animationContact.opacity(1).scale(0.8, 0.8).translateX(-120).step()
    var animationSave = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-out'
    })
    animationSave.opacity(1).scale(0.8, 0.8).translateX(-104).translateY(-60).step()

    var animationShare = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-out'
    })
    animationShare.opacity(1).scale(0.8, 0.8).translateX(-60).translateY(-104).step()

    var animationHome = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-out'
    })
    animationHome.opacity(1).scale(0.8, 0.8).translateX(0).translateY(-120).step()
    this.data.isShow = true
    this.setData({
      animationContact: animationContact.export(),
      animationSave: animationSave.export(),
      animationShare: animationShare.export(),
      animationHome: animationHome.export(),
      animationModal: animationModal.export()
    })
  },
  clickHome(){
    wx.showToast({
      icon:"none",
      title: '点击了Home',
    })
  },
  clickShare() {
    wx.showToast({
      icon: "none",
      title: '点击了分享',
    })
  },
  clickContact() {
    wx.showToast({
      icon: "none",
      title: '点击了联系',
    })
  },
  clickSave() {
    wx.showToast({
      icon: "none",
      title: '点击了保存',
    })
  }
})

wxml

  <view id="modal" animation="{{animationModal}}" style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;border-radius:40rpx;opacity: 0;background:#000"  bindtap="closeAnimate">
  </view>
  <image id="contact" style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;opacity: 0;" src="./contact.png" animation="{{animationContact}}" bindtap="contact" bindtap="clickContact"></image>
  <image id="share" style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;opacity: 0;" src="./share.png" animation="{{animationShare}}" bindtap="clickShare"></image>
  <image id="save" style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;opacity: 0;" src="./save.png" animation="{{animationSave}}" bindtap="clickSave"></image>
  <image id="home" style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;opacity: 0;" src="./home.png" animation="{{animationHome}}" bindtap="clickHome"></image>
  <image style="position:fixed;width:80rpx;height:80rpx;z-index:1002;bottom: 100rpx;right: 30rpx;" src="./float.png" bindtap="contorlAnimate"></image>

扩展：

这是实现本类问题的思路，其他诸如悬浮弹出之类的都可参照此操作，主要还是对动画的使用。