Animate CC Canvas And Masking

时间:2017-11-02 15:41:12

标签: html5-canvas adobe easeljs animate-cc image-masking

I am wondering how I would be able to use animated shapes inside a movieclip that would be acting as a mask?

In my Animate CC canvas file I have an instance (stripeMask) that should mask the below instance called mapAnim.

stripeMask contains shapes that are animating in.

So when the function maskIn is called, the playhead should move to the first frame inside the stripeMask clip (the one after frame 0) and animate the mask like so:

 function maskIn(){
 //maskAnimation to reveal image below
 stripeMask.gotoAndPlay(1);
 }

I love AnimateCC and it works great, but the need for creating more complex and animated masks is there and it's not easy to achieve unless I am missing something here.

Thanks!

1 个答案:

答案 0 :(得分:1)

目前,您只能将Shape用作mask,而不能使用Container或MovieClip。

如果你想做一些更复杂的事情,你可以使用像AlphaMaskFilter这样的东西,但它必须被缓存,然后每次掩码或内容更新时更新:

something.filters = [new createjs.AlphaMaskFilter(stripeMask)];
something cache(0,0,w,h);
// On Change
something.updateCache(); // Re-caches

AlphaMaskFilter的源必须是图像,因此您可以指向位图图像,也可以指向已缓存的蒙版剪辑的cacheCanvas。请注意,如果掩码更改,则还必须更新缓存。

这无疑是一个很棒的解决方案,我们正在研究其他选择。