完善元素交换动画

algorithm-visualization/assets/js/class.js

@@ -159,7 +159,13 @@ class Shape {
         fragment.customAttr = {
             nodes: nodes,
             type: "linkedList",
-            oneUnit: oneUnit
+            oneUnit: oneUnit,
+            gsapTimeline: gsap.timeline({
+                onComplete: function () {
+                    console.log("all done")
+                    // this.seek(0)
+                }
+            })
         }
         console.log(fragment.customAttr)
 
@@ -247,7 +253,7 @@ class VectorAnimation {
         var settings = this.workSpace.settings
         let linkedList = document.getElementById(id)
         let customAttr = linkedList.customAttr
-        console.log(customAttr)
+        // console.log(customAttr)
 
         var gList = linkedList.childNodes
 
@@ -256,18 +262,38 @@ class VectorAnimation {
 
         var deltaX = customAttr.oneUnit * (fromIndex - toIndex);
         var deltaY = customAttr.oneUnit * 1.08
+
         var animateSettings = {
             duration: 0.3,
             ease: "sine.inOut",
             delay: 0,
             yoyo: true,
         }
-        var tl = gsap.timeline({
+
-            onComplete: function () {
+        // 如果是相邻的两个元素交换，或者要交换的两个元素是同一个元素
-                console.log("success")
+        if (Math.abs(fromIndex - toIndex) <= 1) {
+            deltaY /= 2
+            animateSettings.duration = 0.25
         }
-        })
+
-        tl.add([
+        var that = this
+        let timeline = gsap.timeline({
+            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)
+                updateConsole(customAttr.nodes.toString().replaceAll(",",",&nbsp;&nbsp;&nbsp;"))
+
+                console.log("done")
+            }
+        }).add([
             gsap.to(from.childNodes[0], { ...animateSettings, fill: settings.colorMap["fill_focus"] }),
             gsap.to(to.childNodes[0], { ...animateSettings, fill: settings.colorMap["fill_focus"] }),
             gsap.to(from.childNodes[1], { ...animateSettings, fill: settings.colorMap["text_focus"] }),
@@ -284,8 +310,14 @@ class VectorAnimation {
             gsap.to(to.childNodes[1], { ...animateSettings, fill: settings.colorMap["text"] }),
             gsap.to(from.childNodes, { ...animateSettings, y: 0 }),
             gsap.to(to.childNodes, { ...animateSettings, y: 0 }),
+        ]).add([
+            // 恢复到动画之前的状态
+            gsap.to(from.childNodes, { ...animateSettings, duration: 0, x: 0, y: 0 }),
+            gsap.to(to.childNodes, { ...animateSettings, duration: 0, x: 0, y: 0 }),
         ])
 
+        customAttr.gsapTimeline.add(timeline)
+
         // // 首先元素的文字，为了保证用户看起来不闪烁，同时用transform临时交换元素的位置（用户看起来就像是没有交换一样，但是此时已经交换过了）
         // // 最后再把 transform 恢复即可
         // this.swapElementInnerHTML(from, to)

algorithm-visualization/assets/js/index.js

@@ -60,6 +60,11 @@ function initialize() {
 
 initialize()
 
+// 临时输出
+function updateConsole(data) {
+    document.getElementById("console-div").innerHTML = data
+}
+
 // 测试
 // shape.rectangle("ele1", {
 //     x: 10,
@@ -128,7 +133,8 @@ initialize()
 
 // shape.addNode("ele7", 300, 200, "20px", "20px", "文本")
 
-let fragment = shape.getLinkedListFragment("ele8", [1, 2, 3, 4, 5, 6, 7, 8, 9], { //
+var listData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
+let fragment = shape.getLinkedListFragment("ele8", listData, {
     x: 100,
     y: 100,
     width: "100px",
@@ -138,6 +144,12 @@ let fragment = shape.getLinkedListFragment("ele8", [1, 2, 3, 4, 5, 6, 7, 8, 9],
 console.log(fragment)
 workSpace.primaryCanvas.node().appendChild(fragment)
 document.getElementById("ele8").customAttr = fragment.customAttr
-setTimeout(() => {
+
-    animation.swapLinkedListItems("ele8", [0, 2])
+function getRandom(length) {
-}, 100)
+    return Math.floor(Math.random() * length);    // 可均衡获取 0 到 length-1 的随机整数。
+}
+
+for (let i = 0; i < 10; i++) {
+    var id = "ele8"
+    animation.swapLinkedListItems(id, [getRandom(listData.length), getRandom(listData.length)])
+}

algorithm-visualization/index.html

@@ -27,6 +27,7 @@
         <div id="container" class="container">
             正在加载中，请稍候...
         </div>
+        <div id="console-div"></div>
         <!-- <div class="header">
             <h1>小墨 | 算法可视化</h1>
         </div>