Render CSS3 animation as a sequence of image files

Question

I didn't work with PhantomJS before, but want to use it to render some custom-made CSS3 animated sequences to sets of PNG files on server side to join them into a single video file next. Seems like PhantomJS has an option to render current page state to an image. Next, I found -webkit-animation-play-state that I hope can help me to pause the animation, render the page, then go to next frame and do it all again.

May be I should do these animations with pure JS so that I can control all pause/play states better? I think I can, for example, move a rectangle by 1px, then render the image, then move it again, then render and so on. Though CSS3 animating is much cleaner to work with.

Please advise how I can better solve this task in the best way or at least something I can begin wth. Thanks!

Answer 1

You could have phantomjs take a snapshot every few hundred milliseconds and base your css3 animations around that.

An example script (snap.js) for this would be:

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

You would use phantomjs to call the script like this:

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

and it would take a snapshot of the google homepage every half a second, 5 times.

Then if you paused your animation every half a second phantomjs would capture those points.