transform 东皇圈圈

<template>
  <div class="area">
    <div
      v-for="(item, i) in list"
      :key="i"
      class="ball"
      :style="item.style"
      @mouseover="handleMouseover"
      @mouseout="handleMouseout"
      @click="handleClick(item)"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: null,
    };
  },
  mounted() {
    this.list = this.addBall(4, 36);
  },
  methods: {
    handleClick(item) {
      console.log(item);
    },
    handleMouseover() {
      this.list.forEach((item) => {
        item.style.animationPlayState = "paused";
      });
    },
    handleMouseout() {
      this.list.forEach((item) => {
        item.style.animationPlayState = "running";
      });
    },
    addBall(num, runtime) {
      const arr = [];
      for (let i = 0; i < num; i++) {
        const xTime = Number.parseFloat(runtime / 4);
        const yTime = Number.parseFloat(runtime / num);
        const animation = `
          animateX ${runtime / 2}s cubic-bezier(0.36, 0, 0.64, 1) -${xTime + i * yTime}s infinite alternate,
          animateY ${runtime / 2}s cubic-bezier(0.36, 0, 0.64, 1) -${i * yTime}s infinite alternate,
          scale ${runtime}s cubic-bezier(0.36, 0, 0.64, 1) -${i * yTime}s infinite alternate
        `;
        arr.push({
          style: {
            animation,
            animationPlayState: "running",
          },
        });
      }
      return arr;
    },
  },
};
</script>

<style scoped>
.area {
  width: 1024px;
  height: 768px;
  position: relative;
}
.area .ball {
  width: 60px;
  height: 60px;
  position: absolute;
  border-radius: 60px;
  background-image: linear-gradient(to top, blue, lightblue);
  box-shadow: 0px 0px 20px #0000ff5c;
}
</style>

<style>
/* 动画 */

/* 在X轴上的移动 */
@keyframes animateX {
  from {
    left: 100px;
  }
  to {
    left: 864px;
  }
}
/* 在轴上Y的移动 */
@keyframes animateY {
  from {
    top: 100px;
  }
  to {
    top: 608px;
  }
}
/* 对球进行放大和缩小在视觉上进行远近的模拟 */
@keyframes scale {
  0% {
    transform: scale(0.7, 0.7);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(0.7, 0.7);
  }
}
@keyframes translateX {
  0% {
    transform: translateX(0);
  }
  37.5% {
    transform: translateX(0);
  }
  62.5% {
    transform: translateX(-176px);
  }
  100% {
    transform: translateX(-176px);
  }
}
</style>