代码之家  ›  专栏  ›  技术社区  ›  thefyrewire

无法使用GSAP inside函数在舞台上定位MovieClip(动画CC)

  •  0
  • thefyrewire  · 技术社区  · 8 年前

    我是HTML5的新手,我想知道是否有人能告诉我我做错了什么。我希望能够使用GSAP为我要添加到舞台上的向量文件设置动画,并且需要能够在调用函数时使其设置动画,但是当我尝试这样做时,我会不断得到 ,但如果它没有包装在函数中,动画就会播放得很好。

    我创建了一个新的HTML5画布,以查看问题是否仍然存在,它确实存在,因此我做了以下工作:

    1. 在空白HTML5画布上添加了一个符号,将其制作成电影剪辑并画了一个圆。我调用了实例
    2. 在时间表中,我选择了第一帧并开始行动
    3. 我写道:

      function playAnimation() {
          TweenMax.to(this.mcThing, 3, {y:500});
      }
      playAnimation();
      
    4. 在Chrome中测试时,我得到 不能在空对象之间 . 如果我引用它作为 mcThing (省略 this. 相反,我得到了 mcThing未定义 .
    5. 如果我删除该函数,只需执行以下操作:

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

      它打得很好,但现在我不能在需要的时候叫它。

    一些背景:

    基本上,我现在拥有的是一个WebSocket,用于侦听消息。当它收到消息时,会将其添加到队列中。我试图让它播放一个动画,并插入该消息的文本。文本本身应该没问题:我用CreateJS在代码中实例化了一个文本,TweenMax在那里工作,问题是设置形状/图形的动画。我想我可以实例化代码中的所有形状,然后TweenMax可以工作,但我不认为这是现实的,因为动画/形状相当复杂,所以我试图针对舞台。动画将播放,停止,然后消息将从队列中删除,并播放下一个消息(相同的动画,不同的文本)。

    我认为这是一个范围问题,但我不确定我需要改变什么。任何帮助都将不胜感激!

    1 回复  |  直到 8 年前
        1
  •  0
  •   Lanny    8 年前

    这个问题是因为范围。你的 playAnimation 不适用于 this ,因此在全局范围内称为。

    试试这个:

    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);
    

    一旦你了解了范围界定的工作原理,有很多方法可以绕过它。我推荐第一种方法。