1
0
mirror of https://gitee.com/coder-xiaomo/algorithm-visualization synced 2025-01-10 19:58:18 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee

添加冒泡排序动画;添加.gitignore

This commit is contained in:
程序员小墨 2022-05-17 14:43:21 +08:00
parent a90d2db71c
commit cbd867e5f4
5 changed files with 88 additions and 9 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.VSCodeCounter

View File

@ -56,6 +56,11 @@ class Sort {
// console.log(Object.keys(array))
// console.log(array, index1, index2)
}
swapAnimation(id, index1, index2) {
if (index1 == index2)
return
animation.swapLinkedListItems(id, [index1, index2])
}
}
@ -123,14 +128,15 @@ class QuickSort extends Sort {
const pivot = left // 第一个元素的索引
let p = left + 1
for (let i = left + 1; i <= right; i++) {
animation.highlightLinkedListItems(customAttr.id, [i, pivot])
if (array[i] < array[pivot]) {
this.swap(array, i, p)
animation.swapLinkedListItems(customAttr.id, [i, p])
this.swapAnimation(customAttr.id, i, p)
p++
}
}
this.swap(array, pivot, p - 1)
animation.swapLinkedListItems(customAttr.id, [pivot, p - 1])
this.swapAnimation(customAttr.id, pivot, p - 1)
// 左、右分别排序(索引超限在 sort 内部进行处理,此处无需判断)
this.sortWithAnimation(customAttr, array, pivot, p - 2)
@ -179,6 +185,25 @@ class BubbleSort extends Sort {
return array
}
sortWithAnimation(customAttr, array) {
let sortTime = 0
let swapped
do {
swapped = false
for (let i = 1; i < array.length - sortTime; i++) {
animation.highlightLinkedListItems(customAttr.id, [i - 1, i])
if (array[i - 1] > array[i]) {
this.swap(array, i - 1, i)
this.swapAnimation(customAttr.id, i - 1, i)
swapped = true
}
}
sortTime++
} while (swapped)
return array
}
}

View File

@ -250,7 +250,8 @@ class VectorAnimation {
}
}
async swapLinkedListItems(id, [fromIndex, toIndex]) {
// 交换数组元素
swapLinkedListItems(id, [fromIndex, toIndex]) {
if (fromIndex < toIndex)
[fromIndex, toIndex] = [toIndex, fromIndex]
@ -268,7 +269,7 @@ class VectorAnimation {
var deltaY = customAttr.oneUnit * 1.08
var animateSettings = {
duration: 0.3,
duration: 0.2,
ease: "sine.inOut",
delay: 0,
yoyo: true,
@ -293,7 +294,7 @@ class VectorAnimation {
customAttr.nodes[toIndex] = tmp
// console.log(customAttr.nodes)
updateConsole(customAttr.nodes.toString().replaceAll(",", ",&nbsp;&nbsp;&nbsp;"))
updateConsole("当前数组为:" + customAttr.nodes.toString().replaceAll(",", ",&nbsp;&nbsp;&nbsp;"))
console.log("done")
}
@ -322,4 +323,42 @@ class VectorAnimation {
customAttr.gsapTimeline.add(timeline)
}
// 高亮数组元素
highlightLinkedListItems(id, indexList) {
let linkedList = document.getElementById(id)
let customAttr = linkedList.customAttr
var gList = linkedList.childNodes
if (typeof (indexList) === "number")
indexList = [indexList]
var hightlightElementList_fill = []
var hightlightElementList_text = []
for (let i = 0; i < indexList.length; i++) {
const index = indexList[i];
hightlightElementList_fill.push(gList[index].childNodes[0])
hightlightElementList_text.push(gList[index].childNodes[1])
}
var animateSettings = {
duration: 0.2,
ease: "sine.inOut",
delay: 0,
yoyo: true,
}
let timeline = gsap.timeline({
onComplete: function () {
console.log("hightlight done")
}
}).add([
gsap.to(hightlightElementList_fill, { ...animateSettings, fill: settings.colorMap["fill_focus"] }),
gsap.to(hightlightElementList_text, { ...animateSettings, fill: settings.colorMap["text_focus"] }),
]).add([
gsap.to(hightlightElementList_fill, { ...animateSettings, fill: settings.colorMap["fill"] }),
gsap.to(hightlightElementList_text, { ...animateSettings, fill: settings.colorMap["text"] }),
])
customAttr.gsapTimeline.add(timeline)
}
}

View File

@ -55,7 +55,17 @@ var shape = new Shape(workSpace)
var animation = new VectorAnimation(workSpace)
function initialize() {
var elementId = "ele8"
d3.select("#btn_qucikSort").on("click", function () {
// 快速排序算法
var sortAlgorithm = new QuickSort(animation)
sortAlgorithm.doSortWithAnimation(elementId)
})
d3.select("#btn_bubbleSort").on("click", function () {
// 冒泡排序算法
var sortAlgorithm = new BubbleSort(animation)
sortAlgorithm.doSortWithAnimation(elementId)
})
}
initialize()
@ -154,5 +164,3 @@ function getRandom(length) {
// animation.swapLinkedListItems(id, [getRandom(listData.length), getRandom(listData.length)])
// }
var sortAlgorithm = new QuickSort(animation)
sortAlgorithm.doSortWithAnimation("ele8")

View File

@ -27,7 +27,13 @@
<div id="container" class="container">
正在加载中,请稍候...
</div>
<div style="display: grid; place-items: center;">
<div id="control-div">
<button id="btn_qucikSort">快速排序</button>
<button id="btn_bubbleSort">冒泡排序</button>
</div>
<div id="console-div"></div>
</div>
<!-- <div class="header">
<h1>小墨 | 算法可视化</h1>
</div>