How to make animation out of canvas images in kineticjs?

1
2
3
4
5
6
7
8

var stage = new Kinetic.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight
});

var layer = new Kinetic.Layer();
stage.add(layer);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var imageObj = new Image();
imageObj.onload = function() {
    var image = new Kinetic.Image({
        x: 0,
        y: 0,
        image: imageObj,
        width: 100,
        height: 100
    });
    layer.add(image);
    layer.draw();
};
imageObj.src = 'image.jpg';

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

var amplitude = 100;
var period = 2000;
var anim = new Kinetic.Tween({
    node: image,
    x: function(p) {
        return amplitude * Math.sin(p * 2 * Math.PI / period);
    },
    duration: period,
    easing: Kinetic.Easings.Linear,
    onFinish: function() {
        anim.play();
    }
});
anim.play();