Question

我正在试图弄清楚如何在JavaScript中为算法制作动画。但更一般的是，算法动画如何在其他语言（即Java）中完成？动画方面是否与算法逻辑分开？因此，举例来说，我的排序算法正常工作，我会有一个特殊的动画对象，它只是“观察”所讨论列表的状态以进行任何更改，或者是算法逻辑中通知动画对象的片段。修改列表，并调用必要的动画方法？

回到JavaScript，在可能的情况下，我已经实现了一个有效的霍夫曼编码算法;我唯一要做的就是制作一个附带的动画来演示它实际上在做什么。到目前为止，我的方法是使用d3库或jquery来制作动画，我唯一关注的是如何从我的算法代码中实际调用任何动画例程。

我意识到在JavaScript中不可能暂停执行一行代码（或等待）以完成动画。

有关解决此问题的最佳方法的任何建议吗？

修改例如，下面的代码构建了一个元素队列，我想为正在构建的队列设置动画：

var i,j;
var input = $('#input').val();
var input_array = input.split('');
for (i=0; i<input_array.length; i++){
    var temp = new Node(input_array[i], 1);
    for (j=i+1; j<input_array.length; j++) {
        if (input_array[j] == input_array[i]) {
            temp.frequency++;
            input_array.splice(j, 1);
         }
     }
     Queue.push(temp);
}

Answer 1

要在Javascript中模拟动画，您可以随时修改内联样式属性。

例如，要使div元素线性移动，您可能会执行以下操作：

var div = document.getElementById("some-div");

//This would normally be done elsewhere
div.style.position = "absolute";
div.style.width = "100px;"
div.style.height = "100px;"
div.style.left = "0px";

//Called every 30 milliseconds
function animate() {
    div.style.left = (parseInt(div.style.left,10) + 5) + "px";
    setTimeout(function() {
       animate();
    }, 30);
}
animate();

但是，我建议您考虑使用CSS3 transitions或animations，因为它将网站逻辑与演示文稿分开并使用更少的代码。

Answer 2

现在这是一个非常广泛的问题要回答，但我会尝试涵盖它的某些方面..

id就像从创建动画开始..

通常你会操纵某个元素的css，以使它看起来像是一个动画.. 我将玩firebug并增加div元素的宽度，如果我继续按住向上箭头，它将看起来像它的扩展..更进一步，复杂的动画涉及更多方面.. JQuery库提供了一些非常酷的动画开箱即用，如果我不打算使用jquery fadeOut（）函数，还有更高级的动画，这里是一个简单的淡出动画

var op = 1; // set opacity to one 

setInterval(function(){
  op = op - 0.1 // decrease the opacity by 0.1
  $('div').css({opacity : op  }); // selecting the element an apply the css on it 
},50) // over an interval of 50 ms

现在关于停止动画或暂停动画，没有什么是不可能的...... 与上一个动画这是一个例子.. http://jsfiddle.net/9SaKL/1/

可以做更多很酷的东西......但这只是一个蹩脚的例子（不要将它应用于现实生活中的项目大笑）

请注意，没有使用重新邀请轮子的动画可以使用基本的动画和组合在一起

I realize that its not really possible in JavaScript to pause execution at a line of code (or wait) for an animation to complete.

完全错了，链接基本上是为了一个功能完成然后做另一个... 清除间隔正在停止..

在现实生活中如果有时间并且有一些事情可以按时完成，那么你可以加速它或使它变慢或者你可以阻止它，（除了时间啊？）

Answer 3

无法在代码行暂停执行或等待动画完成。

是的，这是真的，因为JS中的动画是异步的。你有两个选择：

使您的算法也异步。这将是获取算法的当前状态并在一步之后返回状态的函数（和/或可能是步骤本身，因此可以选择匹配的单个动画）。然后每次都会从动画循环中调用步进函数。
维护一个动画队列（我猜你的库有辅助函数）。然后按原样运行算法，并在每个步骤中链接另一个在队列末尾执行的动画。运行算法后，启动动画队列。

选项＃1更优雅，但当然更复杂 - 所有循环都需要成为递归函数等。但是，如果您的算法是非终止的，或者选项＃2的动画队列将成为唯一的可能性太长了（和记忆吃）。

在Javascript中动画化算法

3 个答案: