유니티 Animation를 사용하여 Fade In/Out 연출효과 구현하기

애니메이터를 사용하여 Fade in/out 기법을 구현해보려고 한다.

먼저 애니메이터를 적용할 오브젝트(이미지)에 Animation을 생성해주고 Create - Image - Color를 Add Property해준다. 화면이 투명한 상태에서 애니메이션이 1초 간 적용된다고 가정했을 때, Fade in은 Color.a 알파값을 1에서 0으로 설정하고 Fadeout은 알파값을 0에서 1로 설정한다. 생성된 Animation Clip에 Loop Time 체크를 해제해 주었다.(한 번만 구현,반복 없게 하기 위해)

 Animator Controller에서 다음과 같이 Fade in과 Fade out을 Make Transition해준다. 그리고 Parameter에 Bool 타입 변수를 생성해주고 Fadeflg라고 명명했다.

Transition을 클릭하여 다음과 같이 세팅해주었다. Has Exit Time 체크를 해제하고 Transition Duration을 0으로 설정해주었다.(애니메이션 효과가 바로 적용되기 위해) Conditions에 Fadeflg를 추가하고 Fadein -> Fadeout은 true/ Fadeout -> Fadein은 false로 적용했다.

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

public class FadeinoutAni : MonoBehaviour
{
    Animator ani;
    bool FadeChangeFlg;
    void Start()
    {
        ani = GetComponent<Animator>();    
    }

    void Update()
    {
        if(Input.GetMouseButtonDown(0))
        {
            FadeChangeFlg = ani.GetBool("Fadeflg");
            ani.SetBool("Fadeflg", !FadeChangeFlg); // !을 붙이면 클릭할 때 마다 반대되는 동작
        }
    }
}

애니메이션이 적용될 이미지(화면)에 해당 스크립트를 추가해주었다. if 조건문에서 마우스 왼쪽 클릭을 누르면 Fade in이 적용되는데 FadeChangeFlg에 !을 붙여 한 번 더 클릭하면 Fade out으로 전환되어 동작하도록 설정했다.