이미지가있는 TweenJS

x = 0에서 x = 400까지 이미지를 움직이게하는 데 문제가 있습니다. 나는 easeljs와 tweenjs를 사용하고있다. 400ms 일이 경고를 열리지 만 이미지가 나던 하나 개의 픽셀을 이동 한 후하기 때문에, 트윈가 시작이미지가있는 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>

메신저 있는지 : 자바 스크립트 : 여기 내 코드입니다.

출처

2012-07-30 Khazl

코드를 깨기 위해 음모를 꾸미는 것 같습니다.

먼저 경쟁 조건이 약간 있습니다. img.onload()에서 Bitmap을 적절히 만들고 추가 할 수 있지만 을 포함하여 언제든지 실행할 수있는 바로 다음에 var tween = ... 코드가 추가됩니다. 비트 맵이 생성/추가되었습니다.

당신의 img.onload 함수의 마지막에 var tween = ... 라인을 이동 시도하고 그래서 당신은 대신 이미지의 비트 맵에 따라 행동 할 수있는 get(img)get(title)에 변경합니다.

마지막으로 스테이지가 업데이트되도록 티커를 가져와야합니다. init()의 마지막에 이런 일을 시도해보십시오

Ticker.addListener(stage);

[CreateJS 이후 버전을 사용하는 모든 사용자를위한 참고/앞에 추가 네임 스페이스해야합니다 "createjs을." 스테이지, 비트 맵, 티커 등의 용도로]

출처

2012-09-18 19:58:35

내부의 이미지가 아닌 비트 맵을 애니메이션화해야합니다. 생성 한 Bitmap 인스턴스에 대한 참조를 저장하고 그 대신에 x/y를 설정하십시오.

출처

2013-02-22 21:48:49 Lanny

은 애니메이션을 적용 할 위치의 타일 (이미지)의 초기 x, y 좌표를 설정합니다. 트위닝의 get (img)에도 불구하고 이미지 객체 제목을 get (title)으로 사용하고 연속적인 업데이트를 위해 티커를 사용합니다. cretajs.Ticker.addEventListener ('tick', function() {stage.update();})

출처

2014-07-09 12:58:01 user3257581

이미지가있는 TweenJS

답변

관련 문제