Lerping GUI box/window

Hello,

I'm trying to implement a UI that has a sidebar with various buttons in a vertical GUILayout format. When a user clicks a button I would like to have a box with some simple content more or less expand outwards and away from the button into the center of the screen (starting small like the button and growing larger as it moves to the center of the screen). Have been scratching my head all day between Lerps and Berps and Expands...

Thank you for your help.

Code (csharp):

1.  
2. void OnGUI()
3. {
4.     Rect growingBox = new Rect(150, 30, 30, 30);
5.     ....
6.    
7.     GUILayout.BeginVertical(GUI.skin.GetStyle( "Button" ), GUILayout.Width (150));
8.     GUILayout.Label ("Hello");
9.                
10.     if (GUILayout.Button("Add Item"))
11.     {
12.         displayBox = true;
13.     }
14.     if (displayBox == true)
15.     {
16.         GUILayout.BeginArea(growingBox);
17.        
18.         // I would like to make the box below Lerp out into the screen
19.         GUILayout.Box("I'm a box");
20.         // Lerp Here
21.  
22.         GUILayout.EndArea();
23.     }
24.     GUILayout.Label ("etc....");
25.     GUILayout.Label ("etc...");
26.     GUILayout.EndVertical ();
27.    
28.     if (GUILayout.Button("Cancel"))
29.     {
30.         displaySearch = false;
31.     }
32.    
33.     if (GUILayout.Button("Log In"))
34.     {
35.     }
36.     ...
37. }
38.  

 

The general approach for animating UI elements is this:

1. Create a script property that is the UI element's left or width or whatever you want to animate.

2. Use that property when creating the UI element and its rect.

3. Create an animation routine that animates the value of that property.

For example (a *very* simple example):

Code (csharp):

1. var MyBoxLeft = -200.0;
2.  
3. function OnGUI () {
4.  
5.   var tBoxRect = new Rect(MyBoxLeft, 20.0, 190.0, 40.0);
6.   GUI.Box(tBoxRect, "Look at me!");
7.  
8. }
9.  
10. function Update () {
11.  
12.   if (Input.GetKeyDown("space")) {
13.     AnimateBox();
14.   }
15.  
16. }
17.  
18. function AnimateBox () {
19.  
20.   if (MyBoxLeft == -200.0) {
21.    
22.     while (MyBoxLeft < 20.0) {
23.         MyBoxLeft++;
24.         yield;
25.     }
26.  
27.   } else if (MyBoxLeft == 20.0) {
28.    
29.     while (MyBoxLeft > -200.0) {
30.         MyBoxLeft--;
31.         yield;
32.     }
33.  
34.   }
35.  
36. }

 

Thanks for your response. I was able to more or less hack it together with something along these lines:

Code (csharp):

1.  
2. rctWindow4 = new Rect(43f + (offset/2f), 20f + (offset/2f), 2f + (offset * 1.5f), 6f + offset);
3.  
4. rctWindow4 = GUI.Window(0, rctWindow4, DoSearchWindow, "Search", GUI.skin.GetStyle("window"));
5.  
6. offset = Mathf.Lerp(0f + offset, 320f, Time.deltaTime * 5f);
7.  

But I think I'll use something like you demonstrated for a hot key style functionality. Thanks again.

 

How to implement onmouseOver instead of Input.GetKeyDown("space")?
I want the partly hidden window will be animated after pointing mouse at it.

 

The GUI code has to be in the OnGUI function, but you can set a boolean flag to start the animation in an OnMouseEnter and clear it again with the corresponding OnMouseExit.

 

thanks
but could you type a little example please? I'm not a programmer and studying coding in Unity using finished scripts.

 

@ fis: it is bad forum etiquette to post your entirely separate question in this thread. This is a thread about lerping (linear interpolating) a gui box, adding yoru questions about mouse events is not the way to go:

1. If we do answer your question it's now hidden/buried under a topic heading that doesn't match.

2. If you really want help it's now buried under a topic heading that doesn't bring the right eyeballs.


In the future, if you have a case like this (where you have a totally new question not related closely to the original post/topic) then please post a new thread of your own. So, do that now and we can lend a hand there, thanks!

 

Funny how this thread is the #1 hit for the google search: "Unity Gui OnMouseOver"...

 

@HiggyB : why it is not possible to call AnimateBox () method directly to OnGUI() method,Why we need to call this in Update() method,as far as i know that both the Update() and OnGUI() running on per tick or frame rate,and yes GUI is for drawing things and GUI is also faster than Update too,but don't understand the reason that why we are not able to call method directly to OnGUI,we need to take bool variable all the time for specific work.Is there any other better way to do that.kindly help me .