Question

我正在开发一款可以显示动画幻灯片的app。多台显示器将显示由同一台计算机控制的不同但相关的动画。

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

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

很容易使用超时来同时启动动画 - 我将当前时间与预定时间进行比较，并等待该毫秒数。方法顶部的console.log（）显示两种方法在彼此的1或2毫秒内触发。但是，动画不会同时发生。眼球盯着它，一个人落后三分之一秒。哪个是第一个，哪个是最后一个是不一致的。（仅供参考，这些是CSS3动画。）

那么，如果setTimeout不会这样做，还有其他选择吗？

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

或者，是否有一个浏览器窗口跨越所有监视器的简单解决方案？

Answer 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" });
});

在不同的浏览器窗口中同步动画

1 个答案:

JS Fiddle Demo