Draw a line and animate it with TweenMax

[H4mm3R]

Hello folks,

 

I'm a newbie and I try to figure out how this framework works.
After I watched this site, I was amazed and wanted to learn more.
http://www.shanemielke.com/archives/usopen-sessions/

I'm a little bit stuck on a case.
So what I want to do is to draw 3 line that match the border of my window. That's fine, but In a second step, I'd like that this lines move without leaving the border.

 

Here is my little code for this part

// This is how I create the line	var lineArray = [];	for (var i = 0; i < 3; i++) {		var line = new PIXI.Graphics();		line.lineStyle(1, 0xf3a33f);				if(i == 0) {			line.moveTo(getRandomInt(0, window.innerWidth), window.innerHeight);			line.lineTo(getRandomInt(0, window.innerWidth), 0);		} else if(i == 1) {			line.moveTo(0, getRandomInt(0, window.innerHeight));			line.lineTo(window.innerWidth, getRandomInt(0, window.innerHeight));		} else {			line.moveTo(getRandomInt(0, window.innerWidth), window.innerHeight);			line.lineTo(window.innerWidth, getRandomInt(0, window.innerHeight));		}		line.endFill();		line.alpha = 0;		stage.addChild(line);		lineArray.push(line);	}// And this is how I want to animate itvar timeline = new TimelineMax({ paused: true });for (var i = lineArray.length - 1; i >= 0; i--) {	lineArray[i].beginFill(0xf3a33f, 1);	timeline.add(TweenMax.to( lineArray[i], .05, {alpha: 1}), 1.25);}timeline.play();

Is there anyway to do that with the timeline ?

 

Cheers guys !

[xerver]

I don't know anything about TweenMax, but changing the alpha value should achieve the "fade" effect you are going for.

[H4mm3R]

Hello,

 

thanks for the answer, but I'm not looking for the fade effect. But just to "move" the both point.
Like I set the moveTo(x, y) and lineTo(x, y) : I just want to move this.

 

Cheers !

[clement_cvL]

Hello,

 

You'll need to redraw your lines while you're moving your points.

You should draw your lines in the same PIXI.Graphics to improve performances too :

 

 

var isTweening = false;


var linesArray = [];

var lines = new PIXI.Graphics();

lines.lineStyle(1, 0xf3a33f);


for(...)

{

    var line;


    if(i == 0) {

        line = [

            new PIXI.Point(getRandomInt(0, window.innerWidth), window.innerHeight), 

            new PIXI.Point(getRandomInt(0, window.innerWidth), 0)

        ]


        lines.moveTo(line[0].x, line[0].y);

        lines.lineTo(line[1].x, line[1].y);

    } 

    else {

    }


    lines.endFill();

    linesArray.push(line)

} 


stage.addChild(lines);

 

And then... I would create a function to change values of the points of each line:

 

 

var tweenPoints = function()

{

    isTweening = true; 

    for(i= 0; i < linesArray.lenght; ++i)

    {

        // make your change on your linesArray[i] (which contains the two points of your line)

    }

};

 

and in an update function called each frame:

 

var update = function()

{

    if(isTweening) // if values of points for each lines are changing

    {

        lines.clear();


        for(i= 0; i < linesArray.lenght; ++i)

        {

            var newLine = linesArray[i];

            lines.moveTo(newLine[0].x, newLine[0].y);

            lines.lineTo(newLine[1].x, newLine[1].y);


            lines.endFill();

        }

    }

};

 

Hope it helps!

[alwayzambitious]

http://www.snorkl.tv/2011/04/tweenlite-meets-flash-drawing-api-for-animated-line-drawing-fun/

 

This may also help....