脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → C#教程 → WPF演示图板

WPF实现动画效果（七）之演示图板

 更新时间：2022年06月23日 11:19:14   作者：天方  
这篇文章介绍了WPF实现动画效果之演示图板，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

WPF动画效果系列

WPF实现动画效果（一）之基本概念

WPF实现动画效果（二）之From/To/By 动画

WPF实现动画效果（三）之时间线（TimeLine）

WPF实现动画效果（四）之缓动函数

WPF实现动画效果（五）之关键帧动画

WPF实现动画效果（六）之路径动画

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();

控制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实现动画效果之演示图板的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • C# Stream 和 byte[] 之间的转换

    C# Stream 和 byte[] 之间的转换

    Stream 和 byte[] 之间的转换
    2008-03-03
  • C#实现的文件批量重命名功能示例

    C#实现的文件批量重命名功能示例

    这篇文章主要介绍了C#实现的文件批量重命名功能,结合具体实例形式分析了C#针对文件的遍历、属性修改相关操作技巧,需要的朋友可以参考下
    2017-07-07
  • C#类继承自泛型集合的例子

    C#类继承自泛型集合的例子

    在C#中,除了泛型字典外,你还可以继承其他集合类型,本文通过实例代码主要介绍了C#类继承自泛型集合,需要的朋友可以参考下
    2024-08-08
  • C#实现围棋游戏

    C#实现围棋游戏

    这篇文章主要为大家详细介绍了C#实现围棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • C#多线程编程中的锁系统（三）

    C#多线程编程中的锁系统（三）

    这篇文章主要介绍了C#多线程编程中的锁系统（三）,本本文主要说下基于内核模式构造的线程同步方式、事件、信号量以及WaitHandle、AutoResetEvent、ManualResetEvent等内容,需要的朋友可以参考下
    2015-04-04
  • C#中的Task.WhenAll和Task.WhenAny方法介绍

    C#中的Task.WhenAll和Task.WhenAny方法介绍

    这篇文章介绍了C#中的Task.WhenAll和Task.WhenAny方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-04-04
  • C# Winform 让整个窗口都可以拖动

    C# Winform 让整个窗口都可以拖动

    Windows 的 API 果然强大啊.以前要实现全窗口拖动, 要写鼠标按下和抬起事件, 很是麻烦, 偶尔还会出现 BUG
    2011-05-05
  • 浅析C#中不同格式请求的区别

    浅析C#中不同格式请求的区别

    form-data 请求和 x-www-form-urlencoded 请求是两种常见的 HTTP 请求体格式,这篇文章主要为大家详细介绍了二者的区别与应用,希望对大家有所帮助
    2023-08-08
  • Unity3D使用鼠标旋转缩放平移视角

    Unity3D使用鼠标旋转缩放平移视角

    这篇文章主要为大家详细介绍了Unity3D使用鼠标旋转缩放平移视角，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • C#实现循环发送电脑屏幕截图

    C#实现循环发送电脑屏幕截图

    这篇文章主要为大家详细介绍了C#实现循环发送电脑屏幕截图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07

最新评论