# Unity 5 - Moving canvas elements smoothly

So I am making a game menu in unity 5 for a school assignment. I am trying to smoothly move an image on the canvas using lerp. The canvas is on world space render mode because I also want to make a flying camera when clicking a button.

I have 5 buttons and when hovering over one of them, the image should move to that button smoothly (with a lerp). Every button has a script on it called "ButtonScript"

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class ButtonScript : MonoBehaviour
{
[SerializeField]
private AudioSource m_audioSource;
[SerializeField]
private Image m_buttonImage;

private RectTransform m_rectTransform;

private string m_buttonName;

private Vector3[] m_buttonEffectPositions;
private Vector3 m_currentButtonEffectPosition;

void Start()
{
m_audioSource = GetComponent<AudioSource>();
m_buttonName = gameObject.name;
m_rectTransform = m_buttonImage.GetComponent<RectTransform>();

m_buttonEffectPositions = new Vector3[6];

m_buttonEffectPositions[0] = new Vector3(-741, 21, 0);
m_buttonEffectPositions[1] = new Vector3(-741, -60, 0);
m_buttonEffectPositions[2] = new Vector3(-741, -137, 0);
m_buttonEffectPositions[3] = new Vector3(-741, -216, 0);
m_buttonEffectPositions[4] = new Vector3(-741, -297, 0);
m_buttonEffectPositions[5] = new Vector3(-1300, -252, 0);
}

void Update()
{
m_rectTransform.position = Vector3.Lerp(m_rectTransform.position, m_currentButtonEffectPosition, 0.1f);
}

public void SetButtonEffectPosition()
{
switch (m_buttonName)
{
case "NewGame":
m_currentButtonEffectPosition = m_buttonEffectPositions[0];
m_audioSource.Play();
break;
m_currentButtonEffectPosition = m_buttonEffectPositions[1];
m_audioSource.Play();
break;
case "Options":
m_currentButtonEffectPosition = m_buttonEffectPositions[2];
m_audioSource.Play();
break;
case "Credits":
m_currentButtonEffectPosition = m_buttonEffectPositions[3];
m_audioSource.Play();
break;
case "Exit":
m_currentButtonEffectPosition = m_buttonEffectPositions[4];
m_audioSource.Play();
break;
}
}

public void RemoveButtonEffect()
{
m_currentButtonEffectPosition = m_buttonEffectPositions[5];
}

public void ChangeOptionsCamera()
{

}
}


Every button has a PointerEnter function which calls the SetButtonEffectPosition function.

The problem is that the RectTransform coördinates of the image don't match the coördinates in the code. They jump to ridiculous values like -7000.

I couldn't find much documentation on this subject as the canvas is rather new to unity.

If there is any information missing that is required to help me with my question please let me know :)

To the person that suggested this as a duplicate thread, it is not because in that thread the OP has his canvas on screen overlay render mode and I have mine on world space render mode which seems to be different to me.

Any help would be appreciated!

• Possible duplicate of How do I set the exact local position of a RectTransform? – DMGregory Apr 9 '17 at 4:25
• You can use comments to reply. ;) Have you tried using the anchoredPosition as described in the linked thread? This is common to both overlay and world space UI objects. – DMGregory Apr 9 '17 at 14:03
• Never mind, there is a Vector2.Lerp – S. Neut Apr 9 '17 at 14:38
• i tried using a vector2 instead of a vector3 but that didn't work. The anchoredPosition did not fix the issue but the recctransform values are closer to the desired ones then before – S. Neut Apr 9 '17 at 14:41
• This is the current code: pastebin.com/xDwe5yxP – S. Neut Apr 9 '17 at 14:43

The easiest way to achieve things like this is to use Tweening and the most popular lib is: http://dotween.demigiant.com/

Then, you do something like:

using DG.Tweening;

public void Start(){ // or onClick, or whatever you want
objectToMove.transform.DoMove(target.transform.position, 2f)
.SetEase(Ease.Linear).SetDelay(1f);
}


DoMove() parameters are: the target position and the time to move

SetEase() sets your desired intepolation (there are alot of them)

SetDelay() sets the start delay to one second.

There are hundreds of methods in the documentation: http://dotween.demigiant.com/documentation.php

Hope this helps!

• Thanks for your reply! This does seem interesting but unfortunately in the assignment we have to use the lerp function :) Do you have any advice on how to move an image on a canvas that is set to world space render mode? – S. Neut Apr 9 '17 at 13:45