<template>
  <div class="container">
    <div class="content">
      <span class="circle" v-for="(item,index) in list" :key="index"></span>
    </div>
  </div>
</template>

/* 400 / x = 2π / y, 我們的x是已知的，等下自己可以拿，這樣拿到了曲線中實際的x坐標 */
const z = 400 x / 400 * Math.PI*2

/* 這樣就拿到了曲線中的y坐標 */
y = Math.sin(z)

/* 真實寬度400/曲線寬度2π = 真實高度y/曲線中的y 通過對比得到真實的y點 */
Y = Math.sin(z) * 400 / Math.PI * 2 / 2

createActiveIndex(len = 6){
  return Array.from({length:len}, (v,k) => k)
},

changeIndex(){
   this.activeIndex = this.activeIndex.map( item => item === this.list.length - 1 ? 0 : item + 1)
},

function getCoordinate(width, count,  mag = 1){
      /* 通過總寬和個數(shù)計算出一個單個的寬 */
      const singleWidth = width / count
      /* 通過物理寬度/曲線周長計算出比率 */
      const ratio = 400 / Math.PI*2
      /* 上面實例代碼我們是動態(tài)一次計算一個，而現(xiàn)在是方法，我們應(yīng)該一次去拿到所有，所以我們返回一個數(shù)組對象記錄xy */
      let result = new Array(count).fill({})
      /* 遍歷總長度的dom個數(shù)，在數(shù)組中填充寬高 */
      result = result.map( (item,index) => {
          /* x的坐標 */
          const x = (index + 1) * singleWidth
          /* 定義變量z計算曲線中x的坐標 */
          const z = x / width * Math.PI*2
          /* 計算出真實的y的坐標 */
          let y = Math.sin(z) / 4  * 400 / Math.PI * 2 / 2    
          /* y還需要通過倍率改變曲線，得到最終我們想要的y */
          y = y / mag
          /* 寫入數(shù)組對象中 */
          return {x, y}
      })
      return result;
    } 

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
}
.content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 400px;
  height: 50px;
}
.container .circle{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #befbf7;
}

<template>
  <div class="container">
    <div class="content">
      <span class="circle" v-for="(item,index) in list" :key="index" :style="{transform: `translateY(${calcY(index)}px)`,backgroundColor: getCurrentBgColor(index)}"></span>
    </div>
     <div class="content" style="margin-top: 50px">
      <span class="circle" v-for="(item,index) in list" :key="index" :style="{transform: `translateY(${calcY(index)}px)`,backgroundColor: getRandomBgColor(index)}"></span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [], //定義總長度
      activeIndex: [], // 運動中的球的顏色
      interval: 300, //運動速度
      colors: { // 定義軌道顏色和高亮顏色
        active: '#2b88ff',
        basic: '#b6f3f7' 
      },
      cache: []
    };
  },
  methods: {
    init() {
      this.list = new Array(20).fill(0)
      this.start()
    },
    getCurrentBgColor(index){
      return this.activeIndex.includes(index) ? '#6e9cae' : this.getRandomColor()
    },
    getRandomBgColor(index){
      const color = this.activeIndex.includes(index) ? 'active' : 'basic'
      return this.colors[color]
    },
    start(){
      this.activeIndex = this.createActiveIndex()
      setInterval(() => this.changeIndex(), this.interval)
    },
    changeIndex(){
      this.activeIndex = this.activeIndex.map( item => item === this.list.length - 1 ? 0 : item + 1)
    },
    /* 生成需要動的球的個數(shù) */
    createActiveIndex(len = 6){
      return Array.from({length:len}, (v,k) => k)
    },
    getRandomColor(){
        return `#${Math.floor(Math.random() * 0xffffff) .toString(16)}`;
    },
    getCoordinate(width, count,  mag = 1){
      /* 通過總寬和個數(shù)計算出一個單個的寬 */
      const singleWidth = width / count
      /* 通過物理寬度/曲線周長計算出比率 */
      const ratio = 400 / Math.PI*2
      /* 上面實例代碼我們是動態(tài)一次計算一個，而現(xiàn)在是方法，我們應(yīng)該一次去拿到所有，所以我們返回一個數(shù)組對象記錄xy */
      let result = new Array(count).fill({})
      /* 遍歷總長度的dom個數(shù)，在數(shù)組中填充寬高 */
      result = result.map( (item,index) => {
          /* x的坐標 */
          const x = (index + 1) * singleWidth
          /* 定義變量z計算曲線中x的坐標 */
          const z = x / width * Math.PI*2
          /* 計算出真實的y的坐標 */
          let y = Math.sin(z) / 4  * 400 / Math.PI * 2 / 2    
          /* y還需要通過倍率改變曲線，得到最終我們想要的y */
          y = y / mag
          /* 寫入數(shù)組對象中 */
          return {x, y}
      })
      return result;
    } 
  },
  created(){
    this.cache = this.getCoordinate(400, 20, 1)
    this.init()
  },
  computed:{
    calcY(){
      return (index) => {
        /* 使用封裝的方法計算 */
        // return this.cache[index].y
        const x = (index + 1) * 20
        const z = x / 400 * Math.PI*2
        const y = Math.sin(z) * 400 / Math.PI * 2 / 2 / 4
        return y
      }
    }
  }
};
</script>