今天这篇教程也非常非常重要,是讲createjs与animateCC之间的主要通信方式。

此教程针对animateCC2015,如果你是animateCC2018或者苹果系统,请先阅读这篇文章。

createjs和animateCC通信呢我们主要用dispatchEvent,我们先来做个例子。

随便做一个动画(记住,还是新建元件做动画,不要在舞台上做动画,习惯一定要养成),在第一帧插入代码

4f515477a00550b8439f56484d848788.png

中间再插入代码

65c6addc209ff3fdb40ad5a9ee9751d7.png

末尾插入代码

a77fc1bc9ad1889af5314ff3f5b8b186.png

然后把动画在库里类链接。

a5be7f818f8405dad9f0910a1baacf6c.png

要搞清楚是在有动画的元件上类链接,这里元件1是动画,元件2是这颗球本身,弄不清楚的建元件的时候命名一下,或者双击进去看一下,有动画的时间轴上是有好几帧的。

类链接完了之后就发布。

把发布之后的js文件放入我们的项目。

1548e0119e2b6edf68a1501f2bdb009c.png

html代码↓

8b7124916a61e01c4f5e74b00f29bcd8.png

js代码↓

522b42ccda48068456e3af5b797afa8a.png

大家可以看到,点击播放以后 playing和complete事件会陆续侦听到,start事件由于在第一帧,所以一开始就会侦听到。

那如果需要传递参数怎么办呢?

很简单,抛出事件的时候直接抛出event,并在event上附上参数就可以了。

2c33df0334fd48c9234ca6d8a11fd5c1.png

3a24023bb966e8b6f8060355dcfefd74.png

上面这张图,我新建了一个event,并在event.data上赋值了一个object。

动画导出之后,我们再建一个项目,这次的html代码不变,js代码略有区别,大家看一下。

4beeca8ffbb5ee629ab25da7c3d5ba22.png(IDE背景色变了,不要在意,看代码)

大家可以看到,我新建了一个data对象,这个非常重要,不写的话触发的时候会报错。

可以看到代码中我们输出了an传出的参数。

最后我总结一下,animateCC和createjs的交互主要是靠事件的,也就是dispatchEvent和addEventListener,事件名可以随便定。这个事件用途非常广泛,比如你做了一个人物动画,他攻击完,跑完,跳完,你需要知道的时候,就可以抛出事件。

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐