前面所介绍的都是单一的动画,它只能修改单一属性。有的时候,我们需要将一组动画一起进行,对于一个按钮,我们可能有如下需求:

  • 选择该按钮时,该按钮增大并更改颜色。
  • 单击该按钮时,该按钮缩小并恢复其原始大小。
  • 该按钮变成禁用时,缩小且不透明度缩减到 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是可以直接在触发器中(EventTriggerDataTriggerTrigger)使用的,如下就是一个简单的例子:

<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中的动画——(六)演示图板的更多相关文章

  1. WPF中的动画——(三)时间线(TimeLine)

    WPF中的动画——(三)时间线(TimeLine) 时间线(TimeLine)表示时间段. 它提供的属性可以让控制该时间段的长度.开始时间.重复次数.该时间段内时间进度的快慢等等.在WPF中内置了如下 ...

  2. 【WPF学习笔记】[转]周银辉之WPF中的动画 && 晓风影天之wpf动画——new PropertyPath属性链

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

  3. [转]WPF中的动画

    WPF中的动画                                                                                  周银辉 动画无疑是WP ...

  4. (转载)WPF中的动画——(一)基本概念

    http://www.cnblogs.com/TianFang/p/4050845.html WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面.首先,我们来复习一下动画的基本概念.计 ...

  5. WPF中的动画

    动画无疑是WPF中最吸引人的特色之一,其可以像Flash一样平滑地播放并与程序逻辑进行很好的交互.这里我们讨论一下故事板. 在WPF中我们采用Storyboard(故事板)的方式来编写动画,为了对St ...

  6. WPF中的动画——(一)基本概念

    WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面.首先,我们来复习一下动画的基本概念.计算机中的动画一般是定格动画,也称之为逐帧动画,它通过每帧不同的图像连续播放,从而欺骗眼和脑产生 ...

  7. WPF中的动画——(五)关键帧动画

    与 From/To/By 动画类似,关键帧动画以也可以以动画形式显示目标属性值. 和From/To/By 动画不同的是, From/To/By 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个 ...

  8. WPF中的动画——(五)路径动画

    路径动画是一种专门用于将对象按照指定的Path移动的动画,虽然我们也可以通过控制动画的旋转和偏移实现对象的移动,但路径动画更专业,它的实现更加简洁明了. 路径动画中最常用的是MatrixAnimati ...

  9. WPF中的动画——(二)From/To/By 动画

    我们所实现的的动画中,很大一部分是让一个属性在起始值和结束值之间变化,例如,我在前文中实现的改变宽度的动画: var widthAnimation = new DoubleAnimation()    ...

随机推荐

  1. Keil MDK 5.14 仿真时System Viewer菜单显示空白和Peripherals菜单无外设寄存器

    keil mdk5.14新建工程进行仿真时,进入Debug环境发现System Viewer菜单显示空白,Peripherals菜单没有外设寄存器.如图1和图2所示.打开Oprons for Targ ...

  2. Linux 入门记录:十五、Linux 网络基本配置

    一.以太网(Ethernet) 以太网(Ethernet)是一种计算机局域网技术.IEEE 组织的 IEEE 802.3 标准制定了以太网的技术标准,它规定了包括物理层的连线.电子信号和介质访问层协议 ...

  3. gcc -rpath 指定动态库路径

    gcc -rpath 指定动态库路径 http://blog.csdn.net/v6543210/article/details/44809405

  4. 【LA3882】And then there was one

    做sb题也是一种乐趣,是吧…… #include<bits/stdc++.h> #define N 10005 using namespace std; int f[N],m,n,k; i ...

  5. BZOJ 4516: [Sdoi2016]生成魔咒——后缀数组、并查集

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=4516 题意 一开始串为空,每次往串后面加一个字符,求本质不同的子串的个数,可以离线.即长度为 ...

  6. [转] Socket心跳包异常检测的C语言实现,服务器与客户端代码案例

    转载自:zxh2075的专栏 在Socket心跳机制中,心跳包可以由服务器发送给客户端,也可以由客户端发送给服务器,不过比较起来,前者开销可能较大.本文实现的是由客户端给服务器发送心跳包,服务器不必返 ...

  7. 《java并发编程实战》读书笔记5--任务执行, Executor框架

    第6章 任务执行 6.1 在线程中执行任务 第一步要找出清晰的任务边界.大多数服务器应用程序都提供了一种自然的任务边界选择方式:以独立的请求为边界. -6.6.1 串行地执行任务 最简单的任务调度策略 ...

  8. 一个有趣的基于Django的调试插件--django-debug-toolbar

    django-debug-toolbar 介绍 django-debug-toolbar 是一组可配置的面板,可显示有关当前请求/响应的各种调试信息,并在单击时显示有关面板内容的更多详细信息. git ...

  9. 183. Customers Who Never Order

    Suppose that a website contains two tables, the Customers table and the Orders table. Write a SQL qu ...

  10. Laravel 下配置 Redis 让缓存、Session 各自使用不同的 Redis 数据库

    为什么要这样做? 默认情况下,Redis 服务会提供 16 个数据库,Laravel 使用数据库 0 (请见 Redis 文档)作为缓存和 Session 的存储. 在使用的过程中觉得这个默认的设置挺 ...