Rotation + Directional Rotation

[shanemielke]

I've got a project I'm working on that involves Flash. So I'm brushing off the old Flash skills and working through some issues and had a few questions. I have a circle that represents a timeline with dots all along the circle for key events. I'm rotating the circle around incrementally over time (based upon percentage) to trigger/show the events on the circle as it rotates. The reason I'm asking the following questions is that performance is super important for this as it's being used in broadcast . I'm not sure it will ever come out as smooth as I want because depending upon the length of the event the duration of the tween could be 30 minutes. Which might mean that the slow rotation of the circle will always come across as wobbly and jumpy in these ultra small distances rather than buttery smooth if it was a fast animation.

 

Here is some quick code I'm working with to prototype some things.

 

var tempRotation = -(toTimePercent(time) * (timelineMaxDegrees))
TweenMax.to(mcTimelineCircle, .25, {
  transformMatrix:{ rotation: tempRotation },
  ease: Quad.easeInOut
});

 

What are the performance differences between "rotation: -260" and "transformMatrix:{ rotation: -260 }"? I feel like I remember reading transformMatrix was smoother.

 

2) Anytime I try to tween the rotation of the circle past -180 the rotation goes all crazy doing a full -360 degree loop to get to point (example: -181) . So I did some research and learned about the directionalRotation plugin. This seems to have fixed that issue by doing the following: 

 

var tempRotation = -(toTimePercent(time) * (timelineMaxDegrees))
TweenMax.to(mcTimelineCircle, .25, {
  directionalRotation: tempRotation + "_short",
  ease: Quad.easeInOut
});

But if transformMatrix is supposedly smoother.....then I'm going to lose some performance doing this.

 

I tried wrapping the above into transformMatrix "transformMatrix:{ directionalRotation: tempRotation + "_short" }," but it didn't work. Should I still be ok without TransformMatrix? Or is TransformMatrix just a JS thing and AS3 is just ignoring it and i'm just getting lucky that the it works at all?

 

Thanks in advance for any thoughts as I go down memory lane on this Flash project. 

[GreenSock]

6 hours ago, shanemielke said:

What are the performance differences between "rotation: -260" and "transformMatrix:{ rotation: -260 }"? I feel like I remember reading transformMatrix was smoother.

 

Yes indeed - if I remember correctly, when you animate the normal "rotation" value in Flash, it performs some rounding internally so that the increments are chunked. For example, if you set rotation to 45.2135 Flash will be like "nah, I'll just render that at 45 visually...close enough". So GSAP sets the value exactly as it should with precision, but Flash performs snapping. When you do it through the TransformMatrixPlugin, it's directly editing the matrix values, so it circumvents the snapping. 

 

But yeah, there's no plugin-within-a-plugin thing, so you can't expect directional rotation values to work inside that matrix stuff. But you could perform the logic yourself manually. Kinda like (untested):

var tempRotation = -(toTimePercent(time) * (timelineMaxDegrees));
var dif = (tempRotation - mcTimelineCircle.rotation) % 360;

if (dif !== dif % 180) {
    dif += (dif < 0) ? 360 : -360;
}

TweenMax.to(mcTimelineCircle, .25, {
  directionalRotation: mcTimelineCircle.rotation + dif,
  ease: Quad.easeInOut
});

 

You also might want to look into whether or not your easing is causing the illusion of jerkiness; like if you keep animating to a new value constantly...and there's an ease that cause it to start out fast and end slow...perhaps it looks like it's jumping a bit over and over. Just a thought - I could be wrong.

 

Does that help? 

[shanemielke]

For those that care or might find a need for this like I did....after digging into the documentation, I found that I could mix transformMatrix and shortRotation.

 

TweenMax.set( mcTimelineCircle, { transformMatrix:{ shortRotation: targetAngle }});

 

When placed inside of an Event.ENTER_FRAME, I was able to take advantage of the smooth rotation as well as avoiding the crazy jumping that was happening as Flash was tweening from -179 to 180. Which is what it does by default if you do a trace of a movieclip's rotation as it does a 360-degree rotation.