AS3 curved line animation

Question

I want to create animation of curved line in as3 as it is shown in image. But I have not idea how to do this.

I can create first and last picture of animation by drawing api and curveTo method. But dont know how to do images between!

First curve on picture:

line.graphics.moveTo(10, 200);
line.graphics.lineStyle(15);
line.graphics.curveTo(210,0,410, 200);

I tryed draw states between in drawing editor.

Is there any way to create states between by using drawing api ?

Thanks for any advice.

If you don't mind, I would like to give you hints: for animation you will need time and Timer or ENTER_FRAME. And for complex curves, you will need 2 moving dots as start and finish, rules to predefine path for example Bezier, and bunch of helper methods to find points on path. — Nicolas Siver
Seams like the line in your example image is following a sine curve! Can't you use this to get your points? ;) — chadiik

Bennett Yeates Bennett Yeates · Accepted Answer · 2014-03-04T20:43:07

As @NicolasSiver mentioned using an ENTER_FRAME is definitely an option when performing this kind of task. @Chadyk mentioned your curve does look like it's the sine curve. So one way you could implement this for some flexible adjustments:

Set some variables so you can adjust things like, radius, position, and size of the curve:

private var origin:Point;
private var degree:int;
private var curveSize:int = 25; //radius
private var curveLength:int = 200;

Then set it up with an ENTER_FRAME:

//set the origin to whatever you like, i'm choosing the center from the center of the curve
origin = new Point( stage.stageWidth/2 - curveLength/2, stage.stageHeight/2 );

//create our sprite     
sprite = new Sprite();
sprite.graphics.lineStyle( 2, 0xFF0000 );
sprite.graphics.moveTo( origin.x, origin.y );
addChild(sprite);

//add the listener      
addEventListener( Event.ENTER_FRAME, drawCurve );

Then it's pretty straight forward, we will increment the degree/rotation, apply the basic trig function solving for the y position, and follow our origin as it moves along the x axis:

public function drawCurve( e:Event ):void {
    if ( origin.x >= origin.x + curveLength ) {
        removeEventListener( Event.ENTER_FRAME, drawCurve );
        return;
    }
    degree += 2;
    sprite.graphics.lineTo( ++origin.x, origin.y + curveSize * Math.sin( degree * Math.PI / 180 ) );
}

AS3 curved line animation

1 Answers