[UI] Animate Fullscreen Panel from off-screen?

I found it pretty straight forward to animate an element from off screen by simply changing specific anchor positions from 1 to 0, however this doesn't work if you want the element to stretch on more than one axis.

What is the best technique using the editor's animator tool to animate a panel that stretches width and height from offscreen to a zero coord?

Edit: After working with it for a few hours, it seems the new UI system goes against working with full-screen dimensions dynamically when using the built-in Animator.

Maybe I should elaborate because my post doesn't quite get the message across. The main goal here is to be able to handle animating Full-Screen panels according to their current bounds outside of scripts. As an example, here is my panel:

Notice it is anchored to each corner to ensure it stretches itself to the full width/height of the screen its running at. I want to have it animate from off screen as a transition effect into this full screen panel. I'm trying to do this completely outside of code so I can utilize all the neat features of Unity's built in animation edtior.

The animation would start from the width of the canvas and animate to a zero x position. The issue here is that in the animator I can only put in static values.

This has always been an issue with the Animator. It doesn't really have much to do with the new UI. Providing a dynamic starting point or ending point isn't supported (that I'm aware of) so you have to work around it. Since anchored position uses the reference resolution for the canvas, if your screen size is always the same aspect, using the reference screen width will work. You do need to make sure you add ReferenceResolution to your Canvas though. If the aspect does change slightly (like with android phones or iphone 4 vs 5) you need to make sure that you move it far enough offscreen to cover both screen shapes so you don't see it at it's starting position. That the easy method that works for most cases.

Another trick I've learned is you can make your own script that has a variable between 0 and 1 (0 meaning the start Vector and 1 meaning the destintation Vector) and use Vector2.Lerp in Update() to move it to the proper spot based on the variable. Then in the Animator, you can animate your variable in the script instead of the RectTransform directly so it will animate between your two dynamic starting and ending positions that your script knows about. That way you aren't animating in your script, you're just setting the dynamic location based on a variable you are animating in the Animator.

As an example, here's the script I made to do exactly as secondbreakfast gives as his second solution. Attach it to the UI object with the RectTransform that you'd like to animate, and animate the 'animatablePosition' float on this script instead of the position directly.

My script only works for full-screen slide-in's - not for animating not-so-full-screen things.

I'm not exactly sure what everyone above is trying to accomplish, but I found this thread when trying to figure out how to animate RectTransform anchor values (not position values) outside the range 0-1 (IOW, off screen) which you need to do when building resolution independent things without using the ReferenceResolution component. This is a problem because the inspector won't let you set anchor values outside that range. Turns out, the Animation window WILL let you set values outside that range. So you can add the curves in the Animation window and then type in maybe 2 or -1 in the field that appears when you click the diamond shaped key.

I'm not exactly sure what everyone above is trying to accomplish, but I found this thread when trying to figure out how to animate RectTransform anchor values (not position values) outside the range 0-1 (IOW, off screen) which you need to do when building resolution independent things without using the ReferenceResolution component. This is a problem because the inspector won't let you set anchor values outside that range. Turns out, the Animation window WILL let you set values outside that range. So you can add the curves in the Animation window and then type in maybe 2 or -1 in the field that appears when you click the diamond shaped key.

Here is my version of a fly-in script. It lets a RectTransform fly in from one side of its parent canvas (therefore the object must have a canvas as parent).
The script works with different sizes of the RectTransform, screen resolutions and pivot settings.

Have fun

Code (CSharp):

usingUnityEngine;

usingSystem.Collections;

/// Lets a RectTransform fly in from one of the edges of its canvas.

publicclass RectTransformFlyIn : MonoBehaviour {

publicenum Sides {

Left,

Right,

Top,

Bottom

}

/// The side from where the rect transform should fly in.

public Sides side;

/// The transition factor (from 0 to 1) between inside and outside.

[Range(0,1)]

publicfloat transition;

/// Inside is assumed to be the start position of the RectTransform.

private Vector2 inside;

/// Outside is the position

/// where the rect transform is completely outside of its canvas on the given side.

private Vector2 outside;

/// Reference to the rect transform component.

private RectTransform rectTransform;

/// Reference to the canvas component this RectTransform is placed on.

Here is my version of a fly-in script. It lets a RectTransform fly in from one side of its parent canvas (therefore the object must have a canvas as parent).
The script works with different sizes of the RectTransform, screen resolutions and pivot settings.

Have fun

Code (CSharp):

usingUnityEngine;

usingSystem.Collections;

/// Lets a RectTransform fly in from one of the edges of its canvas.

publicclass RectTransformFlyIn : MonoBehaviour {

publicenum Sides {

Left,

Right,

Top,

Bottom

}

/// The side from where the rect transform should fly in.

public Sides side;

/// The transition factor (from 0 to 1) between inside and outside.

[Range(0,1)]

publicfloat transition;

/// Inside is assumed to be the start position of the RectTransform.

private Vector2 inside;

/// Outside is the position

/// where the rect transform is completely outside of its canvas on the given side.

private Vector2 outside;

/// Reference to the rect transform component.

private RectTransform rectTransform;

/// Reference to the canvas component this RectTransform is placed on.

i have tried implementing the script that @achimmihca posted and it does what I was looking for but it has a slight bug (I guess its a bug idk) that is the higher the resolution the further down (or whichever side you want the panel to fly in from) the panel positions itself. Now this bug also does this vice versa so the lower the resolution the more the panel is visible on screen because it positions itself there.
Here are some example screenshots so you can see what I was trying to explain:http://imgur.com/lf5vLsChttp://imgur.com/e0MFVOShttp://imgur.com/AQSAund

New version of my RectTransformFlyIn Script:
It now uses localPosition to change the movement. This works way better. For example it now works together with "Screen Space - Camera" on a canvas.
I also changed the "outside" calculation a bit. I think there was an issue with it.

For me, this new version works like a charm in all situations (different sizes and positions of the RectTransform, screen resolutions, pivot settings, "Screen Space - Overlay" as well as "Screen Space- Camera" on the canvas)

Code (CSharp):

usingUnityEngine;

usingSystem.Collections;

usingUnityEngine.UI;

/// Lets a RectTransform fly in from one of the edges of its canvas.

/// This can be used with an animator.

publicclass RectTransformFlyIn : MonoBehaviour {

publicenum Sides {

Left,

Right,

Top,

Bottom

}

/// The side from where the rect transform should fly in.

public Sides side;

/// The transition factor (from 0 to 1) between inside and outside.

[Range(0,1)]

publicfloat transition;

/// Inside is assumed to be the start position of the RectTransform.

private Vector2 inside;

private Vector2 globalPosition;

/// Outside is the position

/// where the rect transform is completely outside of its canvas on the given side.

Oops...

"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.