webapp的菜单栏动效实现，vue+gsap

• 菜单栏的动效实现，仿美团app效果。
• 用的是gsap
• 明天的目标：学做Animated svg 研究了一下，复杂的动效实现还得靠ae，大致流程：sketch/ai->AE->Bodymovin导出lottie的json文件
  了解图标规范，用Lottie动画让图标落地
  动效设计合集-图标篇
  lottiefiles
  找完资料发现这块应该属于ui/ue/产品经理==？心里有点蛋蛋的疑惑。
  
  动效长这样↓↓↓
  注意点是白色的外圈会比黄色的图标部分移动的更高一点。
  

跳动小图标的完整代码如下

<template>
  <div class="circle-box">
    <div ref="circleBorder" class="circle-border" />
    <div class="circle-conver" />
    <div ref="circleMain" class="circle-main" :class="isActive===1?'':'white'">
      <van-icon :name="isActive===1?iconActive:icon" color="#212526" />
    </div>
  </div>
</template>

<script>
import gsap from 'gsap'
export default {
  name: 'CircleIcon',
  props: {
    iconActive: {
      type: String,
      default: 'chat'
    },
    icon: {
      type: String,
      default: 'chat-o'
    },
    isActive: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
    }
  },
  watch: {
    isActive: {
      handler(val, oldVal) {
        if (val === 1) {
          this.up()
        } else if (val === -1) {
          this.down()
        }
      }
      // immediate: true,
      // deep: true
    }
  },
  mounted() {
    this.isActive === 1 ? this.up() : 0
  },
  methods: {
    up() {
      const { circleBorder, circleMain } = this.$refs
      gsap.to(circleBorder, { duration: 0.6, y: -22, ease: 'back.out(4)' })
      gsap.to(circleMain, { duration: 0.6, y: -14, ease: 'back.out(2)' })
    },
    down() {
      const { circleBorder, circleMain } = this.$refs
      gsap.to(circleBorder, { duration: 0.2, y: 0, ease: 'power1.in' })
      gsap.to(circleMain, { duration: 0.2, y: 0, ease: 'power1.in' })
    }
  }
}
</script>

<style lang="scss" scoped>
$max:80px;
.circle{
  &-box{
    position: relative;
    width: $max;
    height: $max + 8px;
  }
  &-border{
    width: $max;
    height: $max;
    box-sizing: border-box;
    border-radius: 50%;
    background: white;
    display: block;
    border: 1px solid #262626;
    position: relative;
    top: 0;
  }
  &-conver{
    display: block;
    background: white;
    width: $max +4;
    height: $max + 1;
    position: absolute;
    top:-1px;
    left: -2px;
    z-index: 22;
  }
  &-main{
    width: $max - $padding-xs;
    height: $max - $padding-xs;
    position: absolute;
    top: 0;
    left: $padding-xxs;
    border-radius: 50%;
    background: #F9DD68;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    &.white{
      background: white;
    }
  }
}
</style>