TweenLite circular motion

Question

How to make objects move in circular motion from (startX,startY) to (destinationX, destinationY) with some aberration using TweenLite [actionscript 3 library]?

Answer 1

You should be able to set a circular motion using the CirclePath2D plugin and maybe offset the location a bit with an onUpdate function. The bit that sounds confusing is

from (startX,startY) to (destinationX, destinationY)

because if you move in a circular motion, at some point you end where you started from. if you start from one position and end in another, you might move on a curve, in which case you want to have a look at the BezierThroughPlugin.

Still, it's fairly straight forward to animate on a circle path with an onEnterFrame loop and you can easily change the circle into an oval for example or randomly offset the path a bit. Normally you'd need to convert from polar to cartesian coordinates:

 x = cos(angle) * radius
 y = sin(angle) * radius

but Point's polar() method already does that for you:

var speed:Number = 0;//how fast to move around the circle
var spread:Number = 20;//how far away from the centre

var b:Sprite = addChild(new Sprite()) as Sprite;
b.graphics.beginFill(0);
b.graphics.drawCircle(-3,-3,3);
b.graphics.endFill();
graphics.lineStyle(1,0xDEDEDE);



this.addEventListener(Event.ENTER_FRAME,update);
function update(event:Event):void{
    speed += .1;//update the 'angle' , .1 is the increment/speed at which b spins
    var distance:Number = spread + (Math.random() * 10 - 5);//spread + random 'aberration'
    var offset:Point = Point.polar(distance,speed);//convert from angle/radius to x,y

    b.x = mouseX + offset.x;
    b.y = mouseX + offset.y;

    graphics.lineTo(b.x,b.y);
}