小程序菜单按钮向左弹出动画的实现

需求：实现一个点击菜单悬浮按钮，向左弹出子菜单的动画

最终效果展示：
开始状态.png

弹出状态.png

需求分析：这里一共有6个动画效果，其中包括：主菜单按钮、4个子菜单按钮（动画效果类似）、和背景动画效果。

主菜单按钮动画：实现.rotateZ从 Z 轴顺时针旋转一个角度动画
4个子菜单按钮动画：实现translate平移动画
背景图动画：实现translate平移动画、并且动态设置背景宽度

分析完了，下面是具体代码：
js代码：

// components/Menu/menu.js
var systemInfo = wx.getSystemInfoSync();
Component({
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      this.setData({
        systemInfo: systemInfo

      })
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    isShow: false,//是否已经弹出
    animMain: {},//旋转动画
    animImg: {},//原始影像动画
    animMedicalhistory: {},// 病历文书动画
    animInspection:{},//检验报告动画
    animcheck:{},//检查报告动画
    animItem:{},//图标背景动画
    animTime: 300,//动画持续时间，单位 ms
    timingFunction_start: 'ease-out',//动画的效果
    timingFunction_end: 'ease-out'//动画的效果


  },

  /**
   * 组件的方法列表
   */
  methods: {
    //点击弹出或者收起
    showOrHide: function () {
      if (this.data.isShow) {
        //缩回动画
        this.takeback();
        this.setData({
          isShow: false,

        })
      } else {
        //弹出动画
        this.popp();
        this.setData({
          isShow: true,

        })
      }
    },
    img: function () {
      this.triggerEvent("img")
      this.showOrHide()
    },
    medicalhistory: function () {
      this.triggerEvent("medicalhistory")
      this.showOrHide()
    },

    inspection: function () {
      this.triggerEvent("inspection")
      this.showOrHide()
    },
    check: function () {
      this.triggerEvent("check")
      this.showOrHide()
    },
    //弹出动画
    popp: function () {
      //main按钮顺时针旋转
      var animationMain = wx.createAnimation({
        duration: this.data.animTime,
        timingFunction: this.data.timingFunction_start
      })
      var animationMedicalhistory = wx.createAnimation({
        duration: this.data.animTime,
        timingFunction: this.data.timingFunction_start
      })
      var animationImg = wx.createAnimation({
        duration: this.data.animTime,
        timingFunction: this.data.timingFunction_start
      })

      var animationInspection = wx.createAnimation({
        duration: this.data.animTime,
        timingFunction: this.data.timingFunction_start
      })

      var animationCheck = wx.createAnimation({
        duration: this.data.animTime,
        timingFunction: this.data.timingFunction_start
      })

      var animationItem= wx.createAnimation({
        duration: this.data.animTime,
        timingFunction: this.data.timingFunction_start
      })


      animationMain.rotateZ(180).step();
      animationCheck.translate(-systemInfo.windowWidth /2, 0).step();
      animationInspection.translate(-systemInfo.windowWidth / 2.5, 0).step();
      animationMedicalhistory.translate(-systemInfo.windowWidth/3.5, 0).step();
      animationImg.translate(-systemInfo.windowWidth/6, 0).step();

      animationItem.translate(-systemInfo.windowWidth / 7, 0).width(systemInfo.windowWidth / 2).step();

      this.setData({
        animMain: animationMain.export(),
        animMedicalhistory: animationMedicalhistory.export(),
        animImg: animationImg.export(),
        animInspection: animationInspection.export(),
        animCheck: animationCheck.export(),
        animItem: animationItem.export(),



      })
    },
    //收回动画
    takeback: function () {
      //main按钮逆时针旋转
      var animationMain = wx.createAnimation({
        duration: this.data.animTime,
        timingFunction: this.data.timingFunction_end
      })
      var animationMedicalhistory = wx.createAnimation({
        duration: this.data.animTime,
        timingFunction: this.data.timingFunction_end
      })
      var animationImg = wx.createAnimation({
        duration: this.data.animTime,
        timingFunction: this.data.timingFunction_end
      })
      var animationInspection = wx.createAnimation({
        duration: this.data.animTime,
        timingFunction: this.data.timingFunction_end
      })
      var animationCheck = wx.createAnimation({
        duration: this.data.animTime,
        timingFunction: this.data.timingFunction_end
      })
      var animationItem = wx.createAnimation({
        duration: this.data.animTime,
        timingFunction: this.data.timingFunction_end
      })

      animationMain.rotateZ(0).step();
      animationCheck.translate(0, 0).rotateZ(0).step();
      animationInspection.translate(0, 0).rotateZ(0).step();
      animationMedicalhistory.translate(0, 0).rotateZ(0).step();
      animationImg.translate(0, 0).rotateZ(0).step();
      animationItem.translate(0, 0).width(-systemInfo.windowWidth).step();

      this.setData({
        animMain: animationMain.export(),
        animMedicalhistory: animationMedicalhistory.export(),
        animImg: animationImg.export(),
        animInspection: animationInspection.export(),
        animCheck: animationCheck.export(),
        animItem: animationItem.export(),

      })
    }
  },
  //解决滚动穿透问题
  myCatchTouch: function () {
    return
  }
})

wxml代码：

<view class="drawer_screen" bindtap="showOrHide" wx:if="{{isShow}}" catchtouchmove="myCatchTouch"></view>
<view>
  <view class="item-class"  animation="{{animItem}}"></view>

<image src="../../images/icon/imgdetails_icon_check@2x.png" class="buttom" animation="{{animCheck}}" bindtap="check"></image>
<image src="../../images/icon/imgdetails_icon_inspection@2x.png" class="buttom" animation="{{animInspection}}" bindtap="inspection"></image>
    <image src="../../images/icon/imgdetails_icon_medicalhistory@2x.png" class="buttom" animation="{{animMedicalhistory}}" bindtap="medicalhistory"></image>
    <image src="../../images/icon/imgdetails_icon_img@2x.png" class="buttom" animation="{{animImg}}" bindtap="img"></image>
    <image src="../../images/icon/imgdetails_icon_menu@2x.png" class="main-buttom" animation="{{animMain}}" bindtap="showOrHide"></image>
</view>

wxss代码：

/* components/menu/index.wxss */
.main-buttom{
  width: 100rpx;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom:220rpx;
  right: 60rpx;
  z-index: 1001;
}
.buttom{
  width: 50rpx;
  height: 50rpx;
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom:244rpx;
  right: 80rpx;
  z-index: 1001;
}
.drawer_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  z-index: 1000;
  background: #000;
  opacity: 0;
  overflow: hidden;
}
.drawer_box {
  overflow: hidden;
  position: fixed;
  z-index: 1001;
}


.item-class {
position: fixed;
bottom: 225rpx;
right: 60rpx;
background: white;
border: 1px solid white;
border-radius: 40rpx;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
height: 85rpx;

}

page页面调用：

  <menu hidden id='menu' 
       bind:img="onImg" 
       bind:medicalhistory="onMedicalhistory" 
       bind:inspection="onInspection"
       bind:check="onCheck" />
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 动画
    【Android 动画】 动画分类补间动画(Tween动画)帧动画(Frame 动画)属性动画(Property ...
    Rtia阅读 6,275评论 1赞 38
  • css动画
    看了很多视频、文章，最后却通通忘记了，别人的知识依旧是别人的，自己却什么都没获得。此系列文章旨在加深自己的印象，因...
    DCbryant阅读 1,904评论 0赞 4
  • 微信小程序菜单实现
    最近一个月都在做微信小程序，作为一个Android开发者，在这一个月很少写Android的代码，真是悲催，好在现在...
    Code4Android阅读 8,010评论 4赞 13
  • 少年如此多焦45
    前情回顾 我和乔东是通过前同事唐志军认识的，那时候我刚到现在这家公司，实在无法忍受租住的地下室了，就询问有没有认识...
    狗一样的污姐阅读 290评论 1赞 2
  • 015 Python语法之迭代器与生成器
    迭代器 可用于集合，列表，元组，字典，字符串 可以用于节省内存，用完一个数据就可以del掉 可循环的对象统称为：I...
    Luo_Luo阅读 263评论 0赞 0