WPF动画制作有指针的钟表案例详解

使用wpf动画比使用计时器所制作出的动画更加流畅,不会存在像计时器作出的动画一样存在卡顿;今天就利用制作有指针的钟表来简单了解一下wpf的神奇之处.
话不多说,先上图;

各位客官您往这瞧↓↓↓

首先添加表盘图片

//添加表盘
            Image clock = new Image();
            //图片路径
            clock.Source = new BitmapImage(new Uri("../../img/clock.png",UriKind.Relative));
            //图片大小
            clock.Width = 300;
            clock.Height = 300;
            //表盘图片的位置
            Canvas.SetLeft(clock,bg.Width / 2 - clock.Width / 2);
            Canvas.SetTop(clock,bg.Height/2-clock.Height/2);
            //将表盘图片添加进页面中
            bg.Children.Add(clock);

使用border来分别制作时针、分针和秒针。

//添加秒针
            Border miao = new Border();
            miao.Width = 2;
            miao.Height = 120;
            miao.Background = Brushes.Yellow;
            //将秒针的位置设置在表盘中央
            Canvas.SetLeft(miao, Canvas.GetLeft(clock) + clock.Width / 2 - miao.Width / 2);
            Canvas.SetTop(miao, Canvas.GetTop(clock) + clock.Height / 2 - miao.Height );
            //将秒针添加在窗口中
            bg.Children.Add(miao);
            

设置秒针旋转动画

//将获取到的系统当前秒数转化为度数,秒针走一圈360度,共走60次,所以每一次是6度,所以获取到当前秒数×6度就是当前时间秒针应该对准的位置
 double s = DateTime.Now.Second * 6;
            //设置秒针转动动画
            //DoubleAnimation后边括号中的参数分别指向起始位置和结束位置和一共所要用的时间---起始位置为当前秒数所指的位置加上360度是为了保证走一圈
            DoubleAnimation mz = new DoubleAnimation(s,360+s,new Duration(TimeSpan.FromSeconds(60)));   
            //将设置的动画添加给秒针         
            Storyboard.SetTarget(mz,miao);
            //给故事板动画添加对应指令
            Storyboard.SetTargetProperty(mz,new PropertyPath("RenderTransform.Angle"));
            //将设置好的动画添加到故事板中
            story.Children.Add(mz);
            //实例化对应指令
            RotateTransform miaozhuan = new RotateTransform();
            //将实例化后的动画方式添加给设置好的故事板中的秒针动画
            miao.RenderTransform = miaozhuan;
            //设置旋转的原点位置
            miao.RenderTransformOrigin=new Point(1,1);
            //设置该动画重复播放
            mz.RepeatBehavior = RepeatBehavior.Forever;
            //设置动画开始
            story.Begin();

创建分针

   //设置分针样式
            Border fen = new Border();
            fen.Width = 2;
            fen.Height = 100;
            fen.Background = Brushes.Green;
            Canvas.SetLeft(fen, Canvas.GetLeft(clock) + clock.Width / 2 - fen.Width);
            Canvas.SetTop(fen, Canvas.GetTop(clock) + clock.Height/2 - fen.Height);
            bg.Children.Add(fen);

设置分针转动

 //将获取到的系统分针数转化为度数
            double m = DateTime.Now.Minute * 6;
            //设置分针动画
            DoubleAnimation fz = new DoubleAnimation(m,360+m,new Duration(TimeSpan.FromMinutes(60)));
            Storyboard.SetTarget(fz, fen);
            Storyboard.SetTargetProperty(fz, new PropertyPath("RenderTransform.Angle"));
            story.Children.Add(fz);
            //设置分针旋转
            RotateTransform fenzhuan = new RotateTransform();
            fen.RenderTransform = fenzhuan;
            fen.RenderTransformOrigin = new Point(1,1);
            fz.RepeatBehavior = RepeatBehavior.Forever;
            story.Begin();

设置时针

 //设置时针样式
            Border shi = new Border();
            shi.Width = 2;
            shi.Height = 80;
            shi.Background = Brushes.Red; 
            Canvas.SetLeft(shi, Canvas.GetLeft(clock) + clock.Width / 2 - shi.Width);
            Canvas.SetTop(shi, Canvas.GetTop(clock) + clock.Height/2 - shi.Height);
            bg.Children.Add(shi);

设置时针旋转

//将获取到的时针数转换为度数--转换时针度数必须在获取到的时针对应度数上在加一个分针数的一半
            double h = (DateTime.Now.Hour * 30)+(DateTime.Now.Minute*0.5); 
            //设置时针动画
            DoubleAnimation sz = new DoubleAnimation(h,360+h,new Duration(TimeSpan.FromMinutes(360)));
            Storyboard.SetTarget(sz,shi);
            Storyboard.SetTargetProperty(sz, new PropertyPath("RenderTransform.Angle"));
            story.Children.Add(sz);
            //设置时针转动动画
            RotateTransform shizhuan = new RotateTransform();
            shi.RenderTransform = shizhuan;
            shi.RenderTransformOrigin = new Point(1, 1);
            sz.RepeatBehavior = RepeatBehavior.Forever;
            story.Begin();

通过以上代码即可实现wpf动画设置的指针时钟