我在一个应用程序将显示一种动画幻灯片。多个显示器将显示不同的,但相关的动画,由同一台计算机控制。
动画必须在不同的监视器之间同步。也就是说,在监视器A上,一个元素将开始移动,而在监视器B上,一个完全不同的元素将开始移动,这些显然必须同时发生。
我的假设是我们将为每个监视器使用不同的浏览器窗口。
很容易使用超时让动画在同一时刻触发——我将当前时间与计划时间进行比较,并等待该毫秒数。方法顶部的console.log()显示两个方法在1或2毫秒内触发。但是,动画不会同时发生。肉眼观察,其中一个比另一个落后了三分之一秒。哪个是第一个,哪个是最后一个是不一致的。(供参考,这些是CSS3动画。)
如果setTimeout不起作用,还有什么其他的选择呢?
我应该移动到SVG/SMIL吗?我们可以选择要运行的浏览器。
或者,简单的解决方案是让浏览器窗口跨越所有监视器吗?
我肯定会让您的浏览器窗口跨越所有显示器。这样,你所有的动画都在同一个线程上运行,你可以把时间安排得恰到好处。拥有两个不同的浏览器窗口将使时间安排成为一场噩梦。即使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" });
});