使用PhantomJS将CSS3动画渲染为一系列图像文件

Question

我以前没有使用过PhantomJS,但是想用它来为服务器端的PNG文件集渲染一些定制的CSS3动画序列,然后将它们连接成一个视频文件.看起来像PhantomJS有一个选项可以将当前页面状态呈现给图像.接下来,我发现-webkit-animation-play-state我希望可以帮助我暂停动画,渲染页面,然后转到下一帧并再次完成所有操作.

可能我应该用纯JS做这些动画,以便我可以更好地控制所有暂停/播放状态？我想我可以,例如,将矩形移动1px,然后渲染图像,然后再移动它,然后渲染等等.尽管CSS3动画效果更加清晰.

请告诉我如何以最好的方式或至少我可以开始的事情来更好地解决这个任务.谢谢!

Answer 1

您可以让phantomjs每隔几百毫秒拍摄一张快照,然后根据它制作css3动画.

一个示例脚本(snap.js)将是:

var system = require('system');
var page = new WebPage();

var address = system.args[1];
var wait = parseInt(system.args[2]);
var iterations = parseInt(system.args[3]);

page.open(address, function(){
    (function snap(i){
        if(i < iterations){
            window.setTimeout(function(){
                page.render('capture/'+i+'.png');
                snap(++i);
            }, wait);
        }
        else{
            phantom.exit();
        }
    })(0);
});

您可以使用phantomjs来调用脚本,如下所示:

./phantomjs snap.js http://google.com 500 5

它将每半秒拍摄一次谷歌主页的快照,共5次.

然后,如果你暂停你的动画,每半秒幻像将捕获这些点.