残像が残るボタン演出(ツイステの選択肢ボタンを再現)

ツイステの選択肢ボタンの演出を再現してみたいと思う。タップすると残像?のようなものが手前に迫ってくる演出のことだ。*1 youtu.be

完成図

実装

残像用のオブジェクトをボタンとは別に用意してDoTweenで動かした。

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

public class test_TW_choiceButtonEffect : Button
{
    private List<GameObject> buttonList = new List<GameObject>();

    protected override void Start()
    {
        foreach (Transform t in this.transform.parent)
        {
            this.buttonList.Add(t.gameObject);
        }
    }

    public override void OnPointerDown(UnityEngine.EventSystems.PointerEventData eventData)
    {
        //縮む
        float scale = 0.95f;
        transform.localScale = new Vector3(scale, scale, scale);
    }
    public override void OnPointerUp(UnityEngine.EventSystems.PointerEventData eventData)
    {
        //元に戻る
        transform.localScale = Vector3.one;
    }

    public override void OnPointerClick(UnityEngine.EventSystems.PointerEventData eventData)
    {
        gameObject.GetComponent<Button>().enabled = false;

        //残像用のオブジェクト作成
        GameObject effectObj = GameObject.Instantiate(this.gameObject);

        effectObj.transform.SetParent(this.transform.parent, false);

        float effectTime = 0.7f;

        Sequence seq = DOTween.Sequence();
        seq.AppendCallback(() =>
        {
            DOTween.To(() => effectObj.GetComponent<CanvasGroup>().alpha, (n) => effectObj.GetComponent<CanvasGroup>().alpha = n, 0, effectTime);
            effectObj.transform.DOScale(1.5f, effectTime).onComplete = () =>
            {
                Destroy(effectObj);
            };

            //選ばれなかった選択肢が消える演出
            foreach (GameObject t in this.buttonList)
            {
                if(t != this.gameObject)
                {
                    DOTween.To(() => t.GetComponent<CanvasGroup>().alpha, (n) => t.GetComponent<CanvasGroup>().alpha = n, 0, effectTime);
                }
            }
        });
        seq.AppendInterval(effectTime + 1f); //選択したものを見せる時間
        seq.Append(DOTween.To(() => gameObject.GetComponent<CanvasGroup>().alpha, (n) => gameObject.GetComponent<CanvasGroup>().alpha = n, 0, 0.1f));
        seq.AppendCallback(() =>
        {
            Destroy(this.gameObject);
        });
    }
}

*1:FGOの選択肢も似てる
youtu.be