Adding easing to a rotation function?

[Danger Madcow]

I have the following code:

function rotate(mc, dest){
	mc.onEnterFrame = function() {
		this._rotation = dest;
		if (Math.round(this._rotation) == [dest]) {
			trace("rotating done");
			this.onEnterFrame = undefined;
		}
	}
}

That moves the MC all at once, but how would I modify this so that it rotated and eased out?

Thanks in advance.

[jbum]

The following code will work. Because rotating is circular, I've added a couple of lines which insure you make turn in the most efficient direction - you should never need to turn more than 180 degrees.

code:

---

function rotate(mc, dest) 

{



        mc.easingSpeed = .2;



	mc.onEnterFrame = function() 

	{

	        // these lines added to avoid huge turns

                // for example, when going from 1 to 359 degrees, 

                // we want to turn -2 degrees, not +358 degrees.

	        if (this._rotation > dest + 180) dest += 360;

	        if (this._rotation < dest - 180) dest -= 360;

	        

	        var delta = dest - this._rotation;

	        

		this._rotation += delta*this.easingSpeed;



		if (Math.round(delta) == 0) 

		{

		  this._rotation = dest;

 		  this.onEnterFrame = undefined;

		}

	}

}

---

For greater control, you can add easingSpeed as a third parameter to your function.

[Danger Madcow]

Most excellent! Works like a charm. From looking at the code you added, it makes perfect sense. I just had a hard time figuring it out without my second cup of coffee.

Thank you very very much for your assistance.

[jbum]

Glad you were able to make sense of it

[Danger Madcow]

Here's a Jeapordy Daily Double© Question:

How could I get this movement to "jiggle" once it reaches it's final destination?

[jbum]

This modification to the above code stores the rotational velocity in a separate varaible 'vr', creating inertia which causes you to overshoot and bounce back and forth. It's an elastic tween, in other words.

Adjust the first two variables to get different effects.

code:

---

function rotate(mc, dest)

{

        

    // adjust these two numbers to taste



        mc.easingSpeed = .2;  // 'stiffness of spring'

        mc.damping = .8;      // damping or resistance



        mc.vr = 0;



        

        mc.onEnterFrame = function()

        {

                // these lines added to avoid huge turns

                // for example, when going from 1 to 359 degrees,

                // we want to turn -2 degrees, not +358 degrees.

                if (this._rotation > dest + 180) dest += 360;

                if (this._rotation < dest - 180) dest -= 360;

                

                var delta = dest - this._rotation;

                this.vr += delta*this.easingSpeed;

                this.vr *= this.damping;

                this._rotation += this.vr;

                

                if (Math.round(delta) == 0 && this.vr < .01)

                {

                        this._rotation = dest;

                        this.onEnterFrame = undefined;

                }

        }

}

---

[Danger Madcow]

Ah ha!

And I shall name my first born "jbum".

Thanks.

[Danger Madcow]

I may have spoke to soon. The code works great, but if you give the "dest" variable a negative number the jiggle doesn't happen. Is there a way to fix this?

[jbum]

Change this line:

if (Math.round(delta) == 0 && this.vr < .01)

to this:

if (Math.round(delta) == 0 && Math.abs(this.vr) < .01)