圆形动画 小球在轨道上循环运动 点击按钮停止开始 在次点击 动画开始

圆形动画 小球在轨道上循环运动 点击按钮停止开始 在次点击 动画开始

<template>
  <div>
    <div id="lopp"></div>
    <div class="ball ball1" :class="{ stop: isAnimating }" @click="jump(1)">
      1
    </div>
    <div class="ball ball2" :class="{ stop: isAnimating }" @click="jump(2)">
      2
    </div>
    <div class="ball ball3" :class="{ stop: isAnimating }" @click="jump(3)">
      3
    </div>
    <div class="ball ball4" :class="{ stop: isAnimating }" @click="jump(4)">
      4
    </div>
    <div class="ball ball5" :class="{ stop: isAnimating }" @click="jump(5)">
      5
    </div>
    <div class="ball ball6" :class="{ stop: isAnimating }" @click="jump(6)">
      6
    </div>
    <div class="ball ball7" :class="{ stop: isAnimating }" @click="jump(7)">
      7
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isAnimating: false,
      }
    },
    mounted() {},
    methods: {
      jump() {
        this.isAnimating = !this.isAnimating
      },
    },
  }
</script>

<style lang="scss" scoped>
  @keyframes animX {
    0% {
      left: 30px;
    }
    100% {
      left: 320px;
    }
  }
  @keyframes animY {
    0% {
      top: 15px;
    }

    100% {
      top: 180px;
    }
  }
  @keyframes scale {
    0% {
      transform: scale(0.3);
    }
    10% {
      transform: scale(0.44);
    }
    20% {
      transform: scale(0.58);
    }
    30% {
      transform: scale(0.72);
    }
    40% {
      transform: scale(0.86);
    }
    50% {
      transform: scale(1);
    }
    60% {
      transform: scale(0.86);
    }
    70% {
      transform: scale(0.72);
    }
    80% {
      transform: scale(0.58);
    }
    90% {
      transform: scale(0.44);
    }
    100% {
      transform: scale(0.3);
    }
  }

  .ball {
    width: 50px;
    height: 50px;
    background-color: #f66;
    border-radius: 50%;
    position: absolute;
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,
      animY 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
      scale 20s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
  }

  .ball2 {
    animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -7.857s infinite alternate,
      animY 10s cubic-bezier(0.36, 0, 0.64, 1) -2.857s infinite alternate,
      scale 20s cubic-bezier(0.36, 0, 0.64, 1) -2.857s infinite alternate;
  }

  .ball3 {
    animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -10.714s infinite alternate,
      animY 10s cubic-bezier(0.36, 0, 0.64, 1) -5.714s infinite alternate,
      scale 20s cubic-bezier(0.36, 0, 0.64, 1) -5.714s infinite alternate;
  }

  .ball4 {
    animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -13.571s infinite alternate,
      animY 10s cubic-bezier(0.36, 0, 0.64, 1) -8.571s infinite alternate,
      scale 20s cubic-bezier(0.36, 0, 0.64, 1) -8.571s infinite alternate;
  }

  .ball5 {
    animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -16.428s infinite alternate,
      animY 10s cubic-bezier(0.36, 0, 0.64, 1) -11.428s infinite alternate,
      scale 20s cubic-bezier(0.36, 0, 0.64, 1) -11.428s infinite alternate;
  }

  .ball6 {
    animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -19.285s infinite alternate,
      animY 10s cubic-bezier(0.36, 0, 0.64, 1) -14.285s infinite alternate,
      scale 20s cubic-bezier(0.36, 0, 0.64, 1) -14.285s infinite alternate;
  }

  .ball7 {
    animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -22.142s infinite alternate,
      animY 10s cubic-bezier(0.36, 0, 0.64, 1) -17.142s infinite alternate,
      scale 20s cubic-bezier(0.36, 0, 0.64, 1) -17.142s infinite alternate;
  }
  .stop {
    animation-play-state: paused !important;
  }
  #lopp {
    width: 300px;
    height: 180px;
    border: 2px solid #999;
    border-radius: 50%;
    position: absolute;
    left: 50px;
    top: 50px;
  }
</style>