AS3曲线动画

Question

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

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

图片的第一条曲线：

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

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

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

感谢您的任何建议。

Answer 1

在执行此类任务时，使用ENTER_FRAME提及的 @NicolasSiver 绝对是一个选项。 @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 ) );
}