Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Fading UI Using Lerp?

Discussion in 'Scripting' started by Studio_Akiba, Jul 5, 2015.

  1. Studio_Akiba

    Studio_Akiba

    Joined:
    Mar 3, 2014
    Posts:
    1,421
    I am looking for the best way to fade into and out of a UI elements alpha level.
    I am trying to effect just the alpha level on the color field of the Image component and am having quite lot of trouble with it.

    Before anyone mentions it, I know I am doing it wrong, I am looking for the correct way to do this.

    Code (CSharp):
    1. public void FadeIn (Image fadeObject)
    2.     {
    3.         fadeObject = Color.Lerp(0, 255, Time.deltaTime);
    4.     }
     
  2. lordofduct

    lordofduct

    Joined:
    Oct 3, 2011
    Posts:
    8,514
    Color.Lerp lerps colors. you're passing in integer values of 0 to 255.

    Image has a property for its base color, Image.color.

    Pull that value, lerp the alpha on it, and set it back to the Image.

    Oh, and you'll probably want something like SmoothDamp, I think I've seen you in a thread where it was explained to you what lerp is, and that it may not actually be the best for this type of stuff:
    http://docs.unity3d.com/ScriptReference/Mathf.SmoothDamp.html
     
  3. Studio_Akiba

    Studio_Akiba

    Joined:
    Mar 3, 2014
    Posts:
    1,421
    This is being done for a UI object, and I am calling it as a public void, so I cannot use the Update function.
     
  4. lordofduct

    lordofduct

    Joined:
    Oct 3, 2011
    Posts:
    8,514
    Not sure why update can't be used. But ok.

    Start a coroutine, use that instead.

    Get a tween engine, like iTween or HOTween, use that instead.
     
  5. lordconstant

    lordconstant

    Joined:
    Jul 4, 2013
    Posts:
    389
    With the lerp the end number is the percentage of progress made using 0 - 1. You need to change that Time.deltaTime to something like this:

    Float prog;
    prog += Time.deltaTime;

    Then you use the prog as the third value.
     
  6. Studio_Akiba

    Studio_Akiba

    Joined:
    Mar 3, 2014
    Posts:
    1,421
    I have never even touched coroutines before and I am having trouble understanding the Unity documentation on it(Here).
    All I need to be able to do is make this run properly.

    Code (CSharp):
    1. public void fadeIn(CanvasGroup fadeObject)
    2.     {
    3.         fadeObject.alpha = Mathf.Lerp(fadeObject.alpha, 1, Time.deltaTime);
    4.     }
     
  7. lordconstant

    lordconstant

    Joined:
    Jul 4, 2013
    Posts:
    389
    something like this:

    Code (CSharp):
    1.  
    2.     float progress = 0.0f;
    3.     bool fadeIn = true;
    4.  
    5.     void Update(){
    6.         if(fadeIn){
    7.             progress += Time.deltaTime;
    8.  
    9.             if(progress >= 1.0f){
    10.                 progress = 1.0f;
    11.                 fadeIn = false;
    12.             }
    13.             fadeObject.alpha = Mathf.Lerp(0.0f, 1.0f, progress);
    14.         }
    15.     }
    16.    
    If you want to use InvokeRepeating then you can do something this:
    Code (CSharp):
    1.  
    2. float progress = 0.0f;
    3.  
    4.     void Start(){
    5.         InvokeRepeating("FadeIn", 0.05f, 20);
    6.     }
    7.  
    8.     void FadeIn(){
    9.         progress += 0.05f;
    10.         fadeObject.alpha = Mathf.Lerp(0.0f, 1.0f, progress);
    11.     }
    if you are lerping between 0 and 1 you don't really need the lerp function though as you can just set the alpha to the progress variable.
     
    Last edited: Jul 6, 2015