6
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【DOTween】ポップにアニメーションするボタンを作る【Unity】

Posted at

はじめに

開発中のアプリDOTweenを使った簡単なボタンアニメーションを作ったので紹介します。

Jan-16-2020 07-46-16.gif

使用しているUIアセット(有償): Simple UI - Asset Store

コード

使用する場合は以下のスクリプトをプロジェクトにインポートし、Buttonコンポーネントの変わりにアタッチしてください。CC0です。

Gist: PopButton.cs

PopButton.cs
using UnityEngine.UI;
using DG.Tweening;
using UnityEngine;

namespace nkjzm
{
    /// <summary>
    /// ポップに押されるボタン
    /// </summary>
    public class PopButton : Button
    {
        Tweener tweener = null;
        new void Start()
        {
            base.Start();

            // ボタンアニメーション
            onClick.AddListener(() =>
            {
                // 再生中のアニメーションを停止/初期化
                if (tweener != null)
                {
                    tweener.Kill();
                    tweener = null;
                    transform.localScale = Vector3.one;
                }
                tweener = transform.DOPunchScale(
                    punch: Vector3.one * 0.1f,
                    duration: 0.2f,
                    vibrato: 1
                ).SetEase(Ease.OutExpo);
            });
        }
    }
}

余談

ボタン押下時の機能をAddListenerするとアニメーションの途中で見えなくなってしまう場合があるので、機能によっては0.2f秒のラグを入れてあげると良いかもしれません。

6
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?