完善Pie饼图的交互动画效果

This commit is contained in:
monitor1394
2023-07-18 13:23:41 +08:00
parent 816e26f517
commit f5e8ba4082
8 changed files with 83 additions and 56 deletions

View File

@@ -73,6 +73,7 @@ slug: /changelog
日志详情: 日志详情:
* (2023.07.18) 完善`Pie`饼图的交互动画效果
* (2023.07.14) 增加`Animation``Interaction`交互动画配置支持 * (2023.07.14) 增加`Animation``Interaction`交互动画配置支持
* (2023.07.11) 增加`Animation``Addition`新增动画配置支持 * (2023.07.11) 增加`Animation``Addition`新增动画配置支持
* (2023.07.11) 重构`Animation`动画系统,完善动画体验 * (2023.07.11) 重构`Animation`动画系统,完善动画体验

View File

@@ -203,7 +203,6 @@ namespace XCharts.Runtime
public void Reset() public void Reset()
{ {
Debug.LogError("Reset:"+this);
m_UpdateFlag = false; m_UpdateFlag = false;
m_ValueEnable = false; m_ValueEnable = false;
m_PreviousValue = float.NaN; m_PreviousValue = float.NaN;

View File

@@ -284,9 +284,9 @@ namespace XCharts.Runtime
return needShow; return needShow;
} }
public static bool CheckDataHighlighted(Serie serie, string legendName, bool heighlight) public static int CheckDataHighlighted(Serie serie, string legendName, bool heighlight)
{ {
bool show = false; var highlightedDataIndex = 0;
if (legendName.Equals(serie.serieName)) if (legendName.Equals(serie.serieName))
{ {
serie.highlight = heighlight; serie.highlight = heighlight;
@@ -298,11 +298,14 @@ namespace XCharts.Runtime
if (legendName.Equals(data.name)) if (legendName.Equals(data.name))
{ {
data.context.highlight = heighlight; data.context.highlight = heighlight;
if (data.context.highlight) show = true; if (data.context.highlight)
{
highlightedDataIndex = data.index;
}
} }
} }
} }
return show; return highlightedDataIndex;
} }
} }
} }

View File

@@ -183,8 +183,6 @@ namespace XCharts.Runtime
/// </summary> /// </summary>
public void RefreshChart() public void RefreshChart()
{ {
foreach (var serie in m_Series)
serie.ResetInteract();
m_RefreshChart = true; m_RefreshChart = true;
if (m_Painter) m_Painter.Refresh(); if (m_Painter) m_Painter.Refresh();
foreach (var painter in m_PainterList) painter.Refresh(); foreach (var painter in m_PainterList) painter.Refresh();
@@ -213,7 +211,7 @@ namespace XCharts.Runtime
public void RefreshChart(Serie serie) public void RefreshChart(Serie serie)
{ {
if (serie == null) return; if (serie == null) return;
serie.ResetInteract(); // serie.ResetInteract();
RefreshPainter(serie); RefreshPainter(serie);
} }

View File

@@ -592,8 +592,6 @@ namespace XCharts.Runtime
serie.animation.context.isAllItemAnimationEnd = true; serie.animation.context.isAllItemAnimationEnd = true;
if (serie.show && !serie.animation.HasFadeOut()) if (serie.show && !serie.animation.HasFadeOut())
{ {
if (!serie.context.pointerEnter)
serie.ResetInteract();
if (m_OnDrawSerieBefore != null) if (m_OnDrawSerieBefore != null)
{ {
m_OnDrawSerieBefore.Invoke(vh, serie); m_OnDrawSerieBefore.Invoke(vh, serie);

View File

@@ -51,30 +51,30 @@ namespace XCharts.Runtime
return serie.context.center; return serie.context.center;
} }
public override void OnLegendButtonClick(int index, string legendName, bool show) // public override void OnLegendButtonClick(int index, string legendName, bool show)
{ // {
if (!serie.IsLegendName(legendName)) // if (!serie.IsLegendName(legendName))
return; // return;
LegendHelper.CheckDataShow(serie, legendName, show); // LegendHelper.CheckDataShow(serie, legendName, show);
chart.UpdateLegendColor(legendName, show); // chart.UpdateLegendColor(legendName, show);
chart.RefreshPainter(serie); // chart.RefreshPainter(serie);
} // }
public override void OnLegendButtonEnter(int index, string legendName) // public override void OnLegendButtonEnter(int index, string legendName)
{ // {
if (!serie.IsLegendName(legendName)) // if (!serie.IsLegendName(legendName))
return; // return;
LegendHelper.CheckDataHighlighted(serie, legendName, true); // LegendHelper.CheckDataHighlighted(serie, legendName, true);
chart.RefreshPainter(serie); // chart.RefreshPainter(serie);
} // }
public override void OnLegendButtonExit(int index, string legendName) // public override void OnLegendButtonExit(int index, string legendName)
{ // {
if (!serie.IsLegendName(legendName)) // if (!serie.IsLegendName(legendName))
return; // return;
LegendHelper.CheckDataHighlighted(serie, legendName, false); // LegendHelper.CheckDataHighlighted(serie, legendName, false);
chart.RefreshPainter(serie); // chart.RefreshPainter(serie);
} // }
public override void OnPointerDown(PointerEventData eventData) public override void OnPointerDown(PointerEventData eventData)
{ {
@@ -101,8 +101,9 @@ namespace XCharts.Runtime
public override void UpdateSerieContext() public override void UpdateSerieContext()
{ {
var needCheck = m_LegendEnter || (chart.isPointerInChart && PointerIsInPieSerie(serie, chart.pointerPos)); var needCheck = m_LegendEnter || m_LegendExiting || (chart.isPointerInChart && PointerIsInPieSerie(serie, chart.pointerPos));
var needInteract = false; var needInteract = false;
var interactEnable = serie.animation.enable && serie.animation.interaction.enable;
Color32 color, toColor; Color32 color, toColor;
if (!needCheck) if (!needCheck)
{ {
@@ -110,25 +111,32 @@ namespace XCharts.Runtime
{ {
serie.context.pointerItemDataIndex = -1; serie.context.pointerItemDataIndex = -1;
serie.context.pointerEnter = false; serie.context.pointerEnter = false;
bool isAllZeroValue1 = SerieHelper.IsAllZeroValue(serie, 1);
var zeroReplaceValue1 = isAllZeroValue1 ? 360 / serie.dataCount : 0;
foreach (var serieData in serie.data) foreach (var serieData in serie.data)
{ {
var colorIndex = chart.GetLegendRealShowNameIndex(serieData.legendName);
SerieHelper.GetItemColor(out color, out toColor, serie, serieData, chart.theme, colorIndex, SerieState.Normal);
Debug.LogError("end:"+serieData.interact);
serieData.context.highlight = false; serieData.context.highlight = false;
serieData.interact.SetValueAndColor(ref needInteract, serieData.context.outsideRadius, color, toColor); if (interactEnable)
{
var value = isAllZeroValue1 ? zeroReplaceValue1 : serieData.GetCurrData(1, serie.animation);
var colorIndex = chart.GetLegendRealShowNameIndex(serieData.legendName);
SerieHelper.GetItemColor(out color, out toColor, serie, serieData, chart.theme, colorIndex, SerieState.Normal);
UpdateSerieDataRadius(serieData, value);
serieData.interact.SetValueAndColor(ref needInteract, serieData.context.outsideRadius, color, toColor);
}
} }
if (needInteract){ if (needInteract)
{
chart.RefreshPainter(serie); chart.RefreshPainter(serie);
Debug.LogError("PieHandler update:" + needInteract + "," + m_LastCheckContextFlag + "," + needCheck); }
}else{ else
{
m_LastCheckContextFlag = needCheck; m_LastCheckContextFlag = needCheck;
m_LegendExiting = false;
serie.ResetInteract(); serie.ResetInteract();
Debug.LogError("PieHandler end:" + needInteract + "," + m_LastCheckContextFlag + "," + needCheck); chart.RefreshPainter(serie);
} }
} }
return; return;
} }
m_LastCheckContextFlag = needCheck; m_LastCheckContextFlag = needCheck;
@@ -155,17 +163,19 @@ namespace XCharts.Runtime
{ {
serieData.context.highlight = false; serieData.context.highlight = false;
} }
UpdateSerieDataRadius(serieData, value); if (interactEnable)
var colorIndex = chart.GetLegendRealShowNameIndex(serieData.legendName); {
SerieHelper.GetItemColor(out color, out toColor, serie, serieData, chart.theme, colorIndex, state); UpdateSerieDataRadius(serieData, value);
serieData.interact.SetValueAndColor(ref needInteract, serieData.context.outsideRadius, color, toColor); var colorIndex = chart.GetLegendRealShowNameIndex(serieData.legendName);
SerieHelper.GetItemColor(out color, out toColor, serie, serieData, chart.theme, colorIndex, state);
serieData.interact.SetValueAndColor(ref needInteract, serieData.context.outsideRadius, color, toColor);
}
} }
if (lastPointerItemDataIndex != serie.context.pointerItemDataIndex) if (lastPointerItemDataIndex != serie.context.pointerItemDataIndex)
{ {
needInteract = true; needInteract = true;
} }
//if (needInteract) if (needInteract)
{ {
chart.RefreshPainter(serie); chart.RefreshPainter(serie);
} }
@@ -246,8 +256,6 @@ namespace XCharts.Runtime
var currSin = Mathf.Sin(currRad); var currSin = Mathf.Sin(currRad);
var currCos = Mathf.Cos(currRad); var currCos = Mathf.Cos(currRad);
serieData.context.offsetRadius = 0; serieData.context.offsetRadius = 0;
serieData.context.insideRadius -= serieData.context.offsetRadius;
serieData.context.outsideRadius -= serieData.context.offsetRadius;
if (serie.pieClickOffset && (serieData.selected || serieData.context.selected)) if (serie.pieClickOffset && (serieData.selected || serieData.context.selected))
{ {
serieData.context.offsetRadius += serie.animation.interaction.offset; serieData.context.offsetRadius += serie.animation.interaction.offset;
@@ -255,7 +263,6 @@ namespace XCharts.Runtime
{ {
serieData.context.insideRadius += serie.animation.interaction.offset; serieData.context.insideRadius += serie.animation.interaction.offset;
} }
serieData.context.outsideRadius += serie.animation.interaction.offset;
} }
serieData.context.offsetCenter = new Vector3( serieData.context.offsetCenter = new Vector3(
serie.context.center.x + serieData.context.offsetRadius * currSin, serie.context.center.x + serieData.context.offsetRadius * currSin,
@@ -276,6 +283,16 @@ namespace XCharts.Runtime
serieData.context.outsideRadius = serie.pieRoseType > 0 ? serieData.context.outsideRadius = serie.pieRoseType > 0 ?
serie.context.insideRadius + (float)((serie.context.outsideRadius - serie.context.insideRadius) * value / serie.context.dataMax) : serie.context.insideRadius + (float)((serie.context.outsideRadius - serie.context.insideRadius) * value / serie.context.dataMax) :
serie.context.outsideRadius; serie.context.outsideRadius;
var offset = 0f;
if (serie.pieClickOffset && (serieData.selected || serieData.context.selected))
{
offset += serie.animation.interaction.offset;
}
if (offset > 0)
{
serieData.context.outsideRadius += serie.animation.interaction.offset;
}
if (serieData.context.highlight) if (serieData.context.highlight)
{ {
serieData.context.outsideRadius = serie.animation.GetInteractionRadius(serieData.context.outsideRadius); serieData.context.outsideRadius = serie.animation.GetInteractionRadius(serieData.context.outsideRadius);
@@ -326,6 +343,7 @@ namespace XCharts.Runtime
var color = ColorUtil.clearColor32; var color = ColorUtil.clearColor32;
var toColor = ColorUtil.clearColor32; var toColor = ColorUtil.clearColor32;
var interactDuration = serie.animation.GetInteractionDuration(); var interactDuration = serie.animation.GetInteractionDuration();
var interactEnable = serie.animation.enable && serie.animation.interaction.enable;
var data = serie.data; var data = serie.data;
serie.animation.InitProgress(0, 360); serie.animation.InitProgress(0, 360);
for (int n = 0; n < data.Count; n++) for (int n = 0; n < data.Count; n++)
@@ -348,11 +366,14 @@ namespace XCharts.Runtime
var progress = AnimationStyleHelper.CheckDataAnimation(chart, serie, n, 1); var progress = AnimationStyleHelper.CheckDataAnimation(chart, serie, n, 1);
var insideRadius = serieData.context.insideRadius * progress; var insideRadius = serieData.context.insideRadius * progress;
if (!serieData.interact.TryGetValueAndColor(ref outsideRadius, ref color, ref toColor, ref interacting, interactDuration)) if (!interactEnable || !serieData.interact.TryGetValueAndColor(ref outsideRadius, ref color, ref toColor, ref interacting, interactDuration))
{ {
SerieHelper.GetItemColor(out color, out toColor, serie, serieData, chart.theme, colorIndex); SerieHelper.GetItemColor(out color, out toColor, serie, serieData, chart.theme, colorIndex);
outsideRadius = serieData.context.outsideRadius * progress; outsideRadius = serieData.context.outsideRadius * progress;
serieData.interact.SetValueAndColor(ref interacting, outsideRadius, color, toColor); if (interactEnable)
{
serieData.interact.SetValueAndColor(ref interacting, outsideRadius, color, toColor);
}
} }
if (serie.pieClickOffset && (serieData.selected || serieData.context.selected)) if (serie.pieClickOffset && (serieData.selected || serieData.context.selected))
{ {
@@ -383,7 +404,7 @@ namespace XCharts.Runtime
serie.animation.CheckSymbol(serie.symbol.GetSize(null, chart.theme.serie.lineSymbolSize)); serie.animation.CheckSymbol(serie.symbol.GetSize(null, chart.theme.serie.lineSymbolSize));
chart.RefreshPainter(serie); chart.RefreshPainter(serie);
} }
if (dataChanging) if (dataChanging || interacting)
{ {
chart.RefreshPainter(serie); chart.RefreshPainter(serie);
} }

View File

@@ -1909,6 +1909,7 @@ namespace XCharts.Runtime
/// </summary> /// </summary>
public void AnimationFadeIn() public void AnimationFadeIn()
{ {
ResetInteract();
if (animation.enable) animation.FadeIn(); if (animation.enable) animation.FadeIn();
SetVerticesDirty(); SetVerticesDirty();
} }
@@ -1918,6 +1919,7 @@ namespace XCharts.Runtime
/// </summary> /// </summary>
public void AnimationFadeOut() public void AnimationFadeOut()
{ {
ResetInteract();
if (animation.enable) animation.FadeOut(); if (animation.enable) animation.FadeOut();
SetVerticesDirty(); SetVerticesDirty();
} }

View File

@@ -58,6 +58,7 @@ namespace XCharts.Runtime
protected bool m_RefreshLabel; protected bool m_RefreshLabel;
protected bool m_LastCheckContextFlag = false; protected bool m_LastCheckContextFlag = false;
protected bool m_LegendEnter = false; protected bool m_LegendEnter = false;
protected bool m_LegendExiting = false;
protected int m_LegendEnterIndex; protected int m_LegendEnterIndex;
protected ChartLabel m_EndLabel; protected ChartLabel m_EndLabel;
@@ -195,7 +196,8 @@ namespace XCharts.Runtime
{ {
if (serie.colorByData && serie.IsSerieDataLegendName(legendName)) if (serie.colorByData && serie.IsSerieDataLegendName(legendName))
{ {
LegendHelper.CheckDataHighlighted(serie, legendName, true); m_LegendEnterIndex = LegendHelper.CheckDataHighlighted(serie, legendName, true);
m_LegendEnter = true;
chart.RefreshPainter(serie); chart.RefreshPainter(serie);
} }
else if (serie.IsLegendName(legendName)) else if (serie.IsLegendName(legendName))
@@ -210,11 +212,14 @@ namespace XCharts.Runtime
if (serie.colorByData && serie.IsSerieDataLegendName(legendName)) if (serie.colorByData && serie.IsSerieDataLegendName(legendName))
{ {
LegendHelper.CheckDataHighlighted(serie, legendName, false); LegendHelper.CheckDataHighlighted(serie, legendName, false);
m_LegendEnter = false;
m_LegendExiting = true;
chart.RefreshPainter(serie); chart.RefreshPainter(serie);
} }
else if (serie.IsLegendName(legendName)) else if (serie.IsLegendName(legendName))
{ {
m_LegendEnter = false; m_LegendEnter = false;
m_LegendExiting = true;
chart.RefreshPainter(serie); chart.RefreshPainter(serie);
} }
} }