2

我之前没有使用 PhantomJS，但想用它来渲染一些定制的 CSS3 动画序列到服务器端的 PNG 文件集，然后将它们加入到单个视频文件中。似乎 PhantomJS 可以选择将当前页面状态呈现为图像。接下来，我发现-webkit-animation-play-state我希望可以帮助我暂停动画，渲染页面，然后转到下一帧并再次执行所有操作。

也许我应该用纯 JS 来制作这些动画，以便更好地控制所有暂停/播放状态？我想我可以，例如，将一个矩形移动 1px，然后渲染图像，然后再次移动它，然后渲染等等。尽管 CSS3 动画使用起来要干净得多。

请告诉我如何以最好的方式更好地解决这个任务，或者至少我可以开始一些事情。谢谢！

4

1 回答 1

5

您可以让 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次。

然后，如果你每半秒暂停一次动画，phantomjs 就会捕捉到这些点。

于 2013-04-16T10:12:05.757 回答