WPF中的动画——(六)演示图板
前面所介绍的都是单一的动画,它只能修改单一属性。有的时候,我们需要将一组动画一起进行,对于一个按钮,我们可能有如下需求:
- 选择该按钮时,该按钮增大并更改颜色。
- 单击该按钮时,该按钮缩小并恢复其原始大小。
- 该按钮变成禁用时,缩小且不透明度缩减到 50%。
每个操作都同时对应进行着两个动画,此时用我们就需要用到TimelineGroup了,前文介绍TimeLine的时候已经介绍过它了,它可以将多个TimeLine封装成一个统一调度。但TimeLine是一个抽象基类,我们通常使用的是它的子类演示图板(Storyboard)。
演示图板(Storyboard) 是一种为其所包含的时间线提供目标信息的容器时间线。 演示图板可以包含任意类型的 Timeline,包括其他容器时间线和动画。
var widthAnimation = new DoubleAnimation() { To = 250, FillBehavior = FillBehavior.Stop };
var opacityAnimation = new
DoubleAnimation() { From = 1, To = 0, FillBehavior = FillBehavior.Stop };
var storyBoard = new
Storyboard() { Duration = TimeSpan.FromSeconds(2) };
storyBoard.Children.Add(widthAnimation);
storyBoard.Children.Add(opacityAnimation);
Storyboard.SetTargetProperty(widthAnimation, new
PropertyPath("Width"));
Storyboard.SetTargetProperty(opacityAnimation, new
PropertyPath("Opacity"));
storyBoard.Begin(button);
这个例子简单的演示了如何使用StoryBoard,由于Storyboard经常使用与XAML,这里也介绍一下XAML中的写法:
<Storyboard x:Key="storyBoard">
<DoubleAnimation Storyboard.TargetProperty="Width" To="250" FillBehavior="Stop"/>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" FillBehavior="Stop"/>
</Storyboard>
使用方式如下:
var storyBoard = this.FindResource("storyBoard") as
Storyboard;
storyBoard.Begin(button);
比直接用代码编写更加简单。
两个附加属性:
Storyboard.TargetProperty:
由于StoryBoard对应着多个属性的变化,因此不能用UIElement.BeginAnimation的方式执行,而采用Storyboard.TargetProperty附加属性来写入。
Storyboard.TargetName:
Storyboard也可以通知控制多个对象,此时的对象就不能直接在Storyboard.Begin函数中执行,而是通过Storyboard.TargetProperty附加属性写入。
<Storyboard x:Key="storyBoard">
<DoubleAnimationStoryboard.TargetName="button" Storyboard.TargetProperty="Width" To="250" FillBehavior="Stop"/>
<DoubleAnimationStoryboard.TargetName="button" Storyboard.TargetProperty="Opacity" From="1" To="0" FillBehavior="Stop"/>
</Storyboard>
这种方式下,执行storyboard的时候也不用在传入对象了
var storyBoard = this.FindResource("storyBoard") as
Storyboard;
storyBoard.Begin();
控制Storyboard
前面已经介绍过,Storyboard 像Clock方法一样,直接封装了Begin、 Seek、 Stop、 Pause、Resume、Remove等几个函数,在代码中可以直接使用。另外,在XAML中,Storyboard是可以直接在触发器中(EventTrigger、DataTrigger、Trigger)使用的,如下就是一个简单的例子:
<Window.Resources>
<Storyboard x:Key="storyBoard">
<DoubleAnimation Storyboard.TargetName="button" Storyboard.TargetProperty="Width" To="250" FillBehavior="Stop"/>
<DoubleAnimation Storyboard.TargetName="button" Storyboard.TargetProperty="Opacity" From="1" To="0" FillBehavior="Stop"/>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Loaded" >
<BeginStoryboard Storyboard="{StaticResource storyBoard}" />
</EventTrigger>
</Window.Triggers>
可以看到,这儿用到了一个系统提供的名为BeginStoryboard的TriggerAction,同样也提供了SeekStoryboard、 StopStoryboard、 PauseStoryboard、ResumeStoryboard、RemoveStoryboard等几个TriggerAction。一个稍微复杂点的例子如下:
<Window.Resources>
<Storyboard x:Key="storyBoard">
<DoubleAnimation Storyboard.TargetName="button" Storyboard.TargetProperty="Width" To="250" FillBehavior="Stop"/>
<DoubleAnimation Storyboard.TargetName="button" Storyboard.TargetProperty="Opacity" From="1" To="0" FillBehavior="Stop"/>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="MouseEnter" >
<BeginStoryboard Name="storyBegin" Storyboard="{StaticResource storyBoard}" />
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave" >
<RemoveStoryboard
BeginStoryboardName="storyBegin" />
</EventTrigger>
</Window.Triggers>
另外,微软提供的Interaction也能在XAML中执行Storyboard的控制:
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:ControlStoryboardAction Storyboard="{StaticResource storyBoard}" ControlStoryboardOption="Play" />
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:ControlStoryboardAction Storyboard="{StaticResource storyBoard}" ControlStoryboardOption="Stop" />
</i:EventTrigger>
</i:Interaction.Triggers>
由于微软的Interaction扩展在MVVM模式下非常有用,扩展性也非常好,这种方式很多时候更方便。关于Interaction的使用方式,请参看园子里的这篇文章:Interaction triggers in WPF
参考资料:
WPF中的动画——(六)演示图板的更多相关文章
- WPF中的动画——(三)时间线(TimeLine)
WPF中的动画——(三)时间线(TimeLine) 时间线(TimeLine)表示时间段. 它提供的属性可以让控制该时间段的长度.开始时间.重复次数.该时间段内时间进度的快慢等等.在WPF中内置了如下 ...
- 【WPF学习笔记】[转]周银辉之WPF中的动画 && 晓风影天之wpf动画——new PropertyPath属性链
(一)WPF中的动画 动画无疑是WPF中最吸引人的特色之一,其可以像Flash一样平滑地播放并与程序逻辑进行很好的交互.这里我们讨论一下故事板. 在WPF中我们采用Storyboard(故事板)的方式 ...
- [转]WPF中的动画
WPF中的动画 周银辉 动画无疑是WP ...
- (转载)WPF中的动画——(一)基本概念
http://www.cnblogs.com/TianFang/p/4050845.html WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面.首先,我们来复习一下动画的基本概念.计 ...
- WPF中的动画
动画无疑是WPF中最吸引人的特色之一,其可以像Flash一样平滑地播放并与程序逻辑进行很好的交互.这里我们讨论一下故事板. 在WPF中我们采用Storyboard(故事板)的方式来编写动画,为了对St ...
- WPF中的动画——(一)基本概念
WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面.首先,我们来复习一下动画的基本概念.计算机中的动画一般是定格动画,也称之为逐帧动画,它通过每帧不同的图像连续播放,从而欺骗眼和脑产生 ...
- WPF中的动画——(五)关键帧动画
与 From/To/By 动画类似,关键帧动画以也可以以动画形式显示目标属性值. 和From/To/By 动画不同的是, From/To/By 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个 ...
- WPF中的动画——(五)路径动画
路径动画是一种专门用于将对象按照指定的Path移动的动画,虽然我们也可以通过控制动画的旋转和偏移实现对象的移动,但路径动画更专业,它的实现更加简洁明了. 路径动画中最常用的是MatrixAnimati ...
- WPF中的动画——(二)From/To/By 动画
我们所实现的的动画中,很大一部分是让一个属性在起始值和结束值之间变化,例如,我在前文中实现的改变宽度的动画: var widthAnimation = new DoubleAnimation() ...
随机推荐
- 测试mysqldump 压缩率和时间消耗
测试mysqldump 压缩率和时间消耗 实验总结: 从本次实验数据可以看出,mysqldump通过|gzip参数可以将导出文件压缩53%,同时耗时也普通非压缩模式的2.3倍. 数据库环境: #[ro ...
- hadoop 安装 错误及解决方法
1.ssh 相关问题: rm ~/.ssh/known_hosts //与ssh中的不服 //再重新生成密钥 2.ERROR namenode.NameNode: java.io.IOExceptio ...
- django使用haystack对接Elasticsearch实现商品搜索
# 原创,转载请留言联系 前言: 在做一个商城项目的时候,需要实现商品搜索功能. 说到搜索,第一时间想到的是数据库的 select * from tb_sku where name like %苹果手 ...
- 如何简单解释 MapReduce算法
原文地址:如何简单解释 MapReduce 算法 在Hackbright做导师期间,我被要求向技术背景有限的学生解释MapReduce算法,于是我想出了一个有趣的例子,用以阐释它是如何工作的. 例子 ...
- Two Sum ——经典的哈希表的题
Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...
- private是自己私有的,protected是可以让孩子知道的,public是公开的
三种访问权限 public:可以被任意实体访问,数据成员和函数成员可在成员函数,友元,继承类中直接使用.亦可以作为接口,供类的用户使用 protected:只允许子类及本类的成员函数访问,在基类中用法 ...
- 【面试题】整理一下2018年java技术要领
整理一下2018年java技术要领 基础篇 基本功 面向对象的特征 final, finally, finalize 的区别 int 和 Integer 有什么区别 重载和重写的区别 抽象类和接口有什 ...
- 使用 ceph 作为 openstack 的后端
openstack 与 ceph 集成 在 ceph 上创建 openstack 需要的 pool. sudo ceph osd pool create volumes 128 sudo ceph o ...
- 战火魔兽CJQ圣印问题
本来一直是玩的T的. 一次偶然机会打了次团本,用CJQ(毒蛇),在副本中问CJQ用什么圣印 有人说命令,有人说腐蚀... 对此做先研究 无BUFF木桩测试:5分钟(开sp翅膀,不踩奉献,技能什么好了按 ...
- gradle打包分编译环境
gradle打包分测试.开发.生产环境 buildTypes { debug { signingConfig signingConfigs.myConfig buildConfigField(&quo ...