• 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,如上文中有理解不当之处,敬请指正,定虚心接受。若言语有所不妥,还请谅解。代码取自项目,故源码不能分享,请见谅!

  • 相关阅读:
    MySQL 练习题
    MySQL 增删查改
    HTML显示与隐藏
    360布局
    div布局
    HTML练习2
    HTML练习

    if语句的用法及其案例
    输入输出,数据类型与运算符
  • 原文地址:https://www.cnblogs.com/endlesscoding/p/7396378.html
Copyright © 2020-2023  润新知