WPF控制动画开始、停止、暂停和恢复

1、闲言

好久也没更新一博客了,自己有点发懒,同时确实这几个月来也有点忙。风机监测软件,项目中,有这样一个小需求:正常风机在旋转的时候,上位机软要做一个风机的图片,让它不停地旋转,一但检测到下面风机停止了,上位机软件界面的风机图片也要跟着停止,并且风机图片的旋转速度最好是能够与真实的速度成比例关系,这样软件才更有逼格一点。就是实现这样一个效果,看下图1,左边是一个状态指示,没有做动画,只是做了一个图片的切换,效果还看得过去吧。

图1 风机旋转动画

2、动画制作

 在WPF做动画前,首先超码得有3个东西:动画要做什么样子的动作(基本的有旋转,平移,放缩等等),是什么类型的动画持续多久(某个数值变化,颜色变化,3D变化之类的),最后是一个故事板。这就相当于我们开发人员做个导演,而界面上的控件就是我们请来的演员,所有的窗体就是我们场地。故事板就是表演的剧本了,一切准备就绪后,就可以开始请演员们做事了(在这里,我要它转,而且是360度的转,有残忍了)。

3个东西准备的相应的代码下:

1 private RotateTransform rt_FanRotate = new RotateTransform();   //做旋转动
2 private DoubleAnimation da_FanRotate = new DoubleAnimation();   //数值类型
3 private Storyboard sb_FanRotate = new Storyboard();             //故事板

接下来就开始安排旋转动作了,代码如下:

1 rt_FanRotate.CenterX = img_FanRotate.Width / 2;     //旋转中心
2 rt_FanRotate.CenterY = img_FanRotate.Height / 2;
3 img_FanRotate.RenderTransform = rt_FanRotate;       //将此旋转变换赋给风机图片控件

动作安排好看,就要开始准备要这个动作怎么做了,做多久了。平时我们自己转圈,有转90度的,有转180度的,还有转720度(这家伙可能是抽风了)。并且还有指定这个旋转的时间,有时候要它慢慢地完成,有时要它瞬间完成,在这里我要这个风机图片从0度开始转,转360度,用时300ms,代码如下:

1 da_FanRotate.Duration = new Duration(TimeSpan.FromMilliseconds(600));
2 da_FanRotate.From = 0;
3 da_FanRotate.By = 360;

动作安排好了,动作的怎么动,动多久也指定好了,可以让风机图片上场了。这个时候,导演就开始叫人了,代码如下:

1 DependencyProperty[] propertyChain = new DependencyProperty[]
2 {
3     Image.RenderTransformProperty,
4     RotateTransform.AngleProperty
5 };
6 
7 Storyboard.SetTargetName(da_FanRotate, img_FanRotate.Name);
8 Storyboard.SetTargetProperty(da_FanRotate, new PropertyPath("(0).(1)", propertyChain));
9 sb_FanRotate.Children.Add(da_FanRotate);

这段代码的理解比前面的可能稍微难一点点,不怕,我们一步步来分析。1~5行是定义了一个依赖属性链:Image的变化属性,和旋转变化的角度属性,它将是我们动画要控制的属性。说简单点,就是我们要让图片旋转变化。按理来讲,前面我们已经指定了图片的旋转动作,和它的时间,这里为什么还要在故事板上指定一下呢。因为故事板不止可以控制一个对象,它可以控制多个。这很好理解决,我们的电影电视不可能一直是一个人演吧(好像也有这样的电影,邪恶了!)。所以当我们的风机图片上场的时候,就应该给导演说,我是某某,来演XX的。因此就出现了7、8行的代码。个人的表述能力有限,如果把你说蒙了,请过来打我!!

这个时候一切准备就绪了,请开始我们的表演吧。不过还别急,我们还要设定一下,这个故场景要持续多长时间,也就是我们的一个境头要多长时间,代码如下:

1 sb_FanRotate.Duration = new Duration(TimeSpan.FromMilliseconds(600));
2 sb_FanRotate.RepeatBehavior = RepeatBehavior.Forever;

上面代码设定为故事的时间为600ms,不停地循环(小时候看的电视剧《西游记后传》就有类似的镜头,孙悟空拿个棒子不停地打打打打打!!)。

这个时候是真的全部准备就绪了,导演开始喊,Action!!代码如下:

sb_FanRotate.Begin(img_FanRotate);

这个时候,代开始RUN你的VS,就可以开心地发现在你的所指定的对象开始转了,应该很开心吧,当了一回导演了,小激动一把。

3、控制动画

① 开始动画

 按理来讲,第2节已经说明了如何开始动画了,不就是Begin吗?但是如果这样子单纯地Begin,动画是停不下来的。有的家伙演得比较投入,完全停不下来的那种。网上就有很多人碰到这种问题,如下图,这是CSDN博客上的一个博友总结的办法。不得不说这博友很是粗爆,别人不就是停不下来吗,直接把人家给踢走了(Remove)。当然我们是文明人,不能像他那样子。

 图2 博友动画停止

解决办法我们在开始动画的时,要使用如下Begin的方法:

sb_FanRotate.Begin(img_FanRotate, true);//如果只有一个动画, img_FanRotate可以写成this

后面一个true参数是让动画可控制。这样子问题都解决了。

② 停止、暂停和恢复动画

 有了上面对开始动画的说明,停止、暂停和恢复动画就很简单了,全部可调用官方的函数,如下:

1 sb_FanRotate.Pause(img_FanRotate); //暂停动画
2 sb_FanRotate.Resume(img_FanRotate);//恢复动画
3 sb_FanRotate.Stop(img_FanRotate);  //停止动画

百度知道上有人提出类似的问题,只可惜这哥们被踩了15次,大家也真是狠。这哥们其实挺冤的,不是Stop方法有问题,而是那些踩的人用的Begin方法不正确,在这里给这位哥们平个冤,希望过两天能收到他的感谢信。

图3 百度知道停止动画

 

③ 控制动画速度

这个也很容易,官方有自带的方法,如下:

sb_FanRotate.SetSpeedRatio(img_FanRotate, fanMeasure.FanSpeed1 / 2000);

总结

平时碰到问题,大家可百度,但是百度不到了,不要灰心,我们还可以查MSDN,或者是Google。另:本人初学WPF,如上文中有理解不当之处,敬请指正,定虚心接受。若言语有所不妥,还请谅解。代码取自项目,故源码不能分享,请见谅!

 

posted @ 2017-08-25 21:05 EndlessCoding 阅读(...) 评论(...) 编辑 收藏