如何编写冒泡排序的动画演示

Posted 2021-04-02 CScript

Intro    

    我最近在看3b1b频道的线性代数教程的时候被其中的动画效果吸引，动画效果演示线性代数原理很直观，很容易理解。我Google得知Grant Sanderson （3b1b频道up主）原来是为了练习他的编程技能，开发了开源项目Manim（计算机图形软件）而做的视频。

    今天我将为大家分享我如何通过web简单制作的一个冒泡排序算法的动画效果，把排序内部逻辑直观的展示出来。首先展示下最后的效果：

 

动画效果实现

使用vite创建一个vue项目并安装依赖：

npm init @vitejs/app // 使用ESM构建vuejs项目的工具
npm install --save animejs // 动画库npm install --save jquery  // Jquery

Vue组件冒泡动画核心代码（提示：目前运行一次需要刷新页面，不然会有bug）：

<template> <div> <div> <input v-model="inputAry" placeholder="例如：1,3,5,3,6"> <button @click="initAry">生成列表</button> <button @click="playAnime">运行</button> </div> <div style="margin-top: 100px;"> <div class="list-item" v-for="item, index in items" :id="`c${index}`">{{item}} </div> </div> </div>
</template>
<script>import { defineComponent } from "vue";import anime from "animejs/lib/anime.es.js";import $ from "jquery";export default defineComponent({ data() { return { inputAry: "", items: [],      sortIndex: [],
 sortedCount: 0, }; }, methods: { sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); }, initAry() { $(".list-item").css("transform", "none"); this.items = this.inputAry.split(","); console.log(this.items); for (let index = 0; index < this.items.length; index++) { this.sortIndex[index] = index; } }, async playAnime() { this.sortIndex = []; for (let index = 0; index < this.items.length; index++) { this.sortIndex[index] = index; } await this.sleep(600); this.sort(); }, async sort() { for (let i = 0; i < this.items.length - 1; i++) { for ( let index = 0; index < this.items.length - this.sortedCount - 1; index++ ) { $(`#c${this.sortIndex[index]}`).css("border-color", "#FF8400"); $(`#c${this.sortIndex[index]}`).css("border-style", "dotted"); $(`#c${this.sortIndex[index + 1]}`).css("border-color", "#FF8400"); $(`#c${this.sortIndex[index + 1]}`).css("border-style", "dotted"); await this.sleep(500); if ( Number(this.items[this.sortIndex[index]]) > Number(this.items[this.sortIndex[index + 1]]) ) { // console.log(this.items[index], this.items[index + 1]); // console.log(`
以上是关于如何编写冒泡排序的动画演示的主要内容，如果未能解决你的问题，请参考以下文章
 
 视频+图文+动画详解冒泡排序
 三分钟快速记住冒泡排序算法！
 十大排序算法（程序员必会）
 算法——冒泡排序
 算法漫游指北（第七篇）:冒泡排序冒泡排序算法描述动图演示代码实现过程分析时间复杂度和选择排序算法描述动图演示代码实现过程分析时间复杂度
 算法漫游指北（第七篇）:冒泡排序冒泡排序算法描述动图演示代码实现过程分析时间复杂度和选择排序算法描述动图演示代码实现过程分析时间复杂度