小米视频加载进度条效果实现

　　好吧，其实这些都是我闲暇时自己做着玩的，以前总是拿来主义，现在分享一下让我也为大家做一点贡献好了。废话不说了，看效果。

好吧 其实没什么技术含量 直接上代码好了 和我上一篇利用WPF动画实现圆形进度条是一个道理，表现形式不同而已。

<UserControl x:Class="MyUserControlLibrary.CircleProgressbarcontrol"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
             xmlns:local ="clr-namespace:MyUserControlLibrary"
             mc:Ignorable="d" 
             d:DesignHeight="60" d:DesignWidth="60" MinWidth="60" MinHeight="60" Loaded="UserControl_Loaded">
    <UserControl.Resources>
        <local:ConverterCircleToPercent x:Key="converter"/>
        <Storyboard x:Key="MainStoryboard">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ed:Arc.EndAngle)" Storyboard.TargetName="ProgressArea">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="360"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Grid>
        <Border Name="MainBorder" Margin="0,0,0,0" CornerRadius="500" BorderThickness="2" BorderBrush="White" Opacity="0.6" Background="Black"/>
        <ed:Arc Name="ProgressArea" Margin="5,5,5,5" ArcThickness="1" StartAngle="0" EndAngle="0" ArcThicknessUnit="Percent" Stretch="None" Fill="White" Opacity="0.4"/>
        <Ellipse Name="CenterCircle" Width="5" Height="5" Fill="White" Opacity="0.7"/>
        <Label Name="AreaShow" Margin="10,10,10,10" Content="{Binding ElementName=ProgressArea, Path=EndAngle,Converter={StaticResource converter}}" Foreground="White" FontFamily="宋体" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="20" Opacity="0.8"/>
    </Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace MyUserControlLibrary
{
    /// <summary>
    /// CircleProgressbarcontrol.xaml 的交互逻辑
    /// </summary>
    public partial class CircleProgressbarcontrol : UserControl
    {
        #region 属性

        private bool isShowPercent = true;
        /// <summary>
        /// 是否显示百分比
        /// </summary>
        [System.ComponentModel.Browsable(true),System.ComponentModel.Category("Appearance"),System.ComponentModel.Description("获取或设置是否显示百分比")]
        public bool IsShowPercent {
            get {
                return isShowPercent;
            }
            set {
                isShowPercent = value;
                if (isShowPercent)
                {
                    AreaShow.Visibility = System.Windows.Visibility.Visible;
                }
                else {
                    AreaShow.Visibility = System.Windows.Visibility.Hidden;
                }
            }
        }
        
        private TimeSpan percentTimeSpan = new TimeSpan(0, 0, 1);
        /// <summary>
        /// 每次更新百分比时的经过时间
        /// </summary>
        [System.ComponentModel.Browsable(true),System.ComponentModel.Category("Appearance"),System.ComponentModel.Description("获取或设置每次更新百分比时的经过时间")]
        public TimeSpan PercentTimeSpan {
            get {
                return percentTimeSpan;
            }
            set {
                percentTimeSpan = value;
                Storyboard sb = (Storyboard)this.Resources["MainStoryboard"];
                ((DoubleAnimationUsingKeyFrames)sb.Children[0]).KeyFrames[1].KeyTime = KeyTime.FromTimeSpan(value);
            }
        }

        #endregion

        public CircleProgressbarcontrol()
        {
            InitializeComponent();
        }

        #region 方法

        /// <summary>
        /// 设置当前百分比
        /// </summary>
        /// <param name="d">百分比</param>
        public void setPercent(double d) {
            Storyboard sb = (Storyboard)this.Resources["MainStoryboard"];
            ((DoubleAnimationUsingKeyFrames)sb.Children[0]).KeyFrames[0].Value = ProgressArea.EndAngle;
            ((DoubleAnimationUsingKeyFrames)sb.Children[0]).KeyFrames[1].Value = d*3.6;
            sb.Begin();
        }

        #endregion

        #region 事件

        //界面调整
        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            if (Double.IsNaN(Width))
            {
                if (ActualWidth >= ActualHeight)
                {
                    double t = (ActualWidth - ActualHeight) / 2;
                    MainBorder.Margin = new Thickness(t, 0, t, 0);
                    ProgressArea.Margin = new Thickness(t + 5, 5, t + 5, 5);
                    AreaShow.Margin = new Thickness(t + 10, 10, t + 10, 10);
                }
                else
                {
                    double t = (ActualHeight - ActualWidth) / 2;
                    MainBorder.Margin = new Thickness(0, t + 0, 0, t + 0);
                    ProgressArea.Margin = new Thickness(5, t + 5, 5, t + 5);
                    AreaShow.Margin = new Thickness(10, t + 10, 10, t + 10);
                }
                AreaShow.FontSize = AreaShow.ActualWidth / 2;
            }
            else
            {
                if (Width >= Height)
                {
                    double t = (Width - Height) / 2;
                    MainBorder.Margin = new Thickness(t, 0, t, 0);
                    ProgressArea.Margin = new Thickness(t + 5, 5, t + 5, 5);
                    AreaShow.Margin = new Thickness(t + 10, 10, t + 10, 10);
                }
                else
                {
                    double t = (Height - Width) / 2;
                    MainBorder.Margin = new Thickness(0, t, 0, t);
                    ProgressArea.Margin = new Thickness(5, t + 5, 5, t + 5);
                    AreaShow.Margin = new Thickness(10, t + 10, 10, t + 10);
                }
                AreaShow.FontSize = AreaShow.ActualWidth / 2;
            }
        }

        #endregion
    }
}

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Windows.Data;

namespace MyUserControlLibrary
{
    /// <summary>
    /// 将角度转化成百分比
    /// </summary>
    public class ConverterCircleToPercent:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (int)(double.Parse(value.ToString()) * 10 / 36);
        }
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NullReferenceException();
        }
    }
}