不能在函数中使用 GSAP 来定位舞台上的影片剪辑 (Animate CC)

Question

我是HTML5新手，我想知道是否有人能告诉我这里做错了什么。我希望能够使用GSAP来为我添加到舞台上的矢量文件设置动画，并且在调用函数时需要能够使其设置动画，但是当我尝试这样做时，我一直无法在null对象之间设置，但如果它没有封装在函数中，动画会播放得很好。

我创建了一个新的HTML5画布，看看问题是否持续存在，并且确实存在，所以我就是这么做的：

1. 在空白的HTML5画布上添加了一个符号，使其成为电影剪辑并画了一个圆圈。我调用了实例mcThing
2. 在时间轴中，我选择了第一帧并进入"操作">

3. 我写道：

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

4. 在Chrome中测试时，我发现不能在null对象之间。如果我将其引用为mcThing(省略this.，我会得到mcThing，而不是定义

5. 如果我删除了这个功能，只需要这个：

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

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

一些上下文：

从本质上讲，我目前拥有的是一个监听消息的WebSocket。当它接收到消息时，它会被添加到队列中。我正在尝试让它播放动画，并插入该消息中的文本。文本本身应该是可以的：我使用CreateJS在代码中实例化了一个文本，TweenMax在那里工作，问题是动画形状/绘图。我想我可以实例化代码中的所有形状，然后TweenMax就可以了，但我认为这不现实，因为动画/形状相当复杂，所以我试图瞄准舞台。动画将播放，停止，然后消息将从队列中删除，下一个消息将播放(相同的动画，不同的文本)。

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

Answer 1

这个问题是因为作用域。您的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);

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

希望能有所帮助！