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

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

animate-cc gsap html5-canvas html javascript

0

thefyrewire · 技术社区 · 8 年前

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

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

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

我写道:

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

在Chrome中测试时,我得到 不能在空对象之间 . 如果我引用它作为 mcThing (省略 this. 相反,我得到了 mcThing未定义 .
如果我删除该函数,只需执行以下操作:
```
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);

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