I'm trying to set a duration on my animation I.E. I want it to take 1.5 seconds for this to move, however, it's still making the transition instantly.
Javascript
var shift1 = new Image();
shift1.onload = function(){
var firstShift = new Kinetic.Sprite({
x: 600,
y: 221,
scaleX: 0.45,
scaleY: 0.47,
image: shift1,
animation: 'pos1',
animations: {
pos1: [1, 1, 89, 220],
pos2: [105, 1, 100, 220]
},
frameRate: 5,
frameIndex: 0
});
image_layer.add(firstShift);
firstShift.start();
document.getElementById('play').addEventListener('click', function(){
firstShift.animation('pos2').setY(198).frameRate(1).start();
});
};
shift1.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
HTML
<div id="controls">
<input type="button" id="play" value="Play">
<input type="button" id="pause" value="Pause">
<input type="button" id="reset" value="Stop">
<input type="button" id="reverse" value="< < <">
<input type="button" id="seek" value="> > >">
</div>
I actually figured it out and am going to be posting my answer for anyone else who would may encounter this problem.
var shift1 = new Image();
shift1.onload = function(){
var firstShift = new Kinetic.Sprite({
x: 600,
y: 221,
scaleX: 0.45,
scaleY: 0.47,
image: shift1,
animation: 'pos1',
animations: {
pos1: [1, 1, 89, 220],
pos2: [105, 1, 100, 220]
},
});
image_layer.add(firstShift);
document.getElementById('play').addEventListener('click', function(){
firstShift.animation('pos1').start();
tween = new Kinetic.Tween({
node: firstShift,
duration: 1,
onFinish: function(){
firstShift.animation('pos2');
}
});
tween.play();
};
shift1.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';