65.9K
CodeProject 正在变化。 阅读更多。
Home

如何在 .NET 中编写加载圆圈动画?

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.92/5 (209投票s)

2006年7月17日

CPOL

3分钟阅读

viewsIcon

794668

downloadIcon

38786

.NET 2.0 的一种新型进度条。

Sample Image - mrg_loadingcircle.jpg

引言

当需要等待时,我们习惯看到经典的蓝色进度条。它在 Windows 和许多其他应用程序中无处不在。然而,动画越来越受欢迎。

例如,当 Firefox 加载页面时,会出现一个小的旋转圆圈,告诉你页面正在加载。此外,Microsoft 还在 Windows Media Center、Encarta 2006、SQL Server Management Studio Express 等中使用这种动画。

那么,为什么我们不使用这个概念来向用户表明我们的应用程序正在工作和/或加载?让我们从介绍我开发的组件开始。

关注点

旋转速度

LoadingCircle 使用一个计时器,它有两个职责:确定下一个辐条的颜色,以及以指定的毫秒数重绘圆圈。当您使用属性 RotationSpeed 时,您会修改计时器的名为 Interval 的属性。值越高,旋转越慢。默认旋转速度为 80,因此每 80 毫秒,圆圈将被重绘。

如何绘制辐条?

首先,我们需要每个辐条的坐标。我们使用 GDI+ 的函数 DrawLine,它需要两个点,线的开始和结束。

所以,让我们回顾一些简单的数学概念。为了绘制一个完美的圆,你必须知道以下三角学概念:角度的余弦(以度为单位)给出我们 X,正弦给出我们 Y。

方法 GetCoordinate 计算,对于指定的半径和角度,点的坐标。

private PointF GetCoordinate(PointF _objCircleCenter, 
               int _intRadius, double _dblAngle)
{
      PointF objPoint = new PointF();
      double dblAngle = Math.PI * _dblAngle / NUMBER_OF_DEGREES_HALF_CIRCLE;
      objPoint.X = _objCircleCenter.X + _intRadius * (float)Math.Cos(dblAngle);
      objPoint.Y = _objCircleCenter.Y + _intRadius * (float)Math.Sin(dblAngle);
      return objPoint;
}

方法 DrawLine 使用 GetCoordinate 计算的坐标,并使用两个指定的点和颜色绘制一条线。当然,我们必须将 GDI+ 的 Graphics 对象传递给此方法。正如你所看到的,每条线都使用 Pen 对象的属性 StartCapEndCap 进行舍入。

private void DrawLine(Graphics _objGraphics, PointF _objPointOne, 
                      PointF _objPointTwo, 
                      Color _objColor, int _intLineThickness)
{
      using(Pen objPen = new Pen(new SolidBrush(_objColor), _intLineThickness))
      {
            objPen.StartCap = LineCap.Round;
            objPen.EndCap = LineCap.Round;
            _objGraphics.DrawLine(objPen, _objPointOne, _objPointTwo);
      }
}

如何使用此组件?

此组件非常容易使用。一旦添加到工具箱中,将其拖到窗体上,你就可以开始了!现在,你所要做的就是使用改变圆圈外观的属性。这些属性位于“属性”面板中的“LoadingCircle”类别下。此外,你可以将 Active 属性更改为 truefalse 以查看动画是否正在运行。

该组件具有以下属性。

  • Color - 不活动辐条的颜色。
  • OuterCircleRadius - 此属性是外圆的半径。此属性的值应高于 InnerCircleRadius 值。
  • InnerCircleRadius - 此属性是内圆的半径。
  • NumberSpoke - 此属性是辐条的数量。
  • Active - 定义组件是否动画。因此,如果你的处理正在进行中,则此属性应设置为 true,否则 false
  • SpokeThickness - 线条的粗细(以像素为单位)。
  • RotationSpeed - 动画速度。值越低,动画越快。

结论

最后,我希望你会发现这个组件很有用。我编写它很有趣,并希望你会使用它。感谢阅读本文。

修订历史

  • 2006 年 6 月 17 日:初始版本。
  • 2007 年 2 月 5 日:更好的颜色管理(alpha 混合)
  • 2007 年 2 月 10 日:控件中定义的预设(MacOS X、Internet Explorer 7 和 FireFox)。添加了一个新控件:LoadingCircleToolStripMenuItem。此控件与 StatusStrip 兼容!支持透明度。一些小错误修正。
© . All rights reserved.