WPF中的动画-低调大师

WPF中的动画

2018-08-26 539

原文: WPF中的动画

WPF中的动画
周银辉

动画无疑是WPF中最吸引人的特色之一，其可以像Flash一样平滑地播放并与程序逻辑进行很好的交互。这里我们讨论一下故事板。

在WPF中我们采用Storyboard（故事板）的方式来编写动画，为了对Storyboard有个大概的印象，你可以粘贴以下代码到XamlPad来查看效果：

< Page xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"

WindowTitle ="Storyboards Example" >

< StackPanel Margin ="20" >

< Rectangle Name ="MyRectangle"

Width ="100"

Height ="100" >

< Rectangle .Fill >

< SolidColorBrush x:Name ="MySolidColorBrush" Color ="Blue" />

</ Rectangle.Fill >

< Rectangle .Triggers >

< EventTrigger RoutedEvent ="Page.Loaded" >

< BeginStoryboard >

< Storyboard RepeatBehavior ="Forever" AutoReverse ="True" >

< DoubleAnimation

Storyboard.TargetName ="MyRectangle"

Storyboard.TargetProperty ="Width"

From ="100" To ="200" Duration ="0:0:1" />

</ Storyboard >

</ BeginStoryboard >

</ EventTrigger >

</ Rectangle.Triggers >

</ Rectangle >

</ StackPanel >

</ Page >

在介绍Storyboard之前应该先了解Animation
Animation提供一种简单的“渐变”动画，我们为一个Animation指定开始值和一个结束值，并指定由开始值到达结束值所需的时间，便可形成一个简单的动画。比如我们指定长方形的宽度由100变化到200，所需时间为1秒，很容易想像这样的动画是什么样的，而它对应的Xaml代码如下：

< DoubleAnimation

Storyboard.TargetName ="MyRectangle"

Storyboard.TargetProperty ="Width"

From ="100" To ="200" Duration ="0:0:1" />

将它翻译成C#代码则如下:

DoubleAnimation myDoubleAnimation = new DoubleAnimation();

myDoubleAnimation.From = 100 ;

myDoubleAnimation.To = 200 ;

myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds( 1 ));

Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.WidthProperty));

代码里我们定义了一个DoubleAnimation，并指定了它的开始值和结束值以及它由开始值到达结束值所需的时间。至于后面两句，它们是用来将Aniamtion与指定的对象和指定的属性相关联，等会我们将介绍。
注意到，这里我们使用的是DoubleAnimation，因为我们所要变化的是数值。那么如果我们要变化颜色是不是就用ColorAnimation了呢，对，其实出了这些之外还有PointAnimation等等，并且你可以实现IAnimatable接口来实现自定义版本的Animation。关于这些你可以参见System.Windows.MediaAniamtion名字空间.

但值得注意的是并非每个属性都能够使用Animation，它必须满足以下条件：
1,它必须是Dependency Property
2,它所在类必须继承于DependencyObject,必须实现了IAnimatable接口.
3,必须有类型一致的Animation Type（即Color类型使用ColorAniamtion，Point类型使用PointAnimation等）

一个简单的Animation定义了一个简单的动画，很容易想到的是，如果若干个Animation同时作用于一个对象，那么这个对象不就可以表现复杂的动画了吗，对，这就是Storyboard

Storyboard可以看做是Animation的容器，它包含了若干的简单动画来完成一个复杂动画。
参考以下代码：

< Page xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"

WindowTitle ="Storyboards Example" >

< StackPanel Margin ="20" >

< Rectangle Name ="MyRectangle"

Width ="100"

Height ="100" >

< Rectangle .Fill >

< SolidColorBrush x:Name ="MySolidColorBrush" Color ="Blue" />

</ Rectangle.Fill >

< Rectangle .Triggers >

< EventTrigger RoutedEvent ="Page.Loaded" >

< BeginStoryboard >

< Storyboard RepeatBehavior ="Forever" AutoReverse ="True" >

< DoubleAnimation

Storyboard.TargetName ="MyRectangle"

Storyboard.TargetProperty ="Width"

From ="100" To ="200" Duration ="0:0:1" />

< ColorAnimation

Storyboard.TargetName ="MySolidColorBrush"

Storyboard.TargetProperty ="Color"

From ="Blue" To ="Red" Duration ="0:0:1" />

</ Storyboard >

</ BeginStoryboard >

</ EventTrigger >

</ Rectangle.Triggers >

</ Rectangle >

</ StackPanel >

</ Page >

这里我们的Storyboard定义了DoubleAnimation来变化矩形的宽度，并定义了ColorAnimation来变化矩形的颜色。

至此,你已经可以编写绚丽的WPF动画了,并推荐你下载Expression Blend来制作WPF动画.

但你会发现使用XAML标记的方式来编写动画虽然很简单,但缺乏了C#等程序设计语言的灵活性,比如我们的矩形动画中矩形的宽度是由后台逻辑计算出来的变量值,我们的动画将如何编写呢,这时我更喜欢使用C#的方式来编写动画,虽然这所需的代码量更大.
以下重点介绍如何用C#编写动画，并且这更助于你理解Storyboard是如何工作的。

参考以下代码：

             this .Name = " PageMain " ;
            myRectangle.Name = " MyRectangle " ;

            NameScope.SetNameScope( this , new NameScope());
             this .RegisterName(myRectangle.Name, myRectangle);

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 100 ;
            myDoubleAnimation.To = 200 ;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds( 1 ));
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.WidthProperty));


            Storyboard myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);

             this .Loaded += delegate ( object sender, MouseEventArgs e)
            {
                myStoryboard.Begin( this );
            };

其中:

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 100;
            myDoubleAnimation.To = 200;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
定义了一个DoubleAniamtion,并指定了它的开始值和结束值以及所需的时间.
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);设置myDoubleAniamtion的作用对象是"myRectangle",注意到传入的第二个参数是一个字符串myRectangle.Name,那么我们的程序怎么知道"myRectangle"这个字符串就是指我们的矩形对象myRectangle呢,这里存在一个名称与对象的映射,即我们的"myRectangle"映射到矩形对象myRectangle,为了构造这个映射我们涉及到了NameScope(名字域)这个概念.
            NameScope.SetNameScope(this, new NameScope());
            this.RegisterName(myRectangle.Name, myRectangle);
上面的代码中,this设置了一个名字域,myRectagle向这个名字域注册了自己的名字,这样我们的程序就可以通过this的名字域来查找到myRectangle与"myRectangle"之间的映射关系了,关于NameScope可以参见MSDN WPF Namescopes主题.
为了让myDoubleAnimation知道它所作用的属性是谁,我们使用Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.WidthProperty));语句来将Aniamtion与属性关联起来,其中PropertyPath中指定要作用的对象所对应的DependencyProperty.
然后我们将定义好的myDoubleAniamtion添加到myStoryboard的Children中去.最后就可以通过调用Storyboard的Begin(FrameworkElement)方法来开始我们的动画.

Begin方法的另一个重载形式是public Begin (containingObject,isControllable),第二个参数表明我们的storyboard是否是可控的,如果可控的话,我们可以像控制播放器一样控制来控制storyboard,关于控制Storyboard请参考Storyboard类中的Pause,Seek等方法.

至此也许我们会认为这些知识足以应付简单的动画了,现在让我们一起设计一个简单的动画,也许会发现些问题.

假设我们的界面中存在一个Button对象button1,我们设计一个简单的动画让它在窗口中的x坐标从0连续变化到100,然后在从100变化到0,如此重复.也许我们会编写如下的代码:

             this .button1.Name = " button1 " ;
             this .Name = " window1 " ;
            NameScope.SetNameScope( this , new NameScope());
             this .RegisterName( this .button1.Name, this .button1);

            DoubleAnimation xAnimation = new DoubleAnimation();
            xAnimation.From = 0 ;
            xAnimation.To = 100 ;
            xAnimation.Duration = new Duration(TimeSpan.FromSeconds( 1 ));

            Storyboard story = new Storyboard();
            story.AutoReverse = true ;
            story.RepeatBehavior = RepeatBehavior.Forever;
            story.Children.Add(xAnimation);

            Storyboard.SetTargetName(xAnimation, this .button1.Name);
            Storyboard.SetTargetProperty(xAnimation, ??? );

但当我们编写到 Storyboard.SetTargetProperty(xAnimation, ??? );时发现似乎不知道将我们的xAniamtion关联到哪个属性.似乎Button中没有用来控制X坐标的DependencyProperty.但通过研究后发现(你可以通过ExpressionBlend自动生成的XAML代码来发现这些信息),如果我们将button1的RenderTransform设置为TranslateTransform,然后可以通过TranslateTransform的XProperty属性来更改button1的X坐标.注意到,我们并不是像以前一样直接关联到Button的某个属性(比如先前的WidthProperty),而是通过其RenderTransformProperty属性的XProperty来间接关联的,这中方式叫做"属性链"(PropertyChain).
参考下面的代码:

            DependencyProperty[] propertyChain = new DependencyProperty[]
            {
                Button.RenderTransformProperty,
                TranslateTransform.XProperty
            };

            Storyboard.SetTargetProperty(xAnimation, new PropertyPath( " (0).(1) " , propertyChain));

为了构造PropertyChain,我们先定义一个DependencyProperty的数组,注意数组的元素是怎么来的,它按照属性链的"链条"关系依次书写,直到到达我们最终要修改的属性,(由于我们是通过将RenderTransformProperty设置为TranslateTransform类型,所以第二个元素是 TranslateTransform.XProperty),简单地说就是(类型1.属性1,类型2.属性2,....类型n.属性n),其中类型i是属性i-1的类型或可以与之转换的类型.
这样我们的代码就演化如下:

             this .button1.RenderTransform = new TranslateTransform();

             this .button1.Name = " button1 " ;
             this .Name = " window1 " ;
            NameScope.SetNameScope( this , new NameScope());
             this .RegisterName( this .button1.Name, this .button1);

            DoubleAnimation xAnimation = new DoubleAnimation();
            xAnimation.From = 0 ;
            xAnimation.To = 100 ;
            xAnimation.Duration = new Duration(TimeSpan.FromSeconds( 1 ));

            DependencyProperty[] propertyChain = new DependencyProperty[]
            {
                Button.RenderTransformProperty,
                TranslateTransform.XProperty
            };

            Storyboard story = new Storyboard();
            story.AutoReverse = true ;
            story.RepeatBehavior = RepeatBehavior.Forever;
            story.Children.Add(xAnimation);

            Storyboard.SetTargetName(xAnimation, this .button1.Name);
            Storyboard.SetTargetProperty(xAnimation, new PropertyPath( " (0).(1) " , propertyChain));

            story.Begin( this );

注意:如果你收到关于PropertyChain的运行时错误或动画没有效果,那么你应该初始化button的 RenderTransform属性,所以我们添加了 this.button1.RenderTransform = new TranslateTransform();语句.

更多的,请参见Windows SDK "Storyboard Overview"
示例程序下载

微信关注我们

原文链接：https://yq.aliyun.com/articles/677682

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

python实现进度条

import time, sys def process(num, total): rate = num / total ratenum = int(round(rate, 2) * 100) bar = '\r%s%% [%s%s]' %(ratenum, '#'*ratenum, ' '*(100 - ratenum)) sys.stdout.write(bar) sys.stdout.flush() n = 80 for i in range(1, n+1): time.sleep(0.1) process(i, n)

2018-08-27

521

个人一点小心得：可以先在应用层面上学习，不用一开始就学底层，在应用中遇到底层问题时然后再对底层进行深入学习，也就是先从应用层再到底层，有问有答可以加深印象。下面图片是Java学习的建议流程，而其中的知识点只是一部分，在解决这些疑问时应该自行拓展。上面几张图片中的答案推荐阅读以下书籍：《Java编程思想》《Java并发编程的艺术》《Java核心技术》《深入理解Java虚拟机》以下图片中相关知识的书籍希望有大牛能够来推荐一下，分享一些阅读心得，谢谢。

2018-08-27

698

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。