Question

我正在尝试在HTML页面上演示排序算法，当数组的每个元素都按INPUT标记显示时。

我想显示两个元素的交换，通过动画如下所示。

我遇到了一些问题：

交换后，左侧元素向左跳，而不是保持新位置。
如何通过JavaScript启动动画，并阻止它自行运行？
并不总是这两个元素彼此相邻。有时，在它们之间，还有其他元素不应该交换。如果这两个元素彼此相距很远，则半径将非常大，因此动画最好是椭圆而不是圆。每个元素都有自己的id（arr [0]，arr [1]，...，arr [n]），因此可以获得需要交换的两个元素的位置。如何考虑他们在动画中的位置？

例如，如果需要交换i和j，它们的位置是：

value1 = document.getElementById("arr[" + i.toString() + "]");
value1.style.top
value1.style.left

value2 = document.getElementById("arr[" + j.toString() + "]");
value2.style.top
value2.style.left

@keyframes drawArc1 {
    0% {transform: rotate(0deg);}
//  100% {transform: rotate(180deg);}
	100% {transform: rotate(-180deg);}
}

@keyframes drawArc2 {
    0% {transform: rotate(0deg);}
//  100% {transform: rotate(-180deg);}
	100% {transform: rotate(180deg);}
}

@keyframes drawArc3 {
    0% {transform: rotate(180deg);}
    100% {transform: rotate(0deg);}
}

@keyframes drawArc4 {
    0% {transform: rotate(-180deg);}
    100% {transform: rotate(0deg);}
}

.wrapper1 {
    width: 100px;
    animation: drawArc1 3s;
    position: relative;
    left: 50px;
}

.inner1 {    
    display: inline-block;
    animation: drawArc2 3s;
}

.wrapper2 {
    width: 100px;
    animation: drawArc3 3s;
    position: relative;
    right: 50px;
}

.inner2 {    
    display: inline-block;
    animation: drawArc4 3s;
}

<br>
<br>
<br>
<div>
  <div class="wrapper1" style="display:inline-block">
      <div class="inner1"><input value = "123" style="width: 25px;"></div>
  </div>

  <div class="wrapper2" style="display:inline-block">
      <div class="inner2"><input value = "456" style="width: 25px;"></div>
  </div>
</div>

交换两个数组元素的动画

0 个答案: