Jump to content

Codepen Notification

You didn't provide a codepen sample that illustrates the problem. It really helps us quickly identify problems. This isn't mandatory, but it will get you better/faster results. Would you like to add one?

Direction of rotation (clockwise / counterclockwise)

Started by jefinho, Jul 07 2010 12:48 PM - - - - -

8 replies to this topic
jefinho

Post #1 by jefinho , 07 July 2010 - 12:48 PM

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!
  • Back to top

jefinho

Post #2 by jefinho , 07 July 2010 - 01:19 PM

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...
  • Back to top

GreenSock

Post #3 by GreenSock , 07 July 2010 - 04:53 PM

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});

  • Back to top

jefinho

Post #4 by jefinho , 07 July 2010 - 08:34 PM

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.

Posted Image

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.
  • Back to top

GreenSock

Post #5 by GreenSock , 08 July 2010 - 07:31 AM

Did you read my last response? Did you try that code? I believe I solved all of this for you already.
  • Back to top

jefinho

Post #6 by jefinho , 08 July 2010 - 08:03 AM

Yes, I read your last response.
I also tried the function, but somehow I didn't get the results I wanted.
However, I will look into it once again.

Thanks!
  • Back to top

GreenSock

Post #7 by GreenSock , 08 July 2010 - 08:15 AM

Yeah, if you're still running into trouble, please post a simple example FLA that demonstrates the problem so that we can see exactly what's going on and test the code.
  • Back to top

jefinho

Post #8 by jefinho , 08 July 2010 - 04:15 PM

Thanks for your help!
It's working the way I want now.
  • Back to top

SudoPlz

Post #9 by SudoPlz , 08 January 2013 - 08:43 AM

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... !!!
  • Back to top




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

3rd Party Advertisement