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

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

　　这是我的第一篇随笔，最近因为工作需要，开始学习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 }

转换类型

posted on 2015-12-16 11:34 NET未来之路阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/5050617.html

WPF利用动画实现圆形进度条相关推荐

微信小程序动画之圆形进度条
微信小程序动画之圆形进度条上图: 代码: js: //获取应用实例 var app = getApp()var interval; var varName; var ctx = wx.createC ...
利用 canvas 实现圆形进度条，实现倒计时效果
#实现圆环渐变倒计时效果内容效果图需求分析实现技术实现过程全部源码 1. 效果图展示随着时间的减少, 圆环的红黄色部分会慢慢的减少,圆环中的数字会变小,一直到0停止. 2. 需求分析可 ...
android圆环进度条动画,Android 圆形进度条，类似一些计步软件的进度显示！
Android 圆形的进度条,类似于一些计步的进度显示.其实也是我们项目中的效果,只不过后来迭代中改进了,所以现在才拿出来.浏览更多安卓源码 usage android:id="@+id/a ...
圆的css样式,圆形进度条css3样式
30% 以下样式100upx是50upx的2倍,这是尺寸比例 .con { position: relative; display: inline-block; height: 100upx; wid ...
微信小程序环形进度条_微信小程序实现圆形进度条动画
本文实例为大家分享了微信小程序动画之圆形进度条,供大家参考,具体内容如下上图: 代码: js: //获取应用实例 var app = getApp() var interval; var varNa ...
使用GDI+实现圆形进度条控件的平滑效果
DownLoad Src 传统的GDI绘制图形时的一个致命缺点是图像存在锯齿毛糙, 使用GDI+能绘制漂亮的渐变图像并有光滑图像的功能.利用GDI+对圆形进度条控件进行修改,效果如下:
android刷新时的圆形动画_Android动画篇（一）：圆形进度条CircleProgressBar
前言# 最近看框架和源码比较多,很久没有写动画了,相信很多的朋友都对动画感兴趣,我也不例外,毕竟做前端还是要靠动画特效吃饭的,并且比写功能模块更有成就感. 今天我们就来个稍微简单一点的CirclePr ...
WPF 实现圆形进度条
WPF 实现圆形进度条控件名:CircularProgressBar 作者:WPFDevelopersOrg - 驚鏵原文链接[1]:https://github.com/WPFDevelo ...
html进度条圆圈渐变色,HTML5 canvas带渐变色的圆形进度条动画
jquery-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件.该圆形进度条使用的是HTML5 canvas来绘制圆形进度条及其动画效果,进度条使用渐变色来填充,效果非 ...

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

WPF利用动画实现圆形进度条相关推荐

最新文章

热门文章