Help us understand the problem. What is going on with this article?

できるだけ手抜きでUIのアニメーションを実現する

More than 3 years have passed since last update.

この記事は、UnityAdventCalendar2016 14日目の記事になります

はじめに

去年に引き続きまして、12月14日にUIで手抜きするためのTips的なものをアップさせていただきます。
ちなみに、14日は私の誕生日です。

去年の記事

http://qiita.com/ShiroKuro/items/c028d29229fc135bac01
こちらで、ノンコーディングでEditorから触れる機能だけで簡単なUI遷移を行いました。

今年の記事

去年、Animationで遷移アニメを作成し、TriggerからのUI遷移を行いましたが、
正直Animationの作成がめんどくさいです。
ですので、今回はアニメーションを出来るだけシンプルな形で実装してみようと思います。

実装

とりあえず、各画面の状態を作ります。

状態1
image

状態2
image

状態3
image

ではここにアニメーションを作っていこうと思いますが、3画面間の遷移で6パターンのアニメを作るのは大変です。
とりあえず、遷移は置いておいて、各状態を記憶したAnimationClipを作りましょう。

状態1
image

状態2
image

状態3
image

準備は大体これでできました。

ではAniamtionControllerを適当に組み上げます。
image

遷移条件は以下みたいな感じです。
image
ここでTransitionDuration(s)を0.2~0.5秒くらいにしとくのがポイントです。

後は、遷移条件をコントロールするViewに値を渡してやります。

ViewControl.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

[RequireComponent(typeof(Animator))]
public class ViewControl : MonoBehaviour {
    private Animator _animator;
    private Animator Anim{
        get{
            return _animator??(_animator = GetComponent<Animator>());
        }
    }

    public void SetView(int viewId){
        Anim.SetInteger ("View", viewId);
    }

    void Update(){
        ///View3から戻すコントロールをつけ忘れたのでコードから
        if (Input.GetKeyDown (KeyCode.Escape)) {
            SetView (1);
        }
    }
}

各ボタンと、こちらのSetViewを紐づけてやればOKです。

完成図

Advent2016.gif
画面間の遷移アニメができました。

これは、AnimatorのState間の自動補完を利用して、アニメーションをなんちゃってで作っています。
手抜きではありますが、何もないよりは画面が動いて楽しいのではないでしょうか?
(ちなみにLinearでしか遷移しないのでEaseTypeをいじりたい場合は真面目に作ってください)

**おまけ
こんなUIパーツを作ります
image

こんなスクリプトを書きます
(DoTweenを事前にインポートしています。)

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

public class WindowScript : MonoBehaviour {
    void Awake(){
        this.transform.localScale = Vector3.zero;
    }


    void OnEnable(){
        this.transform.DOScale (1.0f, 0.3f);
    }

    public void Close(){
        this.transform.DOScale (0.0f, 0.3f)
            .OnComplete ( ()=> this.gameObject.SetActive (false));
    }

}

こっそりHeaderに用意していたメニューボタンに以下を、
image

作成したウィンドウのCloseボタンに以下を紐づけます。
image

あとは、作成したウィンドウを非アクティブにして、Playボタンを押します。
Advent2016_1.gif

ウィンドウ型ダイアログの完成です。

MonoBehaviourのMessageのOnEnableはオブジェクトがアクティブになった瞬間に呼ばれるので、
ここにイベントを仕込んでおくといろいろと便利です。
(OnDisableは呼ばれたら非Activeになるのでアニメを仕込むのには向ていないです……)

今回もほとんどコードは書いていませんが、皆さんいろいろと試して動きのある画面を作ってみてください。
簡単なアニメーションでもアプリの印象が大分変わります。

明日はKan_Kicuchiさんの「クラスを丸ごと保存するデータ管理方法」です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした