2

我正在开发一个将显示一种动画幻灯片的应用程序。多台显示器将显示不同但相关的动画，由同一台计算机控制。

动画必须在不同的监视器上同步。也就是说，在监视器 A 上，一个元素将开始移动，而在监视器 B 上，一个完全不同的元素将开始移动，而且这些显然必须同时发生。

我的假设是我们将为每个监视器使用不同的浏览器窗口。

使用超时来让动画同时触发很容易——我将当前时间与预定时间进行比较，然后等待那个毫秒数。方法顶部的 console.log() 显示两个方法在 1 或 2 毫秒内触发。但是，动画不会同时发生。目测它，一个比另一个落后三分之一秒。哪个是第一个，哪个是最后一个是不一致的。（仅供参考，这些是 CSS3 动画。）

那么，如果 setTimeout 不这样做，还有哪些其他选项呢？

我应该转向 SVG/SMIL 吗？我们可以选择我们正在运行的浏览器。

或者，让浏览器窗口跨越所有显示器的简单解决方案是什么？

4

1 回答 1

1

我肯定会让您的浏览器窗口跨越所有显示器。这样一来，您的所有动画都在同一个线程上运行，您可以对所有内容进行计时。拥有两个不同的浏览器窗口会使计时成为一场噩梦。即使由于窗口非常宽，CSS 有点棘手，但从长远来看，恕我直言，你会更好。

根据您将要制作的 CSS3 动画类型，您可以使用诸如jQuery Transit之类的框架，它可以相当轻松地为您处理 CSS3 动画。这是一个例子：

//Fire off 1st and 4th object simultaneously
$("#object1, #object4").transition({ "y": 300 }, 5000, "in",function () {

    //Fire off 2nd/3rd object once 1st/4th have finished their thing
    $("#object2, #object3").transition({ "y": 500, "background-color": "red" });
});

JS 小提琴演示

于 2013-05-16T19:52:05.990 回答