ゲージ http://anz-note.tumblr.com/post/145514451171

Guage.cs

/*********************************
 * ゲージ
*********************************/
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

public class Guage : MonoBehaviour
{
    /// <summary>
    /// バー全体のBG
    /// </summary>
    [SerializeField] private Image bg;
    /// <summary>
    /// バー（背面）
    /// </summary>
    [SerializeField] private Image backBar;
    /// <summary>
    /// バー（前面）
    /// </summary>
    [SerializeField] private Image frontBar;
    /// <summary>
    /// 現在値
    /// </summary>
    [SerializeField] private float value;
    /// <summary>
    /// 最大値
    /// </summary>
    [SerializeField] private float maxValue;

    public float Value {
        get { return this.value; }
        set {
            float v = Mathf.Max(0, Mathf.Min(value, this.maxValue));
            float additional = this.value - v;
            this.value = v;
            ChangedValue(additional);
        }
    }
    public float MaxValue {
        get { return this.maxValue; }
        set {
            float v = Mathf.Max(0, value);
            this.maxValue = v;
            Reset();
        }
    }

    private void Start()
    {
        Reset();
    }

    /// <summary>
    /// 現在のvalueとmaxValueでバーの状態をセット（Non Animation）
    /// 開始時とかMaxValueを変更した時に自動でよばれるようにはしている
    /// </summary>
    public void Reset()
    {
        float scaleX = this.value / this.maxValue;
        var localScale = this.backBar.rectTransform.localScale;
        localScale.x = scaleX;
        this.backBar.rectTransform.localScale = localScale;
        this.frontBar.rectTransform.localScale = localScale;
    }

    /// <summary>
    /// valueが変わった時
    /// </summary>
    /// <param name="additional">Additional.</param>
    private void ChangedValue(float additional)
    {
        if (additional > 0f) {
            GainedValue(additional);
        } else if (0f > additional) {
            ReducedValue(-additional);
        }
    }

    /// <summary>
    /// valueが増加したとき（with animation）
    /// </summary>
    /// <param name="increment">Increment.</param>
    private void GainedValue(float increment)
    {
        AnimateBar(this.value / this.maxValue, this.frontBar, this.backBar);
    }

    /// <summary>
    /// valueが減少した時（with animation）
    /// </summary>
    /// <param name="decrement">Decrement.</param>
    private void ReducedValue(float decrement)
    {
        AnimateBar(this.value / this.maxValue, this.backBar, this.frontBar);
    }

    /// <summary>
    /// バーアニメーション
    /// </summary>
    /// <param name="scaleX">Scale x.</param>
    /// <param name="leadBar">Lead bar.</param>
    /// <param name="animationBar">Animation bar.</param>
    private void AnimateBar(float scaleX, Image leadBar, Image animationBar)
    {
        var localScale = leadBar.rectTransform.localScale;
        localScale.x = scaleX;
        leadBar.rectTransform.localScale = localScale;
        animationBar.rectTransform.DOScaleX(scaleX, 0.5f);
    }

}