How to Lerp UI object | Rect Transform

Unity Engine
,
1

Hello everyone,
I want to create this simple Moving UI object using script.
I created this using Animation but there is some problem. So I want to create this using script. What I want to do is on Button click, increase/decrease Pos X of object by 1920. And I want to increase/decrease Pos X value instead of entering a fixed value. On Right click decrease Pos X by 1920 and on left click increase it by 1920. And object should animate like below example video.

This is example, I created using animation:

6616456--753478--Capture.PNG
Thanks.

2

I succeed to complete my code, it’s just not animating. Because I don’t understand how to use Lerp here.
Here is script:

RectTransform rectTransform;
public GameObject next;  // Next Button
public GameObject previous; // Previous Button

void Start()
{
   rectTransform = GetComponent<RectTransform>();
}

public void OnClickNext()
    {
        rectTransform.anchoredPosition3D = new Vector3
        (rectTransform.anchoredPosition3D.x-1920, rectTransform.anchoredPosition3D.y, 0);

        if(rectTransform.anchoredPosition3D.x == -3840)
        {
            next.SetActive(false);
        }
        else
        {
            previous.SetActive(true);
        }
    }

public void OnClickPrev()
    {
        rectTransform.anchoredPosition3D = new Vector3
        (rectTransform.anchoredPosition3D.x+1920, rectTransform.anchoredPosition3D.y, 0);

        if(rectTransform.anchoredPosition3D.x == 0)
        {
            previous.SetActive(false);
        }
        else
        {
            next.SetActive(true);
        }
}

Is anyone know how to use Lerp to compete my Script?

3

@Only4gamers

“I succeed to complete my code, it’s just not animating.”

Could it be because you don’t seem to have any animation code? Did you paste all of your code?

“Because I don’t understand how to use Lerp here.”

I don’t see any lerp code here either.

There are several examples if you google, also, documentation has examples too:

Also, I’ve never used rectTransform.anchoredPosition3D, I simply use position or localPosition. There is usually no reason to use anchoredPosition for RectTransform movement… anchors can be either split or together and IMHO anchor is not a good reference for RT position.

1 Like
4

Thank you so much for your reply. Actually I am not talking about animation. I want to create animation like feel with Lerp. As I just learned about Lerp yesterday, I don’t know how to use it in my code, that’s why I am asking for help. I already read some Lerp tutorials but I didn’t understand how to use Lerp in this case. After some research I find anchoredPosition3D working best for me, but If I can get same result with different code then I have no problem either.

5

“I am not talking about animation.”

By “animation code” I meant code that animates your object position.

"As I just learned about Lerp yesterday, I don’t know how to use it in my code, that’s why I am asking for help."

But did you actually read the documentation page link? There you can find several examples.

“I already read some Lerp tutorials but I didn’t understand how to use Lerp in this case.”

Vector3 has Vector3.Lerp. With that you can change your object transform position to make your object move from point A to point B:

IEnumerator MoveFromTo(Vector3 from, Vector3 to, float speed, Transform tra)
{
    var t = 0f;

    while (t < 1f)
    {
        t += speed * Time.deltaTime;
        tra.localPosition = Vector3.Lerp(from, to, t);
        yield return null;
    }
}
3 Likes
6

You need a vector2 to declare the move to position. In your case x-1920 so

Vector2 targetPos = new Vector2(1920, 0);

then in an enumerator you can use something like

private IEnumerator Animate()
{
      var t = 0;
      var target = transform.position - targetPos;

      while(t < 1f)
      {
            transform.localPosition = Vector3.Lerp(transform.localPosition, target, t);
            t += time.deltaTime;
            yield return null;
      }

something like that. Code may be off some.

1 Like
7

lol, I guess you updated while I was posting!! I like your method :wink:

1 Like
8

Thank you so much. I finally competed my code and it’s now working exactly as I want. :slight_smile:

IEnumerator Next()
    {
        from = transform.localPosition;
        to = new Vector3(transform.localPosition.x-1920, transform.localPosition.y, transform.localPosition.z);
        tra = transform;
        var t = 0f;

        previous.SetActive(false);
        next.SetActive(false);
   
        while (t < 1f)
        {
            t += 1 * Time.deltaTime;
            tra.localPosition = Vector3.Lerp(from, to, t);
            yield return null;
        }
        tra.localPosition = to;

        previous.SetActive(true);
        next.SetActive(true);

        if(transform.localPosition.x == -3840)
        {
            next.SetActive(false);
        }
        else
        {
            previous.SetActive(true);
        }
    }
9

Thank you so much for help :slight_smile:

1 Like
10

I found something like this (for 2d)

using UnityEngine;

public class MoveImage : MonoBehaviour
{
    public int stepSize;
    Vector2 target;

    void Start()
    {
        target = new Vector2(gameObject.GetComponent<RectTransform>().anchoredPosition.x,
            gameObject.GetComponent<RectTransform>().anchoredPosition.y);
    }
    public void Move()
    {
        target.x += stepSize;
    }

    private void Update()
    {
        gameObject.GetComponent<RectTransform>().anchoredPosition =
            Vector2.Lerp(gameObject.GetComponent<RectTransform>().anchoredPosition
            , target, Time.deltaTime * 2);
    }
}

its works with canvas elements.

1 Like