Hi,
I need some help on easing animation with animated drawing line. Here my problem:
The user will define the target for the end point of animated drawing line. I did a simple code but it did not turn up well. Whenever I click the end point and I start start button to start the animated drawing line it will not stop at the extract end point.
public function init():void
{
canDrawing.addEventListener(MouseEvent.CLICK, insertCircle);
}
public function insertCircle(evt:MouseEvent):void
{
shape.graphics.beginFill(0x00ffee);
shape.graphics.drawCircle(canDrawing.mouseX, canDrawing.mouseY, 5);
canDrawing.rawChildren.addChild(shape);
getMouseX = canDrawing.mouseX;
getMouseY = canDrawing.mouseY;
}
public function start():void
{
//When the user click button this function start to run
line.graphics.lineStyle(2, 0x00ffee);
line.graphics.moveTo(stX, stY);
addEventListener(Event.ENTER_FRAME, animation1);
}
public function animation1(evt:Event):void
{
var fromX:Number;
var fromY:Number;
var targetX:Number = getMouseX;
var targetY:Number = getMouseY;
var easing:Number = 0.2;
var dy:Number;
var dx:Number;
var vx:Number;
var vy:Number;
fromX = stX;
fromY = stY;
dx = targetX - fromX;
dy = targetY - fromY;
vx = dx * easing;
vy = dx * easing;
stX += vx;
stY += vy;
line.graphics.lineTo(stX, stY);
line.graphics.moveTo(fromX, fromY);
canDrawing.rawChildren.addChild(line);
lblX.text = dx.toString();
lblY.text = dy.toString();
}