使用PhantomJS将CSS3动画渲染为图像文件序列
使用PhantomJS将CSS3动画渲染为图像文件序列
提问于 2013-04-16 16:08:35
我以前没有使用过PhantomJS，但我想用它来渲染一些定制的CSS3动画序列到服务器端的几组PNG文件中，以便接下来将它们连接到一个视频文件中。看起来PhantomJS有一个将当前页面状态渲染到图像的选项。接下来，我找到了-webkit-animation-play-state，我希望它能帮助我暂停动画，渲染页面，然后转到下一帧，再做一次。
也许我应该用纯JS来做这些动画，这样我就可以更好地控制所有的暂停/播放状态？我想我可以，例如，将一个矩形移动1px，然后渲染图像，然后再次移动它，然后渲染，等等。虽然使用CSS3动画要干净得多。
请建议我如何以最好的方式更好地解决这项任务，或者至少是一些我可以开始的东西。谢谢!
回答 1
Stack Overflow用户
发布于 2013-04-16 18:12:06
你可以让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次拍摄一次google主页的快照。
如果你每隔半秒暂停一次动画，phantomjs就会捕捉到这些点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16031839
复制相关文章
相似问题
腾讯云开发者
