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

回答

相關問題