How to make animation out of canvas images in Kinetic.js?

How to make animation out of canvas images in Kinetic.js?

I have the following code that is supposed to be three frames of an
animation, how can I turn them into an animation in Kinetic.js? It's a hex
like pacman, that opens and closes its mouth. I have three canvas images,
as three frames, is there any built in function in Kinetic.js to do this?
or should I create one from scratch? after I made the sprite, how can I do
other animations like move it around, or rotate it, without breaking the
animation(the pacman should still open and close its mouth)?
pacMan1 = new Kinetic.Shape({
x: 15,
y: 13,
//fill: 'rgb(62, 53, 67)',
// a Kinetic.Canvas renderer is passed into the drawFunc function
drawFunc: function (canvas) {
var context = canvas.getContext();
// layer1/Compound Path
context.save();
context.beginPath();
// layer1/Compound Path/Path
context.moveTo(54.0, 12.8);
context.lineTo(34.2, 1.4);
context.bezierCurveTo(31.2, -0.3, 27.6, -0.3, 24.7, 1.4);
context.lineTo(4.9, 12.8);
context.bezierCurveTo(1.9, 14.5, 0.1, 17.7, 0.1, 21.0);
context.lineTo(0.1, 43.9);
context.bezierCurveTo(0.1, 47.3, 1.9, 50.5, 4.9, 52.1);
context.lineTo(24.7, 63.6);
context.bezierCurveTo(27.6, 65.3, 31.2, 65.3, 34.2, 63.6);
context.lineTo(54.0, 52.1);
context.bezierCurveTo(56.9, 50.5, 58.7, 47.3, 58.7, 43.9);
context.lineTo(58.7, 21.0);
context.bezierCurveTo(58.7, 17.7, 56.9, 14.5, 54.0, 12.8);
context.closePath();
// layer1/Compound Path/Path
context.moveTo(32.3, 10.8);
context.bezierCurveTo(30.7, 10.8, 29.5, 9.5, 29.5, 8.0);
context.bezierCurveTo(29.5, 6.4, 30.7, 5.1, 32.3, 5.1);
context.bezierCurveTo(33.9, 5.1, 35.1, 6.4, 35.1, 8.0);
context.bezierCurveTo(35.1, 9.5, 33.9, 10.8, 32.3, 10.8);
context.closePath();
context.fillStyle = "rgb(62, 53, 67)";
context.fill();
context.lineWidth = 0.3;
context.stroke();
canvas.fillStroke(this);
context.restore();
}
});
pacMan2 = new Kinetic.Shape({
x: 15,
y: 13,
//fill: 'rgb(62, 53, 67)',
// a Kinetic.Canvas renderer is passed into the drawFunc function
drawFunc: function (canvas) {
var context = canvas.getContext();
// layer1/Compound Path
context.save();
context.beginPath();
// layer1/Compound Path/Path
context.moveTo(29.1, 36.9);
context.bezierCurveTo(27.6, 36.0, 26.7, 34.5, 26.7, 32.8);
context.bezierCurveTo(26.7, 31.2, 27.6, 29.6, 29.1, 28.8);
context.lineTo(55.2, 13.7);
context.bezierCurveTo(54.8, 13.4, 54.4, 13.1, 54.0, 12.8);
context.lineTo(34.2, 1.4);
context.bezierCurveTo(31.2, -0.3, 27.6, -0.3, 24.7, 1.4);
context.lineTo(4.9, 12.8);
context.bezierCurveTo(1.9, 14.5, 0.1, 17.7, 0.1, 21.0);
context.lineTo(0.1, 43.9);
context.bezierCurveTo(0.1, 47.3, 1.9, 50.5, 4.9, 52.1);
context.lineTo(24.7, 63.6);
context.bezierCurveTo(27.6, 65.3, 31.2, 65.3, 34.2, 63.6);
context.lineTo(54.0, 52.1);
context.bezierCurveTo(54.2, 52.0, 54.5, 51.8, 54.7, 51.7);
context.lineTo(29.1, 36.9);
context.closePath();
// layer1/Compound Path/Path
context.moveTo(32.3, 5.1);
context.bezierCurveTo(33.9, 5.1, 35.1, 6.4, 35.1, 8.0);
context.bezierCurveTo(35.1, 9.5, 33.9, 10.8, 32.3, 10.8);
context.bezierCurveTo(30.7, 10.8, 29.5, 9.5, 29.5, 8.0);
context.bezierCurveTo(29.5, 6.4, 30.7, 5.1, 32.3, 5.1);
context.closePath();
context.fillStyle = "rgb(62, 53, 67)";
context.fill();
context.lineWidth = 0.3;
context.stroke();
canvas.fillStroke(this);
context.restore();
}
});
pacMan3 = new Kinetic.Shape({
x: 15,
y: 13,
//fill: 'rgb(62, 53, 67)',
// a Kinetic.Canvas renderer is passed into the drawFunc function
drawFunc: function (canvas) {
var context = canvas.getContext();
// layer1/Compound Path
context.save();
context.beginPath();
// layer1/Compound Path/Path
context.moveTo(32.0, 36.9);
context.bezierCurveTo(28.7, 36.0, 26.7, 34.5, 26.7,
32.8);
context.bezierCurveTo(26.7, 31.2, 28.7, 29.6, 32.0,
28.8);
context.lineTo(58.7, 22.0);
context.lineTo(58.7, 21.0);
context.bezierCurveTo(58.7, 17.7, 56.9, 14.5, 54.0,
12.8);
context.lineTo(34.2, 1.4);
context.bezierCurveTo(31.2, -0.3, 27.6, -0.3, 24.7, 1.4);
context.lineTo(4.9, 12.8);
context.bezierCurveTo(1.9, 14.5, 0.1, 17.7, 0.1, 21.0);
context.lineTo(0.1, 43.9);
context.bezierCurveTo(0.1, 47.3, 1.9, 50.5, 4.9, 52.1);
context.lineTo(24.7, 63.6);
context.bezierCurveTo(27.6, 65.3, 31.2, 65.3, 34.2,
63.6);
context.lineTo(54.0, 52.1);
context.bezierCurveTo(56.9, 50.5, 58.7, 47.3, 58.7,
43.9);
context.lineTo(58.7, 43.7);
context.lineTo(32.0, 36.9);
context.closePath();
// layer1/Compound Path/Path
context.moveTo(32.3, 5.1);
context.bezierCurveTo(33.9, 5.1, 35.1, 6.4, 35.1, 8.0);
context.bezierCurveTo(35.1, 9.5, 33.9, 10.8, 32.3, 10.8);
context.bezierCurveTo(30.7, 10.8, 29.5, 9.5, 29.5, 8.0);
context.bezierCurveTo(29.5, 6.4, 30.7, 5.1, 32.3, 5.1);
context.closePath();
context.fillStyle = "rgb(62, 53, 67)";
context.fill();
context.lineWidth = 0.3;
context.stroke();
canvas.fillStroke(this);
context.restore();
}
});