【Unity】DOTweenでボタンをプルプルさせる

UnityでDOTweenを使ってクリックされた時にプルプルするボタンを作りたい！

概要

この記事では、UnityでDOTweenを使ってクリックされた時にプルプルするボタンを作る手順を掲載する。

仕様書

環境

Unity 2021.3.3f1
DOTｗeen (HOTween V2) 1.2.632

手順書

UnityにDOTweenをインストールする。手順については下記の記事を参照して下さい。
- https://blog.nekonium.com/unity-install-dotween/
プルプルさせたいボタンをシーンに追加する。今回は下図のように「Button (legacy)」を追加した。

PurupruButtonDotween.csを作成して、下記のような感じに入力する。

using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;
public class PurupruButtonDotween : MonoBehaviour
{
private Vector3 defaultScale;

void Start()
{
    defaultScale = transform.localScale;
    GetComponent<Button>().onClick.AddListener(OnClick);
}

void OnClick()
{
    transform.DOKill();
    transform.localScale = defaultScale;
    transform.DOPunchScale(new Vector3(0.05f, 0.05f, 0.05f), 1f);
}
}

PurupruButtonDotween.csを「Button (legacy)」にアタッチする。
シーンを再生してボタンをクリックすると下図のようにプルプルする。

ちょっと解説

ボタンをプルプルさせるだけであれば、transform.DOPunchScale(new Vector3(0.05f, 0.05f, 0.05f), 1f)の行の部分だけで良いんだけども、この行だけだとアニメーションが終わる前に連続でクリックするとタイミングによってボタンの大きさが大きくなったり、小さくなってしまう。

これを防ぐためにVector3 defaultScaleメンバー変数にボタンの元のサイズを記録しておき、プルプルのアニメーションを再生する前にtransform.DOKill()で再生中のアニメーションを停止して、transform.localScale = defaultScaleでボタンのサイズを元のサイズに戻す。

まとめ（感想文）

これを使っていろんなものをプルプルさせたい！