TweenJS与图像

我有一个问题，动画从x = 0到x = 400的图像。我正在使用easeljs和tweenjs。这里是我的代码：的Javascript：TweenJS与图像

<!doctype html> 
<html> 
<head> 
    <title></title> 
    <script src="js/easeljs-0.4.1.min.js"></script> 
    <script src="js/tweenjs-0.2.0.min.js"></script> 

    <script type="text/javascript"> 
     function init() { 
      var canvas = document.getElementById("canvas"); 
      var stage = new Stage(canvas); 
      var img=new Image(); 

      img.src="http://exampledomain.com/exampleimage.jpg"; 
      img.onload = function(e){ 
       var title = new Bitmap(e.target); 
       stage.addChild(title); 
       stage.update(); 
      } 
      var tween = Tween.get(img).to({x:400},400).call(tweenComplete); 
     } 

     function tweenComplete(){ 
      alert('done'); 
     } 
    </script> 
</head> 
<body onload="init();"> 
    <canvas id="canvas" width="430" height="446"></canvas> 
</body> 
</html>

IM确保间开始，因为400毫秒打开警报，但图像doesn't移动一个像素之后。

来源

2012-07-30 Khazl

看起来像一些小事情正在阴谋破坏代码。

首先，有点竞争条件。您正确地创建位图，它在img.onload()添加到舞台上，但var tween = ...代码后马上可以随时运行，包括已创建位图前/添加。

尝试移动var tween = ...线到你img.onload功能的结束和改变get(img)到get(title)这样你就可以对位图，而不是图像的动作。

最后，您需要让Ticker移动，以便Stage更新。尝试这样的事情在init()末：

Ticker.addListener(stage);

[注意使用CreateJS的更高版本的任何人，你需要命名空间/前面加上“createjs。”到第二阶段，位图，北京时间等的用途]

来源

2012-09-18 19:58:35

你必须动画的位图，而不是它里面的图像。存储对您创建的位图实例的引用，然后设置它的x/y。

来源

2013-02-22 21:48:49 Lanny

设置瓷砖（图像）的初始x，y坐标，以便从中创建动画。使用图像对象标题作为得到（标题）尽管在渐变的get（IMG）的，还可以使用一个代码用于countinuous更新用 cretajs.Ticker.addEventListener（ '蜱'，函数（）{stage.update（）;}）

来源

2014-07-09 12:58:01 user3257581

回答

相关问题