2017-11-13 17 views
0

저는 HTML5 초보자이며 누군가 내가 잘못하고있는 것을 말할 수 있는지 궁금합니다. 무대에 추가 할 벡터 파일에 애니메이션을 적용하고 함수를 호출 할 때 애니메이트 할 수 있어야 할 필요가있는 GSAP를 사용하고 싶습니다. 그러나이 작업을 수행하려고 할 때 나는 계속 트윅 할 수 없습니다 트윈 할 수 없습니다 null 객체 인이 있지만 함수에 래핑되지 않은 경우 애니메이션이 잘 재생됩니다. 문제가 지속하면 스테이지에서 무비 클립을 대상으로 GSAP 함수를 사용할 수 없습니다. (애니메이션 CC)

내가 볼 수있는 새로운 HTML5 캔버스를 생성하고했다, 그래서 이것은 내가 무슨 짓을 :

  1. 추가 빈 HTML5 캔버스에 상징, 그것을 무비 클립을 만들었고을 끌었다 원.

    function playAnimation() { 
        TweenMax.to(this.mcThing, 3, {y:500}); 
    } 
    playAnimation(); 
    
  2. 크롬에서 테스트 할 때, 나는 가 null 객체를 트위닝 할 수 얻을 : 나는 타임 라인에서 mcThing
  3. 인스턴스라고, 나는 내가 쓴 첫 번째 프레임을 선택하고
  4. 작업

  5. 로 갔다
    . 나는 this.을 생략 ( mcThing로 참조하면 내가 대신 mcThing이을 정의되지 않은 얻을
  6. 을 나는 다음 기능을 제거하고 만있는 경우이 :.

    TweenMax.to(this.mcThing, 3, {y:500}); 
    

    이 잘 재생하지만, 지금은 할 수 내가 필요할 때 '는 t는 전화

일부 컨텍스트 :.

를 기본적으로 내가 현재 have는 메시지를 수신하는 WebSocket입니다. 메시지를 받으면 대기열에 추가됩니다. 애니메이션을 재생하고 해당 메시지의 텍스트를 삽입하려고합니다. 텍스트 자체는 괜찮습니다. CreateJS를 사용하여 코드의 텍스트를 인스턴스화하고 TweenMax가 작동하지만 문제는 모양/그림을 움직이는 것입니다. 코드 자체에서 모든 모양을 인스턴스화 할 수 있고 TweenMax가 작동한다고 가정하지만 애니메이션/모양이 상당히 복잡하므로 현실적이라고 생각하지 않습니다. 그래서 무대를 목표로 삼고 있습니다. 애니메이션이 재생되고 중지되면 메시지가 대기열에서 제거되고 다음 메시지가 재생됩니다 (동일한 애니메이션, 다른 텍스트).

이것이 범위 문제라고 생각하지만 변경해야 할 부분이 무엇인지 잘 모르겠습니다. 어떤 도움을 많이 주시면 감사하겠습니다!

답변

0

이 문제는 범위 때문에 발생합니다. playAnimationthis으로 범위가 지정되지 않으므로 전역 범위에서 호출됩니다.

this.playAnimation = function() { 
    TweenMax.to(this.mcThing, 3, {y:500}); 
} 
this.playAnimation(); 

mcThing 기능 범위로도 작동합니다 퍼팅 :

var thing = this.mcThing; 
function playAnimation() { 
    TweenMax.to(thing, 3, {y:500}); 
} 
playAnimation(); 

을 또는 당신은 범위 함수는 자신을 호출 할 수

이보십시오!

function playAnimation() { 
    TweenMax.to(this.mcThing, 3, {y:500}); 
} 
playAnimation.call(this); 

범위 지정 작동 방법을 이해하면 여러 가지 방법으로 해결할 수 있습니다. 나는 첫 번째 접근법을 추천한다.

희망 하시겠습니까?