DoTweenを利用してポップアップをアニメさせる

１．前提条件

　DoTweenアセットをインストールしてあるプロジェクトであることと、何らかのポップアップ用プレファブを作成してあることが前提として必要になります。

　DoTweenの導入についてはこちらの記事がわかりやすいので参考にしてください。

@loveRice様
[Unity] DOTweenを使ってみよう
https://qiita.com/loveRice/items/d2dcc1cd67ee1a699...

　ポップアップについてはブロック崩しの拡張のゲーム終了処理を追加するで作成したポップアップし、そちらにアタッチされている
QuitCheckPouUpに処理を追加して利用しています。

　他に自作のポップアップがあるようであれば、そちらのポップアップにアタッチされているスクリプトを加筆修正してご利用ください。

２．ポップアップをフェイドイン/フェイドアウトさせて表示する

　動画のように、ポップアップが開く際には徐々に表示させて、またポップアップが閉じる際には徐々に非表示にします。

https://gyazo.com/eef79937b219740f80b57c96dfdfe221

　QuitCheckPouUpスクリプトを修正して処理を実装します。

QuitCheckPouUp.cs

　<=　クリックすると開きます

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;       // <= 追加

[RequireComponent(typeof(CanvasGroup))]　　　// <= 追加
public class QuitCheckPouUp : MonoBehaviour
{
    public Button btnQuitGame;        // ゲーム終了ボタン
    public Button btnClosePopup;      // ポップアップを閉じてゲームに戻るボタン

    public CanvasGroup canvasGroup;　 // <= 追加　ポップアップを表示の制御用
    public float fadeTime = 1.0f;     // <= 追加　ポップアップを表示する際のフェイドイン/アウトの時間

    IEnumerator Start()               // <= 戻り値を void ではなく IEnumerator型にして非同期処理を可能にする
    { 
        // 各ボタンに処理を登録
        btnQuitGame.onClick.AddListener(GameDirector.QuitGame);
        btnClosePopup.onClick.AddListener(OnClickClosePopUp);

   ///* 以下を追加 *///

        // CanvasGroupのアルファを0にしてポップアップ全体を透明にする
        canvasGroup.alpha = 0;

        // アルファを徐々に1に近づけて、ポップアップを表示する
        canvasGroup.DOFade(1, fadeTime);

        //yield return new WaitForSeconds(fadeTime);                 // ①　　<=　ここの待機処理は、①、②のどちらを使っても構いません。いずれか１つだけを使ってください。
        yield return new WaitUntil(() => canvasGroup.alpha == 1);    // ②    今回は①をコメントアウトし、②の処理を利用しています

   ///* ここまで追加 *///

        // ゲーム内時間の流れを停止
        Time.timeScale = 0;
    }

    /// <summary>
    /// ポップアップを閉じてゲームに戻る
    /// </summary>
    private void OnClickClosePopUp() {
        // ゲーム内時間の流れを再開する
        Time.timeScale = 1.0f;

   ///* 以下を追加 *///

        // アルファを徐々に0に近づけて、ポップアップを非表示にする
        canvasGroup.DOFade(0, fadeTime);
        
        Destroy(gameObject, fadeTime);
       
   ///* ここまで追加 *///

    }
}

　いくつか新しい処理がありますので紹介しておきます。

[RequireComponent(typeof(クラス名/コンポーネント名))]属性

　　
　この[RequireComponent(typeof(クラス名/コンポーネント名))]属性は、(引数)で指定したクラスやコンポーネントがゲームオブジェクトにアタッチされていないとエラーが出るようになります。　
またこの属性が定義されているスクリプトをゲームオブジェクトにアタッチすると、引数で指定しているコンポーネントが自動的にアタッチされます。(今回はCanvasGrourp)
　
　今回はCanvasGrourpコンポーネントが必要になりますので、[RequireComponent(typeof(CanvasGroup))]属性を追加して、コンポーネントのアタッチを必須条件にしています。

IEnumerator Start()

　
　Startメソッドは、voidではなく、IEnumerator型の戻り値を宣言できます。これによってStartメソッド内に非同期処理(コルーチン処理)を実装出来るようになります。
今回は以下の２つの待機処理を実装するために、StartメソッドをIEnumerator型で宣言しています。

①　yield return new WaitForSeconds(fadeTime);
②  yield return new WaitUntil(() => canvasGroup.alpha == 1);

コルーチン処理のメソッド（yield return new WaitForSeconds()、 yield return new WaitUntil()）

　どちらもコルーチン内で命令できる待機処理です。yield return をつけて処理を実行します。

①の場合は引数でした秒数間だけ、処理を待ちます。ここでは fadeTime を引数に指定していますので、この変数の値だけ処理を待ちます。引数にはfloat型の値のみ入ります。

②の場合は引数の条件を満たす(trueになる)まで、処理を待ちます。ここでは canvasGroup.alpha の値が 1 になるまで処理を待ちます。引数の条件はラムダ式で記述し、デリゲートで指定します。

　スクリプトの修正が終了しましたら、ポップアップのプレファブのインスペクターにあるQuitCheckPopUpを確認しましょう。
CanvasGrourpがポップアップにアタッチされていなければAdd ComponentしてCanvasGrourpを追加します。その後、それをインスペクターにてアサインしてください。

FadeTimeはポップアップをフェイドイン/フェイドアウトする際のアニメ時間です。初期値は1ですが、自由に変更してみてください。

　

　設定が終了しましたら、ゲームを実行します。ポップアップがフェイドインして徐々に表示されれば成功です。
またポップアップを閉じる際にもフェイドアウトしながら徐々に非表示なっていくかも確認してください。

３．ポップアップのサイズを変化させて表示する

　動画のようにフェイド処理に加えて、ポップアップのサイズを変化させながら表示するようにしてみましょう。
https://gyazo.com/12c2e38ac8a50409a59b9e74643838db

　QuitCheckPouUpスクリプトを修正して処理を実装します。

QuitCheckPouUp.cs

　<=　クリックすると開きます

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

[RequireComponent(typeof(CanvasGroup))]
public class QuitCheckPouUp : MonoBehaviour
{
    public Button btnQuitGame;        // ゲーム終了ボタン
    public Button btnClosePopup;      // ポップアップを閉じてゲームに戻るボタン

    public CanvasGroup canvasGroup;
    public float fadeTime = 1.0f;     // ポップアップを表示する際のフェイドイン/アウトの時間

    public Ease easeType;             // <=　追加　DoTweenのEasing関数の設定。補間処理によりアニメーションが滑らかになる
    public float startScale = 0.5f;   // <=　追加　ポップアップの初期のサイズ設定値。小さくしておいて、表示する大きさまで戻すアニメさせる

    IEnumerator Start() 
    { 
        // 各ボタンに処理を登録
        btnQuitGame.onClick.AddListener(GameDirector.QuitGame);
        btnClosePopup.onClick.AddListener(OnClickClosePopUp);

        // CanvasGroupのアルファを0にしてポップアップ全体を透明にする
        canvasGroup.alpha = 0;

        // ポップアップの初期サイズを設定(小さくしておく)
        transform.localScale = Vector3.one * startScale;    <= 追加

        // DoTweenのSequence(シーケンス)を初期化して利用できるようにする。
        Sequence sequence = DOTween.Sequence();             <= 追加

        // アルファを徐々に1に近づけて、ポップアップを表示する　＋　同時にサイズを徐々に大きくしていく
        sequence.Append(canvasGroup.DOFade(1, fadeTime));                                 <= 処理を修正
        sequence.Join(transform.DOScale(Vector3.one, fadeTime).SetEase(easeType));        <= 追加

        //yield return new WaitForSeconds(fadeTime);
        yield return new WaitUntil(() => canvasGroup.alpha == 1);

        // ゲーム内時間の流れを停止
        Time.timeScale = 0;
    }

    /// <summary>
    /// ポップアップを閉じてゲームに戻る
    /// </summary>
    private void OnClickClosePopUp() {
        // ゲーム内時間の流れを再開する
        Time.timeScale = 1.0f;

        Sequence sequence = DOTween.Sequence();　    <= 追加

        // アルファを徐々に0に近づけて、ポップアップを非表示にする　＋　同時にサイズを徐々に小さくしていく
        sequence.Append(canvasGroup.DOFade(0, fadeTime));                               <= 処理を修正
        sequence.Join(transform.DOScale(Vector3.zero, fadeTime).SetEase(easeType));　   <= 追加

        Destroy(gameObject, fadeTime);       
    }
}

Sequence(シーケンス)

　DoTweenの持つ機能の１つです。Tween処理を順番に処理したい場合、あるいは同時に処理したい場合に利用します。
今回はフェイド処理と一緒にポップアップのサイズを変更を行いたい＝同時に処理したいことがあるために利用をしています。

　まずは宣言して初期化を行います。宣言自体は宣言フィールドで行っておいても問題ありませんが、今回はスコープを考えて各メソッド内で初期化しています。変数名も同名にしています。

Sequence sequence = DOTween.Sequence();

　

　次に同時に処理したいTweenを記述します。ここでは最初のフェイドイン処理＋ポップアップのサイズを元の大きさに戻す処理を例に挙げます。

　まずは最初に行うTween処理を、sequence.Append()メソッドで引数内に処理を記述します。２の手順のスクリプトで書いたTween処理をそのままこの引数に入れて問題ありません。

　続いてこの最初の処理と同時に行いたいTween処理をsequence.Join()メソッドで引数内に処理を記述します。この引数内にポップアップの大きさを元のサイズに戻す処理を記述します。
引数にはDOScale()メソッドを利用することでサイズを変更します。こちらの第1引数が最終的なサイズ、第2引数が処理にかかる時間です。時間はDOFade()と同じ時間に指定します。

　2つ目の処理には、SetEase()メソッドを追加しています。このEase処理によってアニメする際に補間処理が入りなめらかな処理が実現できます。
こちらの引数にはEaseというDoTweenの用意している補間タイプを１つだけ設定できます。今回はPublicの変数を引数に指定しているのでインスペクターでEaseの設定が可能です。
色々なEaseがありますので、自分の好みかつ、よい雰囲気のEaseを調整して選択しましょう。

sequence.Append(canvasGroup.DOFade(1, fadeTime));
sequence.Join(transform.DOScale(Vector3.one, fadeTime).SetEase(easeType));

　スクリプトを修正すると、インスペクターに２つのアサイン情報が追加されます。
startScaleは最初に小さくしておくためのサイズの値です。サイズは1に向かってアニメするので、0.3や0.5などの数字にしておいて実際の動作をみながら値を調整しましょう。
EaseTypeは先ほど説明しました、DoTweenのTweenの補間処理です。こちらも設定を変えて試してみてください。

　ゲームを実行し、ポップアップを開いてみましょう。フェイドイン処理とサイズ変更処理が一緒に行われるようになれば成功です。

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

DoTweenを利用してポップアップをアニメさせる - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school