无法使用 GSAP 内部函数来定位舞台上的 MovieClip (Animate CC)

Question

我是 HTML5 新手，我想知道是否有人可以告诉我我做错了什么。我希望能够使用 GSAP 为我添加到舞台上的矢量文件制作动画，并且在我调用函数时需要能够使它动画化，但是当我尝试这样做时，我不断得到 不能补间一个空对象，但如果它没有包装在一个函数中，动画就可以正常播放。

我创建了一个新的 HTML5 canvas 来查看问题是否仍然存在并且它确实存在，所以这就是我所做的：

在空白处添加符号HTML5canvas，使其成为影片剪辑并画了一个圆圈。我调用了实例 mcThing
在时间轴中，我选择了第一帧并进入动作

我写了：

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

在 Chrome 中测试时，我得到 无法补间空对象 。如果我将其引用为 mcThing（省略 this. 我反而得到 mcThing is not defined.
如果我然后删除该功能并且只有这个：
```
TweenMax.to(this.mcThing, 3, {y:500});
```
很好玩，现在需要调用的时候调用不了

一些上下文：

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

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

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

一旦您了解了范围界定的工作原理，就有很多方法可以解决这个问题。我推荐第一种方法。

希望对您有所帮助！

无法使用 GSAP 内部函数来定位舞台上的 MovieClip (Animate CC)

Can't use GSAP inside function to target MovieClip on stage (Animate CC)

html

javascript

html5-canvas

gsap

animate-cc