Javascript Kinetic.js根本就不是tweening图像，不确定我做错了什么_Javascript_Jquery_Image_Kineticjs_Tween

Javascript Kinetic.js根本就不是tweening图像，不确定我做错了什么

javascript jquery image

Javascript Kinetic.js根本就不是tweening图像，不确定我做错了什么,javascript,jquery,image,kineticjs,tween,Javascript,Jquery,Image,Kineticjs,Tween,我只是想让图像慢慢地移到左边。据我所知，代码是正确的。图像加载，但没有运动 var stage = new Kinetic.Stage({ container: 'container', width: 1920, height: 1080 }); var layer = new Kinetic.Layer(); var imageObj = new Image(); imageObj.onload = function() { var spa

我只是想让图像慢慢地移到左边。据我所知，代码是正确的。图像加载，但没有运动

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

  var imageObj = new Image();
  imageObj.onload = function() {
    var space = new Kinetic.Image({
      x: 0,
      y: 0,
      image: imageObj,
      width: 1920,
      height: 1080
    });

    // add the shape to the layer
    layer.add(space);

    // add the layer to the stage
    stage.add(layer);
  };
  imageObj.src = 'http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png';
  var tween = new Kinetic.Tween({
    node: space, 
    duration: 20,
    x: -1920,
    y: 0,
  });
  setTimeout(function() {
    tween.play();
  }, 2000);

代码的一些范围问题：

确保空格和tween变量在范围内（当前隐藏在.onload中）
因为图像加载需要时间，所以应该在imageObj.onload中启动tween

下面是代码和演示：


原型
正文{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：500px；
高度：500px；
}
$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：500，
身高：500
});
var layer=新的动能层（）；
阶段。添加（层）；
var空间；
变量吐温；
var imageObj=新图像（）；
imageObj.onload=函数（）{
空间=新的动力学图像({
x:0,，
y:0，
图片：imageObj，
宽度：1920/4，
高度：1080/4
});
//将形状添加到层中
层。添加（空格）；
//将层添加到舞台
阶段。添加（层）；
吐温=新的动力学({
节点：空间，
持续时间：20，
x:-1920/4，
y:0，
});
setTimeout（函数（）{tween.play（）；}，2000）；
};
imageObj.src=http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png';
}); // end$（函数（）{}）；

太棒了。。。谢谢，它总是范围>>。。。现在我要做的就是找出如何在chrome中使翻译流畅。你不会碰巧知道怎么做吧？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>

<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:500px;
  height:500px;
}
</style>        
<script>
$(function(){

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

    var space;
    var tween;

    var imageObj = new Image();
    imageObj.onload = function() {
      space = new Kinetic.Image({
        x: 0,
        y: 0,
        image: imageObj,
        width: 1920/4,
        height: 1080/4
      });

      // add the shape to the layer
      layer.add(space);

      // add the layer to the stage
      stage.add(layer);

      tween = new Kinetic.Tween({
        node: space, 
        duration: 20,
        x: -1920/4,
        y: 0,
      });

      setTimeout(function(){ tween.play(); }, 2000);

    };
    imageObj.src = 'http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png';

}); // end $(function(){});

</script>       
</head>
<body>
    <div id="container"></div>
</body>
</html>