CODEWITHSUNDEEP
javascriptjqueryspritekineticjs
user2144857
user2144857

Reputation:

Moving an image on click

I have a sprite that I'm trying to move when a user clicks a button. For instance, here's the original position: 

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

The only thing I'm trying to change is the y coordinate on the page and use the second animation map. Here is my conditional and the click event handler: 

if(firstShift.animation() == 'pos2'){
    firstShift = new Kinetic.Sprite({
        x: 600,
        y: 200
    });
    play();
}
isPaused = false;

document.getElementById('play').addEventListener('click', function(){
    firstShift.transitionTo({
        y: 100,
        duration: 3
    });
});

HTML

   <div id="schematic_background"></div> 
    <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'm not using frames so not having a frame rate shouldn't be an issue. I've looked at other questions similar to mine, but the answers given don't seem to be working for me.

Upvotes: 0

Views: 104

Answers (1)

Rahul Kumar
Rahul Kumar

Reputation: 524

Try This

Jsfiddle Demo

HTML

<div id="container"></div> 
<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>

Code

   var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });
  var layer = new Kinetic.Layer();

  var imageObj = new Image();
  imageObj.onload = function() {
    var firstShift  = new Kinetic.Sprite({
      x: 250,
      y: 40,

      image: imageObj,
      animation: 'pos1',
      animations: {
        pos1: [
             2,2,32,32
                  ],
        pos2: [
          // x, y, width, height (3 frames)
          -2,-20,64,64,

        ]
      }
    });


    layer.add(firstShift );


    stage.add(layer);

    // start sprite animation
   firstShift .start();

    var frameCount = 0;



    document.getElementById('play').addEventListener('click', function() {
      firstShift .animation('pos2');
    }, false);
  };
  imageObj.src = 'http://cdn.sstatic.net/stackoverflow/img/favicon.ico';

Upvotes: 1

Related Questions