DOTween (HOTween v2)를 활용한 애니메이션 연출

제가 즐겨사용하는 Plugin DOTween 를 활용하여 Unity에서 쫀쫀(?)한 애니메이션 연출을 알아보도록 하겠습니다.

 

 

DOTween 설치

먼저 Unity PackageManager에서 Dotween을 검색하여 DOTween (HOTween v2)를 download 및 import 해줍니다.

 

PackageManager에서 Dotween을 검색합니다

import 완료 후 패널이 하나 뜰텐데요 Open DOTween Utility Panel -> Setup DOTween -> Apply를 클릭해 줍니다. 

 

Scene 세팅

그리고 Scene에 애니메이션이 들어갈 Cube를 아래와 같이 배치해보겠습니다.

 

 

Cube.cs

Cube.cs 클래스를 만들어서 각 큐브의 component로 붙여줍니다. 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;

public class Cube : MonoBehaviour
{
	[SerializeField] private Ease easeType = Ease.OutBack;

	[SerializeField] private float wantedScale = 1f;
	[SerializeField] private float animationTime = 1.5f;

	public void Init()
	{
		transform.localScale = Vector3.zero;
	}

	public void Animate()
	{
		transform.DOScale(wantedScale, animationTime).SetEase(easeType);
	}
}

 

Cube.cs 에서 Init()에서 Cube scale을 0으로 만들어서 안보이게 해줍니다. 이 Init() 함수는 이후에 만들 CubeManager에서 실행시켜줄 예정입니다. Animate() 함수는 실행하면 wantedScale로(스케일 1f로) animationTime 의 시간동안 (1.5f초 동안) 스케일을 변경시켜줍니다. SetEase는 애니메이션 종류라고 할 수 있는데요. 여기 링크를 확인해보시면 다양한 종류의 tween animation graph를 보실 수 있습니다. 

 

 

CubeManager.cs

이제 Cube 들을 관리할 CubeManager.cs를 만들어 보겠습니다. 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CubeManager : MonoBehaviour
{
    [SerializeField] private List<Cube> cubes = new List<Cube>();

	private void Start()
	{
		InitCubes();
		StartCoroutine(StartCubeAnimations(0.5f)); 
	}
	private void InitCubes()
	{
		for(int i=0; i< cubes.Count; i++)
		{
			cubes[i].Init();
		}
	}
	IEnumerator StartCubeAnimations(float timeBtwCubeAnim)
	{
		for(int i=0; i< cubes.Count; i++)
		{
			cubes[i].Animate();
			yield return new WaitForSeconds(timeBtwCubeAnim);
		}
	}

}

CubeManager.cs에서 선언된 List<Cube> cubes 는 [SerializeField]로 하여 인스펙터 창에서 Cube들을 추가해줍니다.

 

CubeManager.cs에서 Start()에 InitCubes()를 실행시키면 cubes 리스트에서 loop가 돌면서 각 Cube.cs의 Init()을 실행시킵니다. (큐브 scale을 0으로 만들어줌). 그리고 코루틴 StartCubeAnimation을 실행시키는데 이 코루틴에서도 cube 리스트를 for loop이 도는데 이때 한 루프 후 yield return new WaitForSeconds()로 각 루프마다 실행 텀을 둡니다. (0.5f초) 그렇게 되면 점진적으로 0.5초의 간격을 두고 cube마다 Animate()함수가 실행됩니다. 

 

실행 영상

DOTween을 활용한 cube animation 플레이 영상

 

예시(PaintMusic Trailer)

위와 같은 방법으로 DOTween을 활용하여 PaintMusic의 Trailer를 만들어보았습니다.