- Home /
Rotate a Canvas element over time
I'm trying to animate a canvas menu to create a sort of carousel effect. The rotation animation I wrote happens instantly, instead of over time. The basic idea is that lsPanels is an array of Panel objects (assigned via inspector) that will get rotated forward or backward 25 degrees. lsRotations is the "target" rotations that each of these panels will be moved toward. I tried both Quat.Slerp() and Quat.RotateTowards(). I can't tell if I'm simply not implementing a rotation over time right (I followed several examples, both via Unity docs and UA threads) or if rotation of UI elements drawn on a "Screen Space - Camera" canvas behave differently?
void Update()
{
if (rotateCarouselForward)
{
if (!lsPanels[0].transform.rotation.Equals(lsRotations[0].rotation))
{
for (int i = 0; i < lsPanels.Length; i++)
{
//lsPanels[i].transform.rotation = Quaternion.Slerp(lsPanels[i].transform.rotation, lsRotations[i].rotation, Time.time * animSpeed);
lsPanels[i].transform.rotation = Quaternion.RotateTowards(lsPanels[i].transform.rotation, lsRotations[i].rotation, Time.deltaTime * animSpeed);
}
}
else
{
rotateCarouselBackward = false;
}
}
if (rotateCarouselBackward)
{
if (!lsPanels[0].transform.rotation.Equals(lsRotations[0].rotation))
{
for (int i = 0; i < lsPanels.Length; i++)
{
//lsPanels[i].transform.rotation = Quaternion.Slerp(lsPanels[i].transform.rotation, lsRotations[i].rotation, Time.time * animSpeed);
lsPanels[i].transform.rotation = Quaternion.RotateTowards(lsPanels[i].transform.rotation, lsRotations[i].rotation, Time.deltaTime * animSpeed);
}
}
else
{
rotateCarouselBackward = false;
}
}
}
public void NextPage()
{
if (pageCnt <= lsPanels.Length)
{
pageCnt += 1;
for (int i = 0; i < lsRotations.Length; i++)
{
lsRotations[i] = lsPanels[i].transform;
lsRotations[i].transform.Rotate(lsRotations[i].rotation.x, lsRotations[i].rotation.y - 25, lsRotations[i].rotation.z);
}
rotateCarouselForward = true;
}
}
public void PreviousPage()
{
if (pageCnt > 0)
{
pageCnt -= 1;
for (int i = 0; i < lsRotations.Length; i++)
{
lsRotations[i] = lsPanels[i].transform;
lsRotations[i].transform.Rotate(lsRotations[i].rotation.x, lsRotations[i].rotation.y + 25, lsRotations[i].rotation.z);
}
rotateCarouselBackward = true;
}
}
You need to use a Coroutine. I'd post an example but there's loads online already (and I'm lazy...)
Ahh good idea, is this a UI-specific necessity? I didn't see any coroutines in the "rotate object over time" examples.
Your answer
Follow this Question
Related Questions
Flip over an object (smooth transition) 3 Answers
Distribute terrain in zones 3 Answers
Multiple Cars not working 1 Answer
How to rotate a projectile to face the player in 2D? 1 Answer
Character Not Rotating 0 Answers