CODEWITHSUNDEEP
c#javascriptactionscript-3
Stefan Woskowiak
Stefan Woskowiak

Reputation: 115

Move object from one point to another based on duration

Been wrapping my head around this problem for a while and looking for solutions online to no effect.

Basically if I have a sprite for example located at (10,10) I want to move it to say (50,100) and the whole process to take 2 seconds or whatever duration I specify. What is the exact math behind this? I was using a distance based solution to determine speed but was just using a random modifier to control the process. I need something more precise to execute exactly over a set duration.

Any help on this issue would be greatly appreciated!

Upvotes: 1

Views: 2006

Answers (4)

grapefrukt
grapefrukt

Reputation: 27045

You need a couple of pieces of information to do this, start location, end location, duration and elapsed time.

Here's an example in actionscript:

package {
    import flash.utils.getTimer;
    import flash.events.Event;
    import flash.display.Shape;
    import flash.geom.Point;
    import flash.display.Sprite;

    public class Mover extends Sprite {

        private var circle      :Shape;
        private var start       :Point;
        private var end         :Point;
        private var duration    :int;

        public function Mover() {

            // first we create something to move, like, a circle
            circle = new Shape();
            circle.graphics.beginFill(0xff00ff);
            circle.graphics.drawCircle(0, 0, 20);
            addChild(circle);

            // start and end positions
            start = new Point(0, 0);
            end = new Point(100, 100);

            // and finally, the duration, i'm using milliseconds
            duration = 2000;

            // this event handler will run each frame
            addEventListener(Event.ENTER_FRAME, handleEnterFrame);
        }

        private function handleEnterFrame(event:Event):void {
            // we figure out how much of the animation has elapsed by using getTimer
            // should you want to use a start time, add it here 
            var progress:Number = getTimer() / duration;

            // we need to clamp our progress so we don't under- or overshoot the target
            if(progress < 0) progress = 0;
            if(progress > 1) progress = 1;


            // then it's a matter of setting the position
            // we use the start position as a base and then gradually add in 
            // the difference between the start and the end
            circle.x = start.x + (end.x - start.x) * progress;
            circle.y = start.y + (end.y - start.y) * progress;  
        }
    }
}

If you're not all that interested in the how and just want the results, I wholeheartedly recommend a tweening engine like TweenLite or any of the other myriad of them. Just stay clear of the one that comes with flash, it's a bit crap.

Upvotes: 0

Leonhardt Wille
Leonhardt Wille

Reputation: 557

Take a closer look to jQuery's animation algorithms... maybe you can use some of the code.

http://code.jquery.com/jquery-1.6.1.js (search for "custom:" as a starting point).

Upvotes: 0

Jackson Pope
Jackson Pope

Reputation: 14640

Assuming linear interpolation (i.e. moving in a straight line from start position to end position at a constant rate):

The vector from start to destination is destination - start, i.e. for your example (40,90).

If you want this to happen over two seconds you need to divide it by two to get the distance travelled per second, so (20,45) per second for your example.

To get the position at any given time, first record the start time and calculate the current time minus the start time in seconds. So if the animation started at 12:01:30.000 and it is now 12:01:31.500 then 1.5 seconds have past since the start of the animation.

To get the current location you add the start location to the movement per second vector * the time elapsed, so in my example:

(10,10) + (20,45) * 1.5 = (10,10) + (30, 67.5) = (40, 77.5)

Upvotes: 4

Pillum
Pillum

Reputation: 132

It's just a thing of interpolation and time. There is linear, sinus, quadratic, ...

Here is some more info and examples in actionscript: link

Upvotes: 0

Related Questions