1

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

回到 JavaScript，在可能的情况下，我已经实现了一个有效的 Huffman 编码算法；我唯一想做的就是制作一个伴随动画来展示它实际在做什么。到目前为止，我的方法是使用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);
}
4

3 回答 3

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过渡或动画，因为它将站点逻辑与演示文稿分开并且使用的代码要少得多。

于 2013-01-24T22:51:11.560 回答
1

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

我喜欢从动画的创作开始..

通常你会操纵某个元素的 css 使它看起来像一个动画。 .. 此外，复杂的动画涉及更多方面.. 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.

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

在现实生活中，如果有时间并且可以按时完成某些事情，那么您可以加快速度或减慢速度，或者您可以停止它，（时间除外，嗯？）

于 2013-01-24T23:05:57.353 回答
0

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

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

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

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

于 2013-01-25T11:15:23.123 回答