Question

我有一个精灵，我试图在用户点击按钮时移动。例如，这是原始职位：

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

我唯一要改变的是页面上的y坐标并使用第二个动画地图。这是我的条件和点击事件处理程序：

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>

我没有使用帧，所以没有帧速率应该不是问题。我看过类似于我的其他问题，但给出的答案对我来说似乎没有用。

Answer 1

试试这个

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>

<强>代码

   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';

单击时移动图像

1 个答案: