AS3曲线动画

Question

我想在as3中创建曲线动画，如图所示。 但我不知道该怎么做。

我可以通过绘制api和curveTo方法创建动画的第一张和最后一张图片。 但不知道如何做图像之间！

图片上的第一条曲线：

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

我在绘图编辑器中尝试绘制状态。

有没有办法在使用绘图api之间创建状态？

谢谢你的建议。

Answer 1

正如@NicolasSiver提到的，使用ENTER_FRAME绝对是执行此类任务时的一个选项。 @Chadyk提到你的曲线确实看起来像是正弦曲线。 因此，您可以采用一种方法来实现一些灵活的调整：

设置一些变量，以便您可以调整曲线的半径，位置和大小：

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

然后使用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 );

然后它非常直接，我们将递增度数/旋转，应用基本触发函数求解y位置，并沿着x轴移动时跟随我们的原点：

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 ) );
}