[UGUI연습] UI 연출

UI 애니메이션

리본 애니메이션 생성

0일때 bg의 x스케일이 0

20일때 1이 되도록 한다. 녹화버튼을 누르고 해야 저장된다.

 

text는 시작할때 비활성화 10초 즈음에 활성화 되도록 만들어준다.

-애니메이션으 루프는 꺼준다.

애니메이션 생성 결과

Animation receiver 사용해보기

 

- New State를 생성하고 기본 state로 만든 후, trigger로 transition을 추가해준다.

-리본의 자식의 text 두개를 비활성화 시킨다.(애니메이션으로 켜줄 것이다.)

Animation Receiver

-RequireComponent 속성은 요구되는 컴포넌트를 종속성으로 자동으로 추가한다.

Finished에 이벤트 추가

 

비슷한 방법으로 별 애니메이션도 추가해보았다.

-다만 onfinished를 수정하였다. 원하는 지점에서 이벤트를 받아 파티클 시스템이 실행되도록 메인에서 호출할것이다.

main 수정

 

실행 결과

 

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

public class Test07Main : MonoBehaviour
{
    [SerializeField] private Button btnPlay;
    [SerializeField] private Animator animRibbon;
    [SerializeField] private Button btnStarsPlay;
    [SerializeField] private TMP_Dropdown dropdown;
    [SerializeField] private Animator animLeftStar;
    [SerializeField] private Animator animMiddleStar;
    [SerializeField] private Animator animRightStar;
    [SerializeField] private ParticleSystem[] fxStars;
    
    private int starCount = 1;

    void Start()
    {
        this.btnPlay.onClick.AddListener(() => {
            this.animRibbon.SetTrigger("Play");
        });

        this.dropdown.onValueChanged.AddListener((index) =>
        {
            Debug.LogFormat("onValueChanged: {0}", index);
            this.starCount = index + 1;
        });

        this.btnStarsPlay.onClick.AddListener(() =>
        {
            Debug.LogFormat("{0} 별 애니메이션 실행", this.starCount);

            switch (this.starCount)
            {
                case 1:
                    this.animLeftStar.GetComponent<AnimationReceiver>().onFinished = () =>
                    {
                        var fx = this.fxStars[0];
                        fx.gameObject.SetActive(true);
                        fx.Play();
                    };
                    this.animLeftStar.SetTrigger("Play");
                    break;

                case 2:
                    this.animLeftStar.GetComponent<AnimationReceiver>().onFinished = () =>
                    {
                        var fx = this.fxStars[0];
                        fx.gameObject.SetActive(true);
                        fx.Play();
                        this.animMiddleStar.GetComponent<AnimationReceiver>().onFinished = () =>
                        {
                            var fx1 = this.fxStars[1];
                            fx1.gameObject.SetActive(true);
                            fx1.Play();
                        };
                        this.animMiddleStar.SetTrigger("Play");
                    };
                    this.animLeftStar.SetTrigger("Play");

                    break;

                case 3:
                    this.animLeftStar.GetComponent<AnimationReceiver>().onFinished = () =>
                    {
                        var fx = this.fxStars[0];
                        fx.gameObject.SetActive(true);
                        fx.Play();
                        this.animMiddleStar.GetComponent<AnimationReceiver>().onFinished = () =>
                        {
                            var fx1 = this.fxStars[1];
                            fx1.gameObject.SetActive(true);
                            fx1.Play();

                            this.animRightStar.GetComponent<AnimationReceiver>().onFinished = () =>
                            {
                                var fx2 = this.fxStars[2];
                                fx2.gameObject.SetActive(true);
                                fx2.Play();
                            };

                            this.animRightStar.SetTrigger("Play");
                        };
                        this.animMiddleStar.SetTrigger("Play");
                    };
                    this.animLeftStar.SetTrigger("Play");
                    break;
            
        }
        });
        }

}