【数据结构与算法】Vue3实现选择排序动画效果与原理拆解

<template>
  <div class="selection-sort-animation">
    <div class="animation-container">
      <div
        v-for="(item, index) in items"
        :key="index"
        class="animation-bar"
        :style="{ height: `${item}px`, backgroundColor: getColor(index) }"
      ></div>
    </div>
    <button @click="startAnimation">排序</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [...Array(10)].map(() => Math.random() * 100), // 初始化10个高度随机的方块
      sortedItems: [], // 用于存放排序后的方块数组
      sorting: false, // 是否正在进行排序
    };
  },
  methods: {
    getColor(index) {
      return this.sortedItems.includes(index) ? 'green' : 'blue';
    },
    startAnimation() {
      if (this.sorting) return; // 如果已经在排序，则不再执行
      this.sorting = true;
      this.sortedItems = []; // 重置排序记录数组
      const sort = () => {
        if (this.items.length <= 1) {
          this.sorting = false;
          return;
        }
        const index = this.findSmallest(this.items);
        const smallest = this.items.splice(index, 1)[0];
        this.sortedItems.push(index);
        setTimeout(() => {
          this.items.unshift(smallest);
          sort();
        }, 1000);
      };
      sort();
    },
    findSmallest(arr) {
      let smallest = arr[0];
      let index = 0;
      for (let i = 1; i < arr.length; i++) {
        if (arr[i] < smallest) {
          smallest = arr[i];
          index = i;
        }
      }
      return index;
    },
  },
};
</script>
 
<style scoped>
.animation-container {
  display: flex;
}
.animation-bar {
  margin: 5px;
  transition: all 0.5s;
}
</style>

这段代码实现了选择排序动画的初始化和触发。它首先在data中初始化了一个包含随机高度的方块数组，并定义了一个空数组来记录已排序的方块。在methods中定义了getColor方法来根据方块是否已排序改变颜色，以及startAnimation方法来开始排序动画过程。startAnimation方法中定义了选择排序的逻辑，并通过setTimeout模拟动画效果。这个例子展示了如何在Vue中结合JavaScript实现动画效果，并且是排序算法可视化教学的一个很好的起点。