添加插入排序算法；添加弹出弹回动画；动画参数放入全局settings变量中；添加debugMode全局变量

src/assets/js/class.js

@@ -162,7 +162,7 @@ class Shape {
             type: "linkedList",
             oneUnit: oneUnit,
             gsapTimeline: gsap.timeline({
-                onStart:function(){
+                onStart: function () {
                     consoleClear()
                 },
                 onComplete: function () {
@@ -202,6 +202,16 @@ class Shape {
                 .attr("height", oneUnit)
                 .attr("fill", settings.colorMap["text"])
 
+            // 调试用
+            if (settings.debugMode)
+                _g.append("svg:text")
+                    .text(i)
+                    .attr("x", i * oneUnit)
+                    .attr("y", oneUnit)
+                    .attr("width", oneUnit)
+                    .attr("height", oneUnit)
+                    .attr("fill", "black")
+
             // console.log(text.node().getBBox())
             // console.log(text.node().getBoundingClientRect())
         }
@@ -272,17 +282,12 @@ class VectorAnimation {
         var deltaX = customAttr.oneUnit * (fromIndex - toIndex);
         var deltaY = customAttr.oneUnit * 1.08
 
-        var animateSettings = {
-            duration: 0.2,
-            ease: "sine.inOut",
-            delay: 0,
-            yoyo: true,
-        }
+        var animateSettings = this.workSpace.settings.animation.getConf()
 
         // 如果是相邻的两个元素交换，或者要交换的两个元素是同一个元素
         if (Math.abs(fromIndex - toIndex) <= 1) {
             deltaY /= 2
-            animateSettings.duration = 0.25
+            animateSettings.duration *= 0.6
         }
 
         var that = this
@@ -333,13 +338,6 @@ class VectorAnimation {
         customAttr.gsapTimeline.add(timeline)
     }
 
-    // 比较数组元素
-    compareLinkedListItems(id, index1, index2) {
-        this.highlightLinkedListItems(id, [index1, index2], function () {
-            consoleLog(`比较索引为 ${index1} 和 ${index2} 的两个元素`)
-        })
-    }
-
     // 高亮数组元素
     highlightLinkedListItems(id, indexList, onStartCallback) {
         let linkedList = document.getElementById(id)
@@ -356,12 +354,7 @@ class VectorAnimation {
             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,
-        }
+        var animateSettings = this.workSpace.settings.animation.getConf()
 
         let timeline = gsap.timeline({
             onStart: function () {
@@ -371,7 +364,7 @@ class VectorAnimation {
                     onStartCallback()
             },
             onComplete: function () {
-                console.log("hightlight done")
+                console.log("animation done (hightlight)")
             }
         }).add([
             gsap.to(hightlightElementList_fill, { ...animateSettings, fill: settings.colorMap["fill_focus"] }),
@@ -383,4 +376,92 @@ class VectorAnimation {
 
         customAttr.gsapTimeline.add(timeline)
     }
+
+    // 比较数组元素
+    compareLinkedListItems(id, index1, index2) {
+        this.highlightLinkedListItems(id, [index1, index2], function () {
+            consoleLog(`比较索引为 ${index1} 和 ${index2} 的两个元素`)
+        })
+    }
+
+    // 弹出/弹回 数组元素
+    popupLinkedListItems(id, index, { popBack = false }) {
+        let linkedList = document.getElementById(id)
+        let customAttr = linkedList.customAttr
+        var gList = linkedList.childNodes
+
+        var deltaY = customAttr.oneUnit * 1.08
+        if (popBack) deltaY = 0
+
+        let timeline = gsap.timeline({
+            onStart: function () {
+                if (typeof (onStartCallback) === "function")
+                    onStartCallback()
+            },
+            onComplete: function () {
+                console.log("animation done (popup)")
+            }
+        }).add([
+            gsap.to(gList[index], { ...this.workSpace.settings.animation.getConf(), y: deltaY }),
+        ])
+
+        customAttr.gsapTimeline.add(timeline)
+    }
+
+    // 交换相邻数组元素位置（仅在水平方向呼唤，垂直方向不做调整） 【fromIndex 是y方向上突出的元素】
+    exchangeLinkedListItems(id, fromIndex, toIndex) {
+        if (fromIndex < toIndex)
+            [fromIndex, toIndex] = [toIndex, fromIndex]
+
+        var settings = this.workSpace.settings
+        let linkedList = document.getElementById(id)
+        let customAttr = linkedList.customAttr
+        // console.log(customAttr)
+
+        var gList = linkedList.childNodes
+
+        let from = gList[fromIndex]
+        let to = gList[toIndex]
+
+        var deltaX = customAttr.oneUnit * (fromIndex - toIndex);
+
+        var deltaY = customAttr.oneUnit * 1.08 // 要跟 popupLinkedListItems 函数中的 deltaY 完全一致
+        var animateSettings = settings.animation.getConf()
+
+        var that = this
+        let timeline = gsap.timeline({
+            onStart: function () {
+                displayCurrentArray(customAttr.nodes)
+
+                consoleLog(`交换索引为 ${fromIndex} 和 ${toIndex} 的两个元素`)
+            },
+            onComplete: function () {
+                // 交换DOM元素中的值
+                that.swapElementInnerHTML(from.childNodes[1], to.childNodes[1])
+
+                // 交换 node 列表中的值
+                // console.log(customAttr.nodes)
+                let tmp = customAttr.nodes[fromIndex]
+                customAttr.nodes[fromIndex] = customAttr.nodes[toIndex]
+                customAttr.nodes[toIndex] = tmp
+
+                // console.log(customAttr.nodes)
+                displayCurrentArray(customAttr.nodes)
+
+                console.log("animation done (exchange)")
+            }
+        }).add([
+            gsap.to(from.childNodes, { ...animateSettings, x: -deltaX }),
+            gsap.to(to.childNodes, { ...animateSettings, x: deltaX }),
+        ]).add([
+            // 恢复到动画之前的状态
+            gsap.to(from.childNodes, { ...animateSettings, duration: 0, x: 0 }),
+            gsap.to(to.childNodes, { ...animateSettings, duration: 0, x: 0 }),
+            // 由于两个元素一个突出，一个不突出，所以还要交换两个y
+            gsap.to(from, { ...animateSettings, duration: 0, y: 0 }),
+            gsap.to(to, { ...animateSettings, duration: 0, y: deltaY }),
+        ])
+
+        customAttr.gsapTimeline.add(timeline)
+    }
 }