Jump to content
Search Community

Direction of rotation (clockwise / counterclockwise)

jefinho test
Moderator Tag

Recommended Posts

Hi there!

 

If have a basic question about the way I should handle rotation within TweenMax.

I'm making an animation that looks like a clock with many pointers.

The pointers can move in diferent directions; clockwise and counterclockwise.

 

This pointer should go to the same position

var twM1:TweenMax = new TweenMax(myPointer,5,{rotation:180,repeat:0,ease:Linear.easeNone});

as this pointer:

var twM2:TweenMax = new TweenMax(myPointer,5,{rotation:-180,repeat:0,ease:Linear.easeNone});

 

The direction of tween 1 is clockwise, and the direction of tween 2 is counterclockwise.

Of course, this will not happen, because the values are different now (180 and -180).

 

I'm working with an XML-database that gives me a negative number when a pointer needs to go counterclockwise,

and a positive number when a pointer needs to go clockwise.

 

I looked to the TransitionManager of Adobe. Here I can turn "ccw" on or off:

TransitionManager.start(img1_mc, {type:Rotate, direction:Transition.IN, duration:3, easing:Strong.easeInOut, ccw:false, degrees:720});

 

Can this be realized in TweenLite/Max?

 

Thanks!

Link to comment
Share on other sites

By the way, I looked to the CirclePath2D Plugin.

My objects need to rotate like real clock pointers into the left- and right direction.

With the CirclePath2D plugin, the pointers are following the Circle path as a whole, instead of just the top (with the pivot point at the bottom).

I hope I can get a little help...

Link to comment
Share on other sites

Are you saying that the negative values go in the clockwise direction? Help me understand what exactly is happening for you that you need to fix.

 

You can use relative values if you want - negative values will always travel counter-clockwise and positive values will go clockwise. To define a value as relative, you simply cast it as a String by either putting it in quotes or wrapping it with String(). You could use a function like this to convert an absolute value to a relative value based on the current rotation of an object:

function getRotationChange(mc:DisplayObject, newRotation:Number, clockwise:Boolean):String {
   var dif:Number = newRotation - mc.rotation;
   if (Boolean(dif > 0) != clockwise) {
       dif += (clockwise) ? 360 : -360;
   }
   return String(dif);
}

 

Then you could use it with TweenLite/Max, like:

 

var twM1:TweenMax = new TweenMax(myPointer, 5, {rotation:getRotationChange(myPointer, 180, true), ease:Linear.easeNone});

Link to comment
Share on other sites

Fist of all: Thanks for trying to help!

 

I made a little sketch to visualize what I am trying to accomplish.

The blue line must rotate to 90 degrees in counter clockwise direction. The green line is at the correct end position. The red line is the incorrect end position.

 

As you can see; the lines must move in relation to the circle in the back.

 

example.jpg

 

Somehow I can't get this to work with a simple function.

Maybe something like this:

private function getRotationChange(currRot:Number, clockwise:Boolean):Number
	{
		if (!clockwise)
		{
			currRot = -360 - currRot;
		}
		return currRot;
	}

 

I hope you can give an advise.

Link to comment
Share on other sites

  • 2 years later...

Are you saying that the negative values go in the clockwise direction? Help me understand what exactly is happening for you that you need to fix.

 

You can use relative values if you want - negative values will always travel counter-clockwise and positive values will go clockwise. To define a value as relative, you simply cast it as a String by either putting it in quotes or wrapping it with String(). You could use a function like this to convert an absolute value to a relative value based on the current rotation of an object:

function getRotationchange(mc:DisplayObject, newRotation:Number, clockwise:Boolean):String {
var dif:Number = newRotation - mc.rotation;
if (Boolean(dif > 0) != clockwise) {
dif += (clockwise) ? 360 : -360;
}
return String(dif);
}

 

Then you could use it with TweenLite/Max, like:

 

var twM1:TweenMax = new TweenMax(myPointer, 5, {rotation:getRotationchange(myPointer, 180, true), ease:Linear.easeNone});

 

 

THANK you ..! You solved my question too..! You are ALWAYS right on target.. Thanks for sharing... !!!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...