今天博主想要和大家分享如何實現動態圖，經常在其他博主的文章中可以看到各式各樣的動圖，搜索一下“網上冒泡排序的動圖怎么制作出來”可以看到，很迷，全是告訴冒泡排序的原理，以及動圖解析，并沒有告知動圖是如何制作的：

---

結合博主目前正在學習的前端技術，博主想到了一個辦法可以去制作排序的動圖解析過程，雖然不是最好的辦法，但相信可以給大家提供一些思路，可以在自己擅長的領域，使用自己的方式制作出來。

---

首先就是搭建出來頁面中所有的柱形圖，HTML和CSS代碼如下

代碼示例

HTML代碼：

<!-- 搭建基本的柱形圖 --><!-- 最外面包裹全部柱形的盒子box --><div class="box"><!-- 每一個柱形內包含一個數字 --><span class="list_1">6</span><span class="list_2">4</span><span class="list_3">9</span><span class="list_4">5</span><span class="list_5">2</span><span class="list_6">7</span></div>

CSS代碼：

<style>.box {position: relative;height: 200px;/* 給外面最大的盒子一個背景色 */background-color: #000;}.list_1,.list_2,.list_3,.list_4,.list_5,.list_6 {/* 給所有小的柱形圖定位 */position: absolute;bottom: 25px;/* 讓文字居中顯示 */text-align: center;/* 給柱形圖設置形狀 */display: block;width: 40px;background-color: aquamarine;}.list_1 {/* 給每個柱形圖定位到對應的位置，并且給它們不同的高度用以區分 */left: 10px;height: 60px;}.list_2 {/* 給每個柱形圖定位到對應的位置，并且給它們不同的高度用以區分 */left: 60px;height: 40px;}.list_3 {/* 給每個柱形圖定位到對應的位置，并且給它們不同的高度用以區分 */left: 110px;height: 90px;}.list_4 {/* 給每個柱形圖定位到對應的位置，并且給它們不同的高度用以區分 */left: 160px;height: 50px;}.list_5 {/* 給每個柱形圖定位到對應的位置，并且給它們不同的高度用以區分 */left: 210px;height: 20px;}.list_6 {/* 給每個柱形圖定位到對應的位置，并且給它們不同的高度用以區分 */left: 260px;height: 70px;}</style>

最終會出來這樣子一個效果：

?基本的形狀出來了，接下來就可以進行排序，排序動圖這里例子是采用冒泡排序去展示

代碼示例

script代碼：

<!-- 引入jQuery --><script src="./js/jquery.min.js"></script> <!-- 定時器制作排序動畫 --><script>$(function() {// console.log($('.box'));// 第一輪冒泡，相鄰的兩個數字比較，數字較大的往右邊移動// 4、6比較//500毫秒后執行變色操作setTimeout(function() {$('.list_1').css('background', '#fff') //4變色$('.list_2').css('background', '#fff') //6變色}, 500)//1000毫秒后執行位置比較移動setTimeout(function() {$('.list_1').stop().animate({left: 60 //6移動到4的位置}, 100)$('.list_2').stop().animate({left: 10 //4移動到6的位置}, 100)}, 1000)//6、9比較//1500毫秒后執行變色操作setTimeout(function() {$('.list_2').css('background', '') //4褪色$('.list_3').css('background', '#fff') //9變色}, 1500)//2000毫秒后執行位置比較移動setTimeout(function() {$('.list_1').stop().animate({left: 60 //6不換位置}, 100)$('.list_3').stop().animate({left: 110 //9不換位置}, 100)}, 2000)//9、5比較//2500毫秒后執行變色操作setTimeout(function() {$('.list_1').css('background', '') //6褪色$('.list_4').css('background', '#fff') //5變色}, 2500)//3000毫秒后執行位置比較移動setTimeout(function() {$('.list_3').stop().animate({left: 160 //9移動到5的位置}, 100)$('.list_4').stop().animate({left: 110 //5移動到9的位置}, 100)}, 3000)//9、2比較//3500毫秒后執行變色操作setTimeout(function() {$('.list_4').css('background', '') //5褪色$('.list_5').css('background', '#fff') //2變色}, 3500)//4000毫秒后執行位置比較移動setTimeout(function() {$('.list_3').stop().animate({left: 210 //9移動到2的位置}, 100)$('.list_5').stop().animate({left: 160 //2移動到9的位置}, 100)}, 4000)//9、7比較//4500毫秒后執行變色操作setTimeout(function() {$('.list_5').css('background', '') //2褪色$('.list_6').css('background', '#fff') //7變色}, 4500)//5000毫秒后執行位置比較移動setTimeout(function() {$('.list_3').stop().animate({left: 260 //9移動到7的位置}, 100)$('.list_6').stop().animate({left: 210 //7移動到9的位置}, 100)}, 5000)//已排好序的9//5500毫秒后執行變色操作確定9的位置不變了setTimeout(function() {$('.list_6').css('background', '') //2褪色$('.list_3').css('background', 'red') //9變色}, 5500)})</script>

最終效果動圖展示：

以上博主就只是展示一輪排序，后面的排序過程，通過學習其中的原理也就知道是如何制作的了，收藏起來回去研究研究，相信你可以做出來自己想要實現的動圖動畫的

---

總結

以上是生活随笔為你收集整理的网上经常看到的冒泡排序的动图如何制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。