UnityDOTweenのすすめ【#1DOFade編】

はじめに
使えるメンバー
DOFadeの使用例
最後に

はじめに

UnityのDoTweenアセットを使用することによって。
オブジェクトの位置や回転スケール色などの変化をスムーズにアニメーションするのに非常に便利です。
今回はDOTweenのDOFadeについて解説していきます。

もしDOTweenを導入されていない方は下の記事で導入方法を解説しているので、導入をしてください。

使えるメンバー

DOFadeでは以下のメンバーを実行可能です。

AudioSource:Volume
Material:Alpha
SpriteRenderer:Alpha
CanvasGroup:Alpha
Graphic:Alpha(UIのImage,Text,RawImage,Buttonなど)
Outline:Alpha

DOFadeの使用例

AudioSource.DOFade

AudioSource.DOFadeを使用することによって、滑らかに音量を調整することができます。
下のスクリプトが例です。

using UnityEngine;
using DG.Tweening;//これを必ず追加してください

public class FadeAudio : MonoBehaviour
{

    public AudioSource FadeAudioSource;

    void Start()
    {
        FadeAudioSource.Play();
    }

    void Update()
    {
        if(Input.GetKeyDown(KeyCode.Space))
        {
            // FadeAudioSource.DOFade(ターゲットボリューム, フェードにかかる時間)
            // 例えば、音量を0に1秒かけてフェードアウトさせる場合
            FadeAudioSource.DOFade(0, 1f);
        }
    }
}

下の動画が動作例です。

Material:Alpha

Material.DOFadeを使用することによって、なめらかにマテリアルの透明度を変更することができます。
下のスクリプトが例です。

using UnityEngine;
using DG.Tweening;//これを必ず追加してください

public class FadeMaterial : MonoBehaviour
{

    public Material FadeMat;

    void Update()
    {
        if(Input.GetKeyDown(KeyCode.Space))
        {
            // FadeMat.DOFade(ターゲット透過度, フェードにかかる時間)
            // 例えば、透明度を0に1秒かけてフェードアウトさせる場合
            FadeMat.DOFade(0f, 1f);
        }
    }
}

スペースを押すとマテリアルがどんどん透明になっていきます。

もし透明にならない場合はMaterialのRendering ModeがFadeになっていない可能性があるのでFadeにしてください。

SpriteRenderer:Alpha

SpriteRenderer.DOFadeを使用することによって、なめらかにカラー項目の透過度を変更することができます。
下のスクリプトが例です。

using UnityEngine;
using DG.Tweening;//これを必ず追加してください

public class FadeSpriteRenderer : MonoBehaviour
{

    public SpriteRenderer FadepriteRenderer;

    void Update()
    {
        if (Input.GetKeyDown(KeyCode.Space))
        {
            // FadepriteRenderer.DOFade(ターゲット透過度, フェードにかかる時間)
            // 例えば、透明度を0に1秒かけてフェードアウトさせる場合
            FadepriteRenderer.DOFade(0f, 1f);
        }
    }
}

スペースを押すとSpriteRendererの透明度がどんどん透明になっていきます。

CanvasGroup:Alpha

CanvasGroup.DOFadeを使用することによって、CanvasGroupの透明度を変更できます。
下のスクリプトが例です。

using UnityEngine;
using DG.Tweening;//これを必ず追加してください

public class FadeCanvasGroup : MonoBehaviour
{

    public CanvasGroup FadeCanvasGrp;

    void Update()
    {
        // FadeCanvasGrp.DOFade(ターゲット透過度, フェードにかかる時間)
        // 例えば、透明度を0に1秒かけてフェードアウトさせる場合
        FadeCanvasGrp.DOFade(0f, 1f);
    }
}

スペースを押すとCanvasのオブジェがどんどん透明になっていきます。

Graphic:Alpha

Graphic.DOFadeを使用することによって、Graphic.DOFadeの透明度を変更できます。
ここのGraphic部分にはUIの【Image,Text,RawImage,Button】などが当てはまります。
今回は試しにTextの透明度を変更してみます。

using UnityEngine;
using UnityEngine.UI;//これを追加してください
using DG.Tweening;//これを必ず追加してください

public class FadeGraphic : MonoBehaviour
{

    // 今回はTextを使用していますが,Image,Text,RawImage,Buttonなども使えます
    public Text FadeText;

    void Update()
    {
        // FadeText.DOFade(ターゲット透過度, フェードにかかる時間)
        // 例えば、透明度を0に1秒かけてフェードアウトさせる場合
        FadeText.DOFade(0f, 1f);
    }
}

スペースを押すとTextがどんどん透明になっていきます。

Outline:Alpha

Outline.DOFadeを使用することによって、Outlineの透明度を変更できます。
下のスクリプトが例です。

using UnityEngine;
using UnityEngine.UI;//これを必ず追加してください
using DG.Tweening;//これを必ず追加してください

public class FadeOutline : MonoBehaviour
{

    public Outline Fadeoutline;

    // Update is called once per frame
    void Update()
    {
        if(Input.GetKeyDown(KeyCode.Space))
        {
            // Fadeoutline.DOFade(ターゲット透過度, フェードにかかる時間)
            // 例えば、透明度を0に1秒かけてフェードアウトさせる場合
            Fadeoutline.DOFade(0f, 1f);
        }
    }
}