Unity入門

【Unity】Buttonをスクリプトでアニメーションさせる方法【よく使う5選】

  /
目次
  1. この記事について
  2. この記事でわかること
  3. Button – TextMeshProとは？
  4. スクリプトでアニメーション実装
    1. クリック時に縮む（押した感覚を出す）
    2. ホバー時に拡大（存在感を強調）
    3. ホバー時に色変更（視覚的なフィードバック）
    4. 点滅（フェード）（「Press Start」系に最適）
    5. ゆらゆら揺れる / 軽いシェイク（注目させる演出）
  5. まとめ

この記事について

この記事ではアニメーションをスクリプトと動画で誰でも作れるようにしています。

この記事でわかること

  • クリック時に縮む（押した感覚を出す）
  • ホバー時に拡大（存在感を強調）
  • ホバー時に色変更（視覚的なフィードバック）
  • 点滅（フェード）（「Press Start」系に最適）
  • ゆらゆら揺れる / 軽いシェイク（注目させる演出）

Button – TextMeshProとは？

Button – TextMeshProについては以下の記事を参考にしてください。

【Unity】Buttonの使い方を徹底解説UnityのButtonコンポーネントを活用しよう！スクリプトからの制御、OnClickの設定、EventTriggerの使い方、Interactableの変更方法まで詳しく解説。初心者でもわかりやすいコード付きで、すぐに実践可能！...

スクリプトでアニメーション実装

クリック時に縮む（押した感覚を出す）

「押した感覚」を演出でき、操作が直感的になります。今回はTransformの「localScale」と「IPointerDownHandler」、「 IPointerUpHandler」で演出していきます。

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class Button_Animation : MonoBehaviour, IPointerDownHandler, IPointerUpHandler
{
    [SerializeField] private UnityEngine.UI.Button testButton;
    [SerializeField] private Vector3 originalScale;

    void Start()
    {
        // 同じGameObjectにアタッチされているButtonを取得
        testButton = GetComponent<UnityEngine.UI.Button>();

        originalScale = testButton.transform.localScale;
    }

    public void OnPointerDown(PointerEventData eventData)
    {
        testButton.transform.localScale = originalScale * 0.9f; // 押したら縮む
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        testButton.transform.localScale = originalScale; // 離したら戻る
    }
}

実行すると動画のようになりクリックした感覚がでますね！

ホバー時に拡大（存在感を強調）

ホバーで「存在感」を出せるので、メニュー画面に効果的です。今回は「RectTransform」と「IPointerEnterHandler」、「 IPointerExitHandler」で演出していきます。

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class Button_Animation : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{
    [SerializeField] private RectTransform testButton;
    [SerializeField] private Vector3 originalScale;

    void Start()
    {
        // 同じGameObjectにアタッチされているButtonを取得
        testButton = GetComponent<RectTransform>();

        originalScale = testButton.transform.localScale;
    }

    public void OnPointerEnter(PointerEventData eventData)
    {
        testButton.localScale = originalScale * 1.1f; // 拡大
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        testButton.localScale = originalScale; // 戻す
    }
}

実行すると動画のようになり、マウスカーソルを当てた時に拡大、離すと元に戻るようになりました。

ホバー時に色変更（視覚的なフィードバック）

視覚的なフィードバックを与えられるので、ユーザーが「押せる」と認識しやすくなります。今回は「Color」を変更していきます。

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class Button_Animation : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{
    [SerializeField] private Image testButton;
    [SerializeField] private Color originalColor;

    void Start()
    {
        // 同じGameObjectにアタッチされているButtonを取得
        testButton = GetComponent<Image>();

        originalColor = testButton.color;
    }

    public void OnPointerEnter(PointerEventData eventData)
    {
        testButton.color = Color.yellow; // ホバーで黄色に
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        testButton.color = originalColor; // 元に戻す
    }
}

実行するとカラーが変わりいい感じに押してみようってなりますね。

点滅（フェード）（「Press Start」系に最適）

「Press Start」「Tap to Play」など、待機画面で注目させたいUIに最適です。

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class Button_Animation : MonoBehaviour
{
    [SerializeField] private Image testButton;
    [SerializeField] private float speed = 2f;

    void Start()
    {
        // 同じGameObjectにアタッチされているButtonを取得
        testButton = GetComponent<Image>();
    }
    void Update()
    {
        float alpha = Mathf.Abs(Mathf.Sin(Time.time * speed));
        Color c = testButton.color;
        c.a = alpha;
        testButton.color = c;
    }
}

個人的にはボタンを透明にしておいてテキストを点滅する方を私は使いますが、場合によってはこちらもありだと思います。

ゆらゆら揺れる / 軽いシェイク（注目させる演出）

ゆらゆら動かすことで、ユーザーの視線を誘導できます。広告や特別ボタンに使うと効果的です。

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using static UnityEngine.GraphicsBuffer;

public class Button_Animation : MonoBehaviour
{
    [SerializeField] private RectTransform testButton;
    [SerializeField] private float intensity = 5f;

    private Vector3 basePos;

    void Start()
    {
        // 同じGameObjectにアタッチされているButtonを取得
        testButton = GetComponent<RectTransform>();

        basePos = testButton.localPosition;
    }
    void Update()
    {
        float offsetX = Mathf.Sin(Time.time * 5f) * intensity;
        testButton.localPosition = basePos + new Vector3(offsetX, 0, 0);
    }
}


実行してみると動画のように横に揺れることで存在感が浮き出て特別なボタンかなと思いますね。

まとめ

  • UnityのButtonはAnimator不要、スクリプトで手軽にアニメーション可能
  • よく使う5つの演出：
    1. クリック時に縮む（押した感覚）
    2. ホバー時に拡大（存在感）
    3. ホバー時に色変更（視覚フィードバック）
    4. 点滅（フェード）（注目UIに最適）
    5. ゆらゆら揺れる / シェイク（誘目効果）
Button Unity
関連記事