Unity Android 로그인을 위한 움직이는 UI 구현

DOTween

Tween System을 구현해둔 Asset 중 하나 (여기) 에서 Asset을 내려받을 수 있음

무료버전, 유료버전이 존재하므로 예산에 맞춰서 사용하면 좋음

 

DOTween으로 UI 움직이기

- Android/iOS같은 모바일 기기에서는 Input Field가 활성화되면 가상 키보드가 나타나면서 UI를 가리는 현상이 발생함

 

- DOTween Asset을 사용하면 UI를 움직이는 다양한 방법을 사용할 수 있음

 

- Canvas의 UI를 움직일 때는 DOAnchorPosX, DOAnchorPosY를 사용함

- 해당 함수의 파라미터는(float 움직일 값, float 움직임을 수행할 시간)

 

- UI를 사라지게 하고싶을때는 DOFade 함수를 사용함

- 해당 함수의 파라미터는(float 0.0~1.0 사이의 값, float 수행할 시간)

using DG.Tweening;

void TabletUI_goUP()
{
	RectTransform rt = TabletUIGroup.GetComponent<RectTransform>();
                
	if(rt.position.y <= 850.0f)
	{
		LogoImage.GetComponent<RawImage>().DOFade(0.0f,0.1f);
		rt.DOAnchorPosY(280.0f, 0.2f);
	}            
}

void TabletUI_goDOWN()
{
	RectTransform rt = TabletUIGroup.GetComponent<RectTransform>();
        
	if(rt.position.y > 800.0f)
	{
		rt.DOAnchorPosY(1.0f, 0.2f);
		LogoImage.GetComponent<RawImage>().DOFade(1.0f,0.1f);
	}            
}

- 원하는 이벤트에 반응해 UP/DOWN 함수를 실행만해주면 아래와 같이 보여줄 수 있음

if(input1.GetComponent<TMP_InputField>().isFocused || input2.GetComponent<TMP_InputField>().isFocused)
{
	TabletUI_goUP();
}
else
{
	TabletUI_goDOWN();
}

- 위치는 AnchorPos 함수를 통해 정밀하게 조정하면 더 보기 좋은 UI를 만들 수 있음

DOTWeen Example