Canvas Element and masks

[Filemon88]

Hello

Recently I came across problem as I was trying to create animated mask and apply it to a jpeg that was inside movieclip

since I didn't want to make animation on timeline. I decided that I wil use createjs for creating the mask and GSAP to animate it. as seen below

var maskSize = 20;
var maskCont = new createjs.Container();
 for (var posY = 0; posY < 250; posY +=maskSize) {
        for (var posX = 0; posX < 300; posX +=maskSize) {
            var tile = new createjs.Shape(new createjs.Graphics().beginFill("#000000").drawRect(-1*maskSize/2,-1*maskSize/2,maskSize,maskSize));
            tile.x = posX + maskSize/2;
            tile.y = posY + maskSize/2;
            maskCont.addChild(tile);
        }
    }
for (var i = 0; i < maskCont.children.length; i++) {
        var maskSquare = maskCont.children;
        var targetx = Math.floor(Math.random()*100 - 50);
        var targety = Math.floor(Math.random()*80 - 30);
        var j = maskCont.children.length - i;
        mainTl.to(maskSquare, .5, {scaleX:0, scaleY:0, x:"+="+targetx, y:"+="+targety},((j*.002)+1.2) );
}

Can anyone tell me is it possible to apply the container with animation, maskCont to a movieclip on a stage, if not directly, is there somekind of workaround ?

Thanks for help in advance

[ClayUUID · Accepted solution]

Okay, first... why are you dragging GSAP into this? CreateJS already has a perfectly good tween library built right in.

Second, you apply a mask to a movieclip like this: this.myMovieClip.mask = this.myMaskSymbol;

Third, the mask must be a single shape symbol. You can't use a container full of individual shapes. That won't work.

Fourth (this was a fun discovery), if you're creating a complex mask shape in code, for some reason you can't use drawRect. You have to go bare metal with moveTo/Lineto/closePath.

Umm... fifth?... if you want to animate a complex mask shape like this, AFAIK the only way to do it is to redraw the mask from scratch every time it needs to change. So a tween library probably won't be of much use anyway. You'd have to do whatever animation you want to do within the drawing code itself.

Here's an example based loosely on your code:

function drawMask(shape, per) {

    var posX, posY;

    var maskStep = 20;

    var maskSize = maskStep * per;

    shape.graphics.clear();

    for (posY = 0; posY < 250; posY += maskStep) {

        for (posX = 0; posX < 300; posX += maskStep) {

            shape.graphics.moveTo(posX, posY).lineTo(posX + maskSize, posY).lineTo(posX + maskSize, posY + maskSize).lineTo(posX, posY + maskSize).closePath();

        }

    }

}

function animateMask() {

    percent += 0.05;

    if (percent >= 1) {

        percent = 1;

        createjs.Ticker.removeEventListener("tick", animateMask);

    }

    drawMask(tiles, percent);

}

var percent = 0;

var tiles = new createjs.Shape();

drawMask(tiles, percent);

this.myThingIWantToBeMasked.mask = tiles;

createjs.Ticker.addEventListener("tick", animateMask);