Unity_折线图+UI动画

⭐GitHub⭐

Unity_折线图+UI动画

  • 效果
  • 介绍
  • 关键字
  • 分析及代码
    • 绘图数据
    • 1.定义参数
    • 2.左侧刻度
    • 3.底部描述
    • 4.画点
    • 5.画线
    • 6.整体代码
    • 7.使用示例

效果

Unity_折线图+UI动画_第1张图片

介绍

实现折线图的大体思路和数学画图一致:先画底部刻度(底部描述),再画点,再连线。

关键字

1. 对象池
2. 迭代
3. DoTween 动画

分析及代码

  • 绘图数据

定义绘图数据的结构GraphData,包含数据的描述信息_desc,数据的值_value。在需要绘图时传递一组GraphData的类型的数据给此模块就可以实现折线图的绘制。

[System.Serializable]
public struct GraphData
{
    public string _desc;
    [Range(0, 100)]
    public float _value;

    public float Rate
    {
        get
        {
            return _value / 100;
        }
    }

    public GraphData(string desc, float value)
    {
        _desc = desc;
        _value = value;
    }
}
  • 1.定义参数

下图是Unity的布局,为了方便管理,在LineGraphPanel中分别设置了LeftSide(左侧刻度),DescContent(底部描述),DotContent(点),LineContent(线)四个空对象存放相应的子元素。

Unity_折线图+UI动画_第2张图片

	public GraphData[] _datas;//数据
    public float _lineWidth = 3;//线宽
    public float _dotRadius = 2;//点半径
    public Transform _leftSide;//左侧描述
    public RectTransform _descContent;//描述Content
    public RectTransform _dotContent;//点Content
    public RectTransform _lineContent;//线Content
    public Text _descPrefab;//描述Prefab
    public RectTransform _dotPrefab;//点Prefab
    public Image _linePrefab;//线Prefab
    public float _tweenTime = 1f;//动画时间

    //描述、点、线 管理
    private Text[] _descs;
    private RectTransform[] _dots;
    private Image[] _lines;
  • 2.左侧刻度

因为背景、左侧刻度是不会改变的,所以初始化左侧刻度的方法只需要在Start方法中调用一次就可以(背景我直接用的一张10条横线的图片)。

    /// 
    /// 初始化折线图
    /// 
    public void InitLineGraph(GraphData[] data)
    {
        //leftSide
        for (int i = 0; i < _leftSide.childCount; i++)
        {
            _leftSide.GetChild(i).GetComponent<Text>().text = (100 - i * 10).ToString();
        }
    }
  • 3.底部描述

底部描述使用了Unity的自动布局组件,因为在下一步需要绘制时是需要用到这里的位置信息,所以需要在结尾处刷新UI的布局。其次,为了防止动态的刷新数据过于频繁,使用到了对象池的优化(链接)。

    /// 
    /// 底部描述
    /// 
    private void DrawDesc()
    {
        _descs = new Text[_datas.Length];
        for (int i = 0; i < _datas.Length; i++)
        {
            Text desc = ObjectPool.Instance.GetObject(_descPrefab.name, _descContent).GetComponent<Text>();
            desc.text = _datas[i]._desc;
            desc.transform.SetAsLastSibling();//使用对象池和自动布局组件会调乱顺序,要重置
            desc.gameObject.SetActive(true);
            _descs[i] = desc;
        }
        LayoutRebuilder.ForceRebuildLayoutImmediate(_descContent);//使用自动布局组件要刷新UI,刷新位置
    }
  • 4.画点

根据底部描述的位置、数据的值计算点的位置

    /// 
    /// 画点
    /// 
    private void DrawDot()
    {
        float height = _dotContent.rect.height;
        _dots = new RectTransform[_datas.Length];
        for (int i = 0; i < _datas.Length; i++)
        {
            RectTransform dot = ObjectPool.Instance.GetObject(_dotPrefab.name, _dotContent).GetComponent<RectTransform>();
            dot.localPosition = new Vector3(_descs[i].transform.localPosition.x, height * (_datas[i].Rate - 0.5f), 0);//锚点在中心
            dot.sizeDelta = Vector2.one * _lineWidth * 2;
            dot.gameObject.SetActive(true);
            _dots[i] = dot;
        }
    }
  • 5.画线

根据上一步的点生成线段,线段我使用的是Image,所以可以随意指定它的宽度,位置、旋转根据相邻的两点计算。这里为了实现动画,使用了DoTween和递归,在每生成完一条线后接着生成下一条。

    /// 
    /// 画线
    /// 
    private void DrawLines()
    {
        _lines = new Image[_datas.Length - 1];
        DrawLine();
    }
    
    /// 
    /// 画线
    /// 
    /// 
    private void DrawLine(int index = 0)
    {
        if (index >= _lines.Length) return;
        Vector2 curPos = _dots[index].localPosition;
        Vector2 nextPos = _dots[index + 1].localPosition;
        float length = Vector2.Distance(curPos, nextPos);
        Vector3 dir = curPos - nextPos;
        float angle = Vector3.Angle(Vector3.up, dir);
        Vector2 center = (curPos + nextPos) / 2;
        Image line = ObjectPool.Instance.GetObject(_linePrefab.name, _lineContent).GetComponent<Image>();
        line.rectTransform.localEulerAngles = Vector3.forward * angle;
        line.rectTransform.localPosition = center;
        line.rectTransform.sizeDelta = new Vector2(_lineWidth, length);
        line.gameObject.SetActive(true);
        line.fillAmount = 0;
        line.fillOrigin = dir.x > 0 ? 0 : 1;
        line.DOFillAmount(1, _tweenTime / _lines.Length).OnComplete(() => DrawLine(index + 1));
        _lines[index] = line;
    }
  • 6.整体代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

[System.Serializable]
public struct GraphData
{
    public string _desc;
    [Range(0, 100)]
    public float _value;

    public float Rate
    {
        get
        {
            return _value / 100;
        }
    }

    public GraphData(string desc, float value)
    {
        _desc = desc;
        _value = value;
    }
}

/// 
/// 折线图
/// 
public class UILineGraphManager : MonoBehaviour
{
    public GraphData[] _datas;//数据
    public float _lineWidth = 3;//线宽
    public float _dotRadius = 2;//点半径
    public Transform _leftSide;//左侧描述
    public RectTransform _descContent;//描述Content
    public RectTransform _dotContent;//点Content
    public RectTransform _lineContent;//线Content
    public Text _descPrefab;//描述Prefab
    public RectTransform _dotPrefab;//点Prefab
    public Image _linePrefab;//线Prefab
    public float _tweenTime = 1f;//动画时间

    //描述、点、线 管理
    private Text[] _descs;
    private RectTransform[] _dots;
    private Image[] _lines;

    private void Awake()
    {
        ObjectPool.Instance.SetPrefab(_descPrefab.gameObject);
        ObjectPool.Instance.SetPrefab(_dotPrefab.gameObject);
        ObjectPool.Instance.SetPrefab(_linePrefab.gameObject);
    }

    /// 
    /// 初始化折线图
    /// 
    public void InitLineGraph(GraphData[] data)
    {
        //leftSide
        for (int i = 0; i < _leftSide.childCount; i++)
        {
            _leftSide.GetChild(i).GetComponent<Text>().text = (100 - i * 10).ToString();
        }
        RefeshLineGraph(data);
    }

    /// 
    /// 刷新折线图
    /// 
    public void RefeshLineGraph(GraphData[] data)
    {
        _datas = data;
        ClearTransform(_descContent);
        ClearTransform(_dotContent);
        ClearTransform(_lineContent);
        DrawDesc();
        DrawDot();
        DrawLines();
    }

    /// 
    /// 底部描述
    /// 
    private void DrawDesc()
    {
        _descs = new Text[_datas.Length];
        for (int i = 0; i < _datas.Length; i++)
        {
            Text desc = ObjectPool.Instance.GetObject(_descPrefab.name, _descContent).GetComponent<Text>();
            desc.text = _datas[i]._desc;
            desc.transform.SetAsLastSibling();//使用对象池和自动布局组件会调乱顺序,要重置
            desc.gameObject.SetActive(true);
            _descs[i] = desc;
        }
        LayoutRebuilder.ForceRebuildLayoutImmediate(_descContent);//使用自动布局组件要刷新UI,刷新位置
    }

    /// 
    /// 画点
    /// 
    private void DrawDot()
    {
        float height = _dotContent.rect.height;
        _dots = new RectTransform[_datas.Length];
        for (int i = 0; i < _datas.Length; i++)
        {
            RectTransform dot = ObjectPool.Instance.GetObject(_dotPrefab.name, _dotContent).GetComponent<RectTransform>();
            dot.localPosition = new Vector3(_descs[i].transform.localPosition.x, height * (_datas[i].Rate - 0.5f), 0);//锚点在中心
            dot.sizeDelta = Vector2.one * _lineWidth * 2;
            dot.gameObject.SetActive(true);
            _dots[i] = dot;
        }
    }

    /// 
    /// 画线
    /// 
    private void DrawLines()
    {
        _lines = new Image[_datas.Length - 1];
        DrawLine();
    }

    /// 
    /// 画线
    /// 
    /// 
    private void DrawLine(int index = 0)
    {
        if (index >= _lines.Length) return;
        Vector2 curPos = _dots[index].localPosition;
        Vector2 nextPos = _dots[index + 1].localPosition;
        float length = Vector2.Distance(curPos, nextPos);
        Vector3 dir = curPos - nextPos;
        float angle = Vector3.Angle(Vector3.up, dir);
        Vector2 center = (curPos + nextPos) / 2;
        Image line = ObjectPool.Instance.GetObject(_linePrefab.name, _lineContent).GetComponent<Image>();
        line.rectTransform.localEulerAngles = Vector3.forward * angle;
        line.rectTransform.localPosition = center;
        line.rectTransform.sizeDelta = new Vector2(_lineWidth, length);
        line.gameObject.SetActive(true);
        line.fillAmount = 0;
        line.fillOrigin = dir.x > 0 ? 0 : 1;
        line.DOFillAmount(1, _tweenTime / _lines.Length).OnComplete(() => DrawLine(index + 1));
        _lines[index] = line;
    }

    /// 
    /// 入池
    /// 
    /// 
    private void ClearTransform(Transform parent)
    {
        for (int i = 1; i < parent.childCount; i++)
        {
            ObjectPool.Instance.RecycleObj(parent.GetChild(i).gameObject, parent);
        }
    }

}
  • 7.使用示例

初始化时调用InitLineGraph(),刷新数据时调用RefeshLineGraph()。下面是示例:

using UnityEngine;

public class UIGraphManager : MonoBehaviour
{
    public UILineGraphManager _line;
    private GraphData[] _datas;

    private void Start()
    {
        RefeshData();
        _line.InitLineGraph(_datas);
    }

    private void Update()
    {
        if (Input.GetKeyDown(KeyCode.R))
        {
            RefeshData();
            _line.RefeshLineGraph(_datas);
        }
    }

    /// 
    /// 刷新数据
    /// 
    public void RefeshData()
    {
        _datas = new GraphData[8];
        for (int i = 0; i < _datas.Length; i++)
        {
            _datas[i] = new GraphData("数据" + i, Random.Range(0, 100));
        }
    }
}

你可能感兴趣的:(Unity)