Staggered Rotation

[waiguoren]

Hi, relative newbie here.

Use Case

I have 4 (Chinese) characters, each in a separate layer, horizontally aligned over a 15 sec timeline. 3D turned on for each character. I'd like to:

- start all 4 characters rotating at a constant 10 rotations per second and

- terminate each character's rotation on a staggered basis (character A stops at 4 sec, character B at 5 sec, character C at 6 sec and D at 7 sec.

The termination curve for each character should last 3 sec and should be identical (as shown in the attached screenshot)

-  to accomplish this, I've copied the termination sequence (a 3 sec keyframe) from character A and pasted it onto the rotation attribute for each successive character at 1 sec, 2 sec and 3 sec, respectively.

So far, so good.

Issue

I'd now like to add a constant rotation prior to the 3 sec terminating animation for each character so that all characters start spinning at 0:00. However,

- when I add a keyframe prior to the 3 sec termination keyframe, it distorts the 3 seq keyframe curve.

Questions

- Is there a way to have 2 separate keyframes that don't interact with each other? And if so, how would I do this?

- How do I  interpret / update the 2 parameters for rotation - nn x +0.0 (I've fiddled with these params and I'm, not getting enough consistent behavior to tell me how to interpret / use them).

Thanks in advance!

Screenshot

Here are the settings for the second character B with a red line from 0:00 to 1:00 where I'd like to have the constant rotation

[Martin_Ritter]

The easiest and fastest solution would be to start over. Make the whole animation cycle for one character and copy it to the others.

And you can get rid of the expression, since it doesn't do anything.

A more sophisticated way would involve a loop before keyframe expression. I usual use this script as shorthand:

https://aescripts.com/pt_autoexpress/

*Martin

[Martin_Ritter]

I re-read your post and got an overall better idea: follow the leader.

You create the complete animation cycle on the first character. Let it spin for some seconds, at least as much as the last character actual need. Then make the spin-out animation as you already did. For the spin-only part, you can use the script I posted above and loop it, or you set it up by hand once. You wrote 10 full rotations per seconds... should be easy to calculate how many rotations you need for, say 4 seconds of pure spinning, right?

Next you activate expressions on the following character - the x-rotation property of course. And you'll add this line of code:

thisComp.layer(index+1).transform.xRotation.valueAtTime(time-1);

This takes to rotation value from layer index+1 (= the layer below the current one) at a time-1 (= one second earlier).

You copy this line to every other character above.

*Martin

[waiguoren]

Martin

Many thanks for the quick reply. TBH, my head is spinning on this issue. No pun intended. I think I need to crawl before I run, so can I ask a really basic question(s):

How can I create 2 keyframes, where the first is linear (the constant rotation) and the second is the curve I've got above (or any curve, for that matter).

I guess I'm getting lost on just the basics of keyframes - I can do or the other of the above keyframes, but when I have 2 keyframes one after the other, they "interact" such the original line / curve is altered. So, I can have a constant number of rotations, but when I add the second keyframe, the first one is no longer a constant - it morphs into a curved keyframe also.

I've searched all over youtube for an answer on this and just can't find anything that explains how to concatenate 2 or more keyframes while preserving the settings of the first one.

Sorry for the bonehead question. Once I can do the basics, I'll go back to fiddling with code.

Thanks again.

[Rick Gerard]

I don't see the expression you are using for rotation. I do see keyframes with some curves applied that slow down the rotation make slow down and then back up.

You have a couple of options that are pretty easy. The first is to just use keyframes. Set the first rotation keyframe at zero, but set the last rotation keyframe where you want the last layer to stop rotating. Adjust the bezier curves on the speed graph to get the look you want, then copy this animation to all text layers.

The next step is easy. Go back to the standard timeline, select all layers and press the U key to reveal all keyframes, then select the first text layer and drag it to the left until the last keyframe is where you want the last letter to stop rotating. Repeat with the second text layer. Then extend the out points of all 3 text layers. This is manual, and easy, and would take most users less than 2 minutes to do.

If you want to use expressions then I would suggest you write an expression with an if statement and use a marker to trigger the slow down and end of the rotation. Then all you have to do is add a marker to each layer and drag it to where you want the rotation to stop.

This kind of expression would probably take me about 30 minutes to write and perfect so for a single project it wouldn't be worth it.

Another option is to just add a rotation text animator and put all three characters in the same text layer. A couple of text animators and an overlapping range could do the trick, but the first solution is still the fastest.

[waiguoren]

Rick and Martin,

Man thanks for all the explanations and options!

I'm going to opt out of expressions for the moment until I have fully mastered the basics of keyframes (so, assume all code has been deleted).

Actually, I've been able to: a) set up multiple keyframes; b) copy rotations to new layers; and c) stagger the keyframes for each character - so, I'm close to getting the effect I want.

But, per Martin's last note, I'm missing a critical step when I try to set up a linear motion between KF 1 and KF 2, followed by an eased motion between KF 2 and KF 3. I can do one or the other, but not both, e.g.:

- setup KF's 1,2 and 3.

- create a linear motion between 1 and 2.

- but when I try to set up a curved motion between 2 and 3, it somehow changes the 1 to 2 motion to a curved motion.

Found a video that seems to demonstrate combined linear and curved motions across 3 KF's (for positions) - will try to apply to rotations and will report back on (hopeful) success.

Again - thanks for the explanations!

[Martin_Ritter · Accepted solution]

Motion always happens between 2 keyframes. So, what you need are 3 keyframes as you can see in the example from Rick of letter C. There is no linear rotation keyframe and no curved keyframe but a motion between two keyframes which is linear or eased (curved).

Key 1 to key 2 is a linear rotation, you are using linear keyframes. From key 2 to key 3, you apply ease-keyframes making this to an non-linear motion. Play around with the speed editor to get used to it how to edit speed graphs. It's a bit confusing at the beginning but makes sense after a while.

*Martin

[Martin_Ritter]

I admit it was a bit unclear explained.

Usual, you start with linear motion, put in all keyframes and values and make a rough timing. In the next step you change the motion style to a more living, characteristically one by applying ease and editing the speed graph. So, in the end you'll have KF1 as linear (because that is what you want there), but KF2 and 3 as ease. Just like in Ricks screenshot - the letter C.

To get to smooth transition from linear to ease (KF1 to 2), play around with the speed curve editor until you get used to it.

Btw. nobody will ever be able to tell if your letters are rotation 10 times per second or less or more. There is no need to be 100% precise. Trust your eyes - if it looks good, it is good.

*Martin

[waiguoren]

I finally got it!

For some odd reason, I thought that a keyframe was the begin point, end point and motion in between. I now understand that each point is a keyframe.

so...I was grabbing both the beginning and ending keyframes (K1 and K2), but in so doing, I affected the motion between K2 and K3.

I think I'm set for the moment.

One observation about the many "how to" videos out there - they focus on the mechanics, not the conceptual framework. So, if you only need to replicate what these videos show, no problem. But, lacking a conceptual framework (i.e. what is a keyframe?), extrapolating to the next effect can be somewhat problematic...

Anyway, thanks for your patience and explanations!

[Martin_Ritter]

Congrats!

The concept of keyframes is to set different states and interpolate between them. Curves determine how this interpolation should happen.

This goes back to classic animation, where the "chief draftsman" made the key frames, and the "draftsman staff" draws the in-betweens. In the case of AE, the staff is the computer.

Your idea of a concept would be to apply a behavior, what is more the concept of programming. With expressions, this concept would be also possible, but AE is not the ideal environment for such. Meaning you'll have to write lot of code which executes fairly slow and after all you would be way faster by just keyframing this.

*Martin

[waiguoren]

Martin,

I think I spoke too soon...

It seems that;

- for spatial properties (e.g. position), KF1 equals the start position and KF2 equals the end position. Makes sense.

- but for "motion" properties (e.g. rotation), KF1 and KF2 do not equal the start and end rotational speeds, respectively - they seem to represent the relative difference between the start and end...

If I set both to 20 X 0.00, I get no rotation at all. But if I set KF1 to 20 and KF2 to 0, then I get an average rotational speed of 10 (X 360 = 3600).

This was actually my original question --- for the rotation property, what do the attributes really mean? Would it be correct to say that, for rotation only (and IDK, maybe other properties), that the attributes are only meaningful relative to each other - and there must be a different value for KF1 and KF2.

Example

So...if I want a constant rotation of 10 (X 360), I need to set KF1 to 20 and KF2 to 0 and make it a linear interpolation.

IMHO, this is a really inconsistent implementation for rotation.

Screenshot - KF1

[Martin_Ritter]

Okay... I already pointed out that the system of keyframes relies on changes of states. Therefore, setting the same values for two keyframes results in zero motion, since there is no value change, no changes in states.

Next, this

- but for "motion" properties (e.g. rotation), KF1 and KF2 do not equal the start and end rotational speeds, respectively - they seem to represent the relative difference between the start and end...

is a wrong assumption, since you never ever set up speeds in AE, just values. The speed is a direct result of the values you set up and the time span between the key frames.

If you want to move something (move, rotate, scale, whatever), you'll need two different values and a time span between them to get a motion, because this is what motion is.

You'll might miss that in AE we can't go beyond 359° rotation angle. Therefore, 360° is the same as 1x0.0 and -20x0.0 is the same as -7200° (in Unity, this is different for example and terrible confusing).

If you animate a rotation from -7200° (-20x0.0) to 0° in a time span of 2 seconds, this will result in 3600°/sec motion - exactly what the graph shows you. Since this is a linear motion due to linear keyframes, the speed graph is a straight line. No acceleration or deceleration.

(If you switch to the value graph (the switch button is on under the graph, right next to the eye-icon), you'll see a up going line, representing the rotation value for each frame. However, adjustments on this graph will change the values, but what you want to define is the motion characteristic, aka speed.)

If you want a constant rotation of 10 full cycles per second for a time span of two seconds, you'll have to do the math, yes.

Since the start and end point of a full cycle rotation is visual the same, this is unlike a position animation from A to B.

If you have an object which should be rotating all the time at a certain speed and you don't want to do the math, you apply the loop-expression which continues the motion with the same speed of the original key framed animation. You animate one second to give the timing and then it just goes on.

*Martin

[waiguoren]

Martin

Thanks for the complete explanation.

Probably not worth debating this point, but, in the case of rotation, it would make more sense to me if the ending KF simply stated the net rotations. Unless I'm missing sth, KF1 = 10 and KF2 = 20 yields the same behavior as KF1 = 0 and KF2 = 10...no?

Whereas, spatial animation does indeed have an absolute starting and ending point.

It feels like one design solution was used for 2 very different use cases...

IDK, maybe it will suddenly make sense later on.

Either way, thanks again for all the time you spent explaining this!

[Martin_Ritter]

I don't get what you mean by, but please explain!

it would make more sense to me if the ending KF simply stated the net rotations.

If I move an object from start to end, and the movement is not a closed cycle, it's like rotation an object from let's say 0 to 45 degree. I have an absolute starting and ending point.

But with a full 360 degree rotation, it happens that start and end point are visual the same - but not the values. If you lay out the movement as sinus wave, you have traveled 2Pi of way. You are way more left or right then from the starting point.

Rotation from 10x0.0 to 20x0.0 is visual the same like from 0x0.0 to 10x0.0, that's correct. Just like sin(3.1415) is the same as sin(6.2831). That's the nature of rotation.

However, 0x0.0, 10x0.0, 20x0.0 are mathematically not the same and it's important to be able to tell them apart.

If you want to animate 10 full rotations in 1 second, you can start at 100x95.5 and go to 90x95.5, but there is hardly a need for the first value being such high. So you rather start at 0x0.0 and go to 10x0.0, because this is the clearest way to read from pure keyframe values what is going on.

*Martin