WPF利用动画实现圆形进度条

2022-01-11 13:22:47

　　这是我的第一篇随笔，最近因为工作需要，开始学习WPF相关技术，自己想实现以下圆形进度条的效果，逛了园子发现基本都是很久以前的文章，实现方式一般都是GDI实现的，想到WPF中动画效果不错，于是自己研究了一下，还真让我做出来了，废话不多说了，先上效果。

　　这个效果是不是还不错？这里面实现了数字实时显示以及根据进度进行自动渐变的效果。实现原理其实很简单，利用WPF动画，其中主要元素有border(实现里外层圆的效果),Arc扇面（就是用来实现外层填充效果的）,Label(用来显示进度百分比)。

1.实现里外双层圆背景效果

　　这里我用了两个border实现，将两个border的CornerRadius设置为500，这样保证他们是两个圆（这里不用Ellipse是我觉得border可能更加省资源）,然后将他们他们的宽度设置为100和80，让他们作为同心圆。其他设置主要为了美观此处不再多说，一会上代码即可。

2.利用Arc实现填充效果

　　说起这个Arc还真是个好东西，之前只是知道它是个扇面，但是没想到还可以实现弧度填充，这得益于它的ArcThickness可以设置为小数，这个具体数值可以在blend中自己调节一下，ArcThicknessUnit设置为Percent，意思是单位是百分比。然后利用Arc的StartAngle和EndAngle就可以轻松实现进度填充了。

3.利用Label实现进度显示

　　最后在中间放置一个Label,然后将它的Text属性绑定到Arc的EndAngle上，之后自己写个Convert将角度转化为百分比即可。

4.动画的实现

　　剩下的就可以利用blend做个动画，动画效果十分简单，开始时间，结束时间，开始角度，结束角度。这样简单的填充效果就实现了，最后还要实现渐变效果，好吧，其实也比较简单，同样的开始时间，结束时间，开始颜色，结束颜色，然后两个动画的时间间隔相同就好，这样效果比较同步。

注意：最后说一句，用ViewBox将整个效果框起来，这样以后无论你怎么拖拽这个空间，内部都不会出现变形的效果了。

代码如下：

 1 <UserControl x:Class="MyUserControlLibrary.WaitingAndProgress"
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 6              xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
 7              xmlns:local ="clr-namespace:MyUserControlLibrary"
 8              mc:Ignorable="d" 
 9              d:DesignHeight="100" d:DesignWidth="100" Loaded="UserControl_Loaded">
10     <UserControl.Resources>
11         <local:ConverterCircleToPercent x:Key="converter"/>
12         <Storyboard x:Key="MainStoryboard" RepeatBehavior="Forever">
13             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="ShowArea">
14                 <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="360"/>
15             </DoubleAnimationUsingKeyFrames>
16             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="minCircle">
17                 <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="360"/>
18             </DoubleAnimationUsingKeyFrames>
19         </Storyboard>
20         <Storyboard x:Key="FillStoryboard" Completed="Storyboard_Completed">
21             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ed:Arc.EndAngle)" Storyboard.TargetName="FillArea">
22                 <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
23                 <EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0"/>
24             </DoubleAnimationUsingKeyFrames>
25             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="FillArea">
26                 <EasingColorKeyFrame KeyTime="0:0:0" Value="#FFFF0000"/>
27                 <EasingColorKeyFrame KeyTime="0:0:0.05" Value="#FF008000"/>
28             </ColorAnimationUsingKeyFrames>
29         </Storyboard>
30     </UserControl.Resources>
31     <Viewbox>
32     <Grid>
33             <Border Name="MaxCircle" CornerRadius="500" Width="100" Height="100" Background="White"  Opacity="0.2"/>
34             <Border Name="minCircle" CornerRadius="500" Width="80" Height="80" BorderBrush="black" BorderThickness="2" Opacity="0.4" RenderTransformOrigin="0.5,0.5">
35                 <Border.RenderTransform>
36                     <TransformGroup>
37                         <ScaleTransform/>
38                         <SkewTransform/>
39                         <RotateTransform/>
40                         <TranslateTransform/>
41                     </TransformGroup>
42                 </Border.RenderTransform>
43                 <Border.Background>
44                     <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
45                         <GradientStop Color="White" Offset="0"/>
46                         <GradientStop Color="Transparent" Offset="0.5"/>
47                         <GradientStop Color="White" Offset="1"/>
48                     </LinearGradientBrush>
49                 </Border.Background>
50             </Border>
51             <ed:Arc Name="FillArea" ArcThickness="0.18" ArcThicknessUnit="Percent" StartAngle="0" EndAngle="0" Width="95" Height="95" Stretch="None" Opacity="0.8" Fill="Red"/>
52             <Label Name="ShowLabel" Width="60" Height="60" FontFamily="宋体" FontWeight="Bold" Content="{Binding ElementName=FillArea,Path=EndAngle,Converter={StaticResource converter}}" FontSize="32" Foreground="White" Opacity="0.8" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />
53     </Grid>
54     </Viewbox>
55 </UserControl>

前端XMAL

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Text;
  5 using System.Windows;
  6 using System.Windows.Controls;
  7 using System.Windows.Data;
  8 using System.Windows.Documents;
  9 using System.Windows.Input;
 10 using System.Windows.Media;
 11 using System.Windows.Media.Animation;
 12 using System.Windows.Media.Imaging;
 13 using System.Windows.Navigation;
 14 using System.Windows.Shapes;
 15 
 16 namespace MyUserControlLibrary
 17 {
 18     /// <summary>
 19     /// WaitingAndProgress.xaml 的交互逻辑
 20     /// </summary>
 21     public partial class WaitingAndProgress : UserControl
 22     {
 23         #region 属性
 24 
 25         private WaitAndProgressType showType = WaitAndProgressType.WaitingAndProgress;
 26         /// <summary>
 27         /// 当前样式类型
 28         /// </summary>
 29         [System.ComponentModel.Browsable(true),System.ComponentModel.Category("Appreance"),System.ComponentModel.Description("设置或获取当前样式类型")]
 30         public WaitAndProgressType ShowType {
 31             get {
 32                 return showType;
 33             }
 34             set {
 35                 showType = value;
 36             }
 37         }
 38 
 39         #endregion
 40 
 41         public WaitingAndProgress()
 42         {
 43             InitializeComponent();
 44         }
 45 
 46         #region 方法
 47 
 48         public void setPrecent(double d) {
 49             if (showType == WaitAndProgressType.Waiting) {
 50                 return;
 51             }
 52             Storyboard b = (Storyboard)this.Resources["FillStoryboard"];
 53             DoubleAnimationUsingKeyFrames df = (DoubleAnimationUsingKeyFrames)b.Children[0];
 54             ColorAnimationUsingKeyFrames cf = (ColorAnimationUsingKeyFrames)b.Children[1];
 55             if (d >= 0 && d <= 10)
 56             {
 57                 cf.KeyFrames[1].Value = ToColor("#FFFF3300");
 58             }
 59             if (d > 10 && d <= 20)
 60             {
 61                 cf.KeyFrames[1].Value = ToColor("#FFFF6600");
 62             }
 63             if (d > 20 && d <= 30)
 64             {
 65                 cf.KeyFrames[1].Value = ToColor("#FFFF9900");
 66             }
 67             if (d > 30 && d <= 40)
 68             {
 69                 cf.KeyFrames[1].Value = ToColor("#FFFFCC00");
 70             }
 71             if (d > 40 && d <= 50)
 72             {
 73                 cf.KeyFrames[1].Value = ToColor("#FFFFFF00");
 74             }
 75             if (d > 50 && d <= 60)
 76             {
 77                 cf.KeyFrames[1].Value = ToColor("#FFCCFF00");
 78             }
 79             if (d > 60 && d <= 70)
 80             {
 81                 cf.KeyFrames[1].Value = ToColor("#FF99FF00");
 82             }
 83             if (d > 70 && d <= 80)
 84             {
 85                 cf.KeyFrames[1].Value = ToColor("#FF66FF00");
 86             }
 87             if (d > 80 && d <= 90)
 88             {
 89                 cf.KeyFrames[1].Value = ToColor("#FF33FF00");
 90             }
 91             if (d > 90 && d <= 100)
 92             {
 93                 cf.KeyFrames[1].Value = ToColor("#FF00FF00");
 94             }
 95             df.KeyFrames[1].Value = d*3.6;
 96             b.Begin();
 97         }
 98 
 99         /// <summary>
100         /// 将blend的8位颜色值转为color
101         /// </summary>
102         /// <param name="colorName"></param>
103         /// <returns></returns>
104         public Color ToColor(string colorName)
105         {
106             if (colorName.StartsWith("#"))
107                 colorName = colorName.Replace("#", string.Empty);
108             int v = int.Parse(colorName, System.Globalization.NumberStyles.HexNumber);
109             return new Color()
110             {
111                 A = Convert.ToByte((v >> 24) & 255),
112                 R = Convert.ToByte((v >> 16) & 255),
113                 G = Convert.ToByte((v >> 8) & 255),
114                 B = Convert.ToByte((v >> 0) & 255)
115             };
116         }
117 
118         #endregion
119 
120         #region 事件
121 
122         //载入时事件处理
123         private void UserControl_Loaded(object sender, RoutedEventArgs e)
124         {
125             if (showType != WaitAndProgressType.Progress)
126             {
127                 Storyboard b1 = (Storyboard)this.Resources["MainStoryboard"];
128                 b1.Begin();
129                 if (showType == WaitAndProgressType.Waiting)
130                 {
131                     ShowLabel.Visibility = System.Windows.Visibility.Hidden;
132                 }
133                 else {
134                     ShowLabel.Visibility = System.Windows.Visibility.Visible;
135                 }
136             }
137             else {
138                 Storyboard b1 = (Storyboard)this.Resources["MainStoryboard"];
139                 b1.Stop();
140                 ShowLabel.Visibility = System.Windows.Visibility.Visible;
141             }
142         }
143 
144         //渐变动画完成时
145         private void Storyboard_Completed(object sender, EventArgs e)
146         {
147             Storyboard b = (Storyboard)this.Resources["FillStoryboard"];
148             ColorAnimationUsingKeyFrames cf = (ColorAnimationUsingKeyFrames)b.Children[1];
149             DoubleAnimationUsingKeyFrames df = (DoubleAnimationUsingKeyFrames)b.Children[0];
150             df.KeyFrames[0].Value = df.KeyFrames[1].Value;
151             cf.KeyFrames[0].Value = cf.KeyFrames[1].Value;
152         }
153 
154         #endregion
155 
156         
157     }
158 }

后台代码

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Globalization;
 4 using System.Linq;
 5 using System.Text;
 6 using System.Windows.Data;
 7 
 8 namespace MyUserControlLibrary
 9 {
10     /// <summary>
11     /// 将角度转化成百分比
12     /// </summary>
13     public class ConverterCircleToPercent:IValueConverter
14     {
15         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
16         {
17             return (int)(double.Parse(value.ToString()) * 10 / 36);
18         }
19         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
20         {
21             throw new NullReferenceException();
22         }
23     }
24 }

转换类型

码农公寓

相关文章