Nsryjdtyk

I wanted to add a simple search animation to my input field in my unity UI.

This is my InputField and the idea is, when I select it, it should expand slowly, and when I deselect it, it should shrink back to its normal form.

This is the rect Transform Component of this inputfield. I added to the input field and Event Trigger Component and an Animator. I created two Animations called SearchAnimation and DeselectAnimation and added them to my AnimationController called 'SearchController'.
This is how I designed my SearchController:

I set the Transitions between the defaultState and SearchAnimation to be listening to the SelectBool and DeselectBool (the name already describes its purpose).

Then I added the following script to my input Field so that those two booleans will be set accordingly to the event trigger:

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;



public class OnClickScript : MonoBehaviour {



    Animator anim;



    void Start()

    {

        anim = GetComponent<Animator>();

    }





    public void OnSelect()

    {

        anim.SetBool("SelectBool", true);

        anim.SetBool("DeselectBool", false);

        GetComponent<RectTransform>().sizeDelta = new Vector2(450, 50);

        GetComponent<RectTransform>().localPosition.Set(-275, 0, 0);



    }



    public void OnDeselect()

    {

        anim.SetBool("DeselectBool", true);

        anim.SetBool("SelectBool", false);

        GetComponent<RectTransform>().sizeDelta = new Vector2(200, 50);

        GetComponent<RectTransform>().localPosition.Set(-130, 0, 0);

    }



}

But after the animation is played the inputfield is set back to its inital size and location. How do I fix this?

Easy way:

Create one more clips. The clip is made of only one key which is the Size Delta of the SelectedState. Then make this clip the animation clip of the state.

I put my test project here.

With above approach, once you want to change the size of default state and selected state, you will have to change all four animation clips manually.

Hard way

Using AnimationClip.SetCurve to create animation from the script. With this approach, you can create more maintainable animations. But it's not easy to create complex animations with scripts.

Suggestions:

Using Pivot:

In the script, you are changing local position to prevent the input field moving up. Instead of changing the local position value, you can set the pivot Y to 1 if you want the input field to expand downward.

Using trigger:

Instead of using two bool variables, you can simply use one Trigger to trigger the animation start and move to next state.