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是可以直接在触发器中(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实现动画效果之演示图板的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • c#如何实现程序加密隐藏

    c#如何实现程序加密隐藏

    LiteDB是一个轻量级的嵌入式数据库,它是用C#编写的,适用于.NET平台,这篇文章主要介绍了如何通过LiteDB将自己的程序进行加密,感兴趣的可以了解下
    2023-08-08
  • C# winform操作CSV格式文件

    C# winform操作CSV格式文件

    这篇文章主要为大家详细介绍了C#在winform中的表格操作CSV格式文件的相关实例,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下
    2025-03-03
  • C#异步编程详解

    C#异步编程详解

    本文主要介绍异步编程中Task、Async和Await的基础知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 泛型编程去掉字段重复数据的方法

    泛型编程去掉字段重复数据的方法

    这篇文章主要介绍了泛型去掉字段重复数据的方法,大家参考使用吧
    2014-01-01
  • DevExpress根据条件设置GridControl RepositoryItem是否可编辑

    DevExpress根据条件设置GridControl RepositoryItem是否可编辑

    这篇文章主要介绍了DevExpress根据条件设置GridControl RepositoryItem是否可编辑,需要的朋友可以参考下
    2014-08-08
  • C# Newtonsoft.Json用法详解

    C# Newtonsoft.Json用法详解

    本文主要介绍了C# Newtonsoft.Json用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • Unity3D动态对象优化代码分享

    Unity3D动态对象优化代码分享

    这篇文章主要介绍了Unity3D动态对象优化代码分享的相关资料,需要的朋友可以参考下
    2015-03-03
  • WPF实现类似ChatGPT逐字打印效果的示例代码

    WPF实现类似ChatGPT逐字打印效果的示例代码

    前一段时间ChatGPT类的应用十分火爆,这类应用在回答用户的问题时逐字打印输出,像极了真人打字回复消息,本文就来利用WPF模拟一下这种逐字打印的效果吧
    2023-08-08
  • C# Winform实现进度条显示

    C# Winform实现进度条显示

    这篇文章主要为大家详细介绍了C# Winform实现进度条显示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 将excel数据转换成dataset示例

    将excel数据转换成dataset示例

    这篇文章主要介绍了不借助第三方插件的情况下将Excel中的数据转换成DataSet的方法,需要的朋友可以参考下
    2014-02-02

最新评论