WPF 仿wp8加载动画效果

效果:

WPF 仿wp8加载动画效果_第1张图片


1,加用户控件PointProgressBar.xaml

XAML代码:

 
        
            
            
        
        
            
            
            
            
            
            
        
        
PointProgressBar.xaml.cs代码:

 
  
public partial class PointProgressBar : UserControl
    {
        public PointProgressBar()
        {
            InitializeComponent();
            this.Loaded += PointProgressBar_Loaded;
        }
        private Storyboard sb = null;
        private double value2 = 200;//中间距离
        void PointProgressBar_Loaded(object sender, RoutedEventArgs e)
        {
            if (sb == null)
            {
                sb = new Storyboard();
            }
            double value3 = this.root.ActualWidth;//获取容器呈现宽度
            double value1 = (value3 - value2) / 2;//计算第一段移动距离
            sb.Children.Add(EllipseAnimation(value1, value1 + value2, value3, TimeSpan.FromSeconds(0), e1));
            sb.Children.Add(EllipseAnimation(value1, value1 + value2, value3, TimeSpan.FromSeconds(0.2), e2));
            sb.Children.Add(EllipseAnimation(value1, value1 + value2, value3, TimeSpan.FromSeconds(0.4), e3));
            sb.Children.Add(EllipseAnimation(value1, value1 + value2, value3, TimeSpan.FromSeconds(0.6), e4));
            sb.Children.Add(EllipseAnimation(value1, value1 + value2, value3, TimeSpan.FromSeconds(0.8), e5));
            sb.Children.Add(EllipseAnimation(value1, value1 + value2, value3, TimeSpan.FromSeconds(1.0), e6));
            sb.RepeatBehavior = RepeatBehavior.Forever;
            sb.Begin();
        }
        /// 
        /// 
        /// 
        /// 第一阶段移动距离
        /// 第二阶段移动距离
        /// 第三阶段移动距离
        /// 动画开始时间
        /// 目标元素
        /// DoubleAnimationUsingKeyFrames
        private DoubleAnimationUsingKeyFrames EllipseAnimation(double value1, double value2, double value3, TimeSpan startTime, UIElement element)
        {
            DoubleAnimationUsingKeyFrames doubleAnimationUsingKeyFrames = new DoubleAnimationUsingKeyFrames();
            doubleAnimationUsingKeyFrames.BeginTime = startTime;
            EasingDoubleKeyFrame easingDoubleKeyFrame1 = new EasingDoubleKeyFrame();
            easingDoubleKeyFrame1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5));
            easingDoubleKeyFrame1.Value = value1;
            EasingDoubleKeyFrame easingDoubleKeyFrame2 = new EasingDoubleKeyFrame();
            easingDoubleKeyFrame2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.1));
            easingDoubleKeyFrame2.Value = value2;
            EasingDoubleKeyFrame easingDoubleKeyFrame3 = new EasingDoubleKeyFrame();
            easingDoubleKeyFrame3.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.6));
            easingDoubleKeyFrame3.Value = value3;
            doubleAnimationUsingKeyFrames.KeyFrames.Add(easingDoubleKeyFrame1);
            doubleAnimationUsingKeyFrames.KeyFrames.Add(easingDoubleKeyFrame2);
            doubleAnimationUsingKeyFrames.KeyFrames.Add(easingDoubleKeyFrame3);
            Storyboard.SetTarget(doubleAnimationUsingKeyFrames, element);
            Storyboard.SetTargetProperty(doubleAnimationUsingKeyFrames, new PropertyPath("(Canvas.Left)"));
            return doubleAnimationUsingKeyFrames;
        }
   }
PointProgressBar控件的使用:
添加引用:xmlns:local="clr-namespace:XXXXXXXXX"
        
源码下载地址:
http://download.csdn.net/detail/dongcidaci999/9178137
 
  
 
  


你可能感兴趣的:(WPF)