一篇文章搞懂WPF动画的使用技巧

WPF 动画系统提供了丰富的功能,用于为 UI 元素创建流畅的动态效果。动画可以应用于任何可用于渲染的属性,比如位置、颜色、大小等。在 WPF 中,动画是通过更改随时间变化的属性来实现的。

WPF动画基本用法

例如实现如下的动画效果:

在这里插入图片描述

xaml代码

<Window x:Class="Animation01.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:Animation01"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Grid><!--这段代码创建了一个蓝色的正方形 (Rectangle),并在正方形加载时启动一个动画。动画会在5秒内将正方形的宽度从100改变到300。--><Rectangle Name="MyRectangle" Width="100" Height="100" Fill="Gray"><Rectangle.Triggers><EventTrigger RoutedEvent="Rectangle.Loaded"><BeginStoryboard><Storyboard><DoubleAnimationStoryboard.TargetName="MyRectangle"Storyboard.TargetProperty="Width"From="100" To="300" Duration="0:0:5" /></Storyboard></BeginStoryboard></EventTrigger></Rectangle.Triggers></Rectangle><Canvas><!--创建了一个按钮,当你点击按钮时,它的背景颜色将在2秒内从白色变为红色。--><Button Width="100" Height="100" Content="Click Me!" Canvas.Left="20" Canvas.Top="20"><Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard><Storyboard><ColorAnimation Storyboard.TargetProperty="Background.Color"From="White" To="Red" Duration="0:0:2" /></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers></Button><Button Width="100" Height="100" Content="Click Me!" Canvas.Left="240" Canvas.Top="20"><Button.Triggers><EventTrigger RoutedEvent="Button.Loaded"><BeginStoryboard><Storyboard><DoubleAnimationUsingKeyFramesStoryboard.TargetProperty="Width"><LinearDoubleKeyFrame Value="300" KeyTime="0:0:2" /><LinearDoubleKeyFrame Value="100" KeyTime="0:0:4" /></DoubleAnimationUsingKeyFrames></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers></Button></Canvas></Grid>
</Window>

动画的关键概念

  • Storyboard: Storyboard 是管理一组动画的容器。你可以使用它来启动、停止、暂停或寻找动画序列。动画可以同时开始,或者通过 BeginTime 属性来设置它们的启动时间,以便它们按顺序或在不同的时间开始。
  • Animation Types: WPF 提供了多种内置的动画类型,包括 DoubleAnimationColorAnimationPointAnimation 等,分别用来动画化 doubleColorPoint 类型的属性。
  • Easing Functions: 缓动函数可以改变动画的速度,使其在开始、结束或整个持续时间内加速或减速。WPF 提供了多种缓动函数,如 BounceEaseElasticEaseCircleEase 等。
  • Keyframe Animations: 关键帧动画允许你在动画的持续时间内定义一系列的目标值和关键时间点。例如,DoubleAnimationUsingKeyFrames 允许你创建一个动画,其中 double 类型的属性可以在动画的持续时间内经过多个值。

创建和应用动画:

动画是通过在 XAML 中声明或在代码后台编写来创建的。以下是通过 XAML 创建和应用动画的基本示例。

<!-- XAML 中的 Storyboard 示例 -->
<Window.Resources><Storyboard x:Key="MyStoryboard"><DoubleAnimationStoryboard.TargetName="MyButton"Storyboard.TargetProperty="Width"From="75"To="200"Duration="0:0:2"AutoReverse="True"RepeatBehavior="Forever" /></Storyboard>
</Window.Resources><!-- 应用到按钮上 -->
<Button x:Name="MyButton"Content="Click Me"Width="75"HorizontalAlignment="Left"><Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard Storyboard="{StaticResource MyStoryboard}" /></EventTrigger></Button.Triggers>
</Button>

在这个例子中,我们定义了一个 Storyboard 资源,其中包含一个 DoubleAnimation,它会改变按钮的宽度。当按钮被点击时,通过 EventTrigger 触发动画开始。

在代码后台使用动画:

// 创建一个 DoubleAnimation 以改变按钮的宽度
DoubleAnimation widthAnimation = new DoubleAnimation();
widthAnimation.From = 75;
widthAnimation.To = 200;
widthAnimation.Duration = TimeSpan.FromSeconds(2);
widthAnimation.AutoReverse = true;
widthAnimation.RepeatBehavior = RepeatBehavior.Forever;// 应用动画到按钮的 Width 属性
MyButton.BeginAnimation(Button.WidthProperty, widthAnimation);

在后台代码中,我们创建了一个 DoubleAnimation 实例并设置了相关属性,然后使用 BeginAnimation 方法将其应用到按钮的 WidthProperty

WPF 动画系统的灵活性和强大功能使得创建各种视觉效果变得简单和直观。通过结合使用 Storyboard、动画类型和缓动函数,你可以为你的应用程序创建出色的用户体验。

EventTrigger 参数及其用法

在 WPF 中,EventTrigger 用于在发生特定事件时开始一系列动作,例如动画。EventTrigger 最常见的用途是在没有编写代码的情况下,在 XAML 中响应事件。与动画结合使用时,它可以在发生某个事件时自动启动 Storyboard

EventTrigger 的关键参数:

  1. RoutedEvent: 这是一个必需的属性,它指定了将触发 EventTrigger 的事件。事件必须是一个路由事件;例如,Button.ClickFrameworkElement.Loaded

  2. Actions: EventTrigger 包含一个 Actions 集合,该集合包含了在触发事件时将执行的所有 TriggerAction 对象。其中最常见的 TriggerActionBeginStoryboard,它用来启动一个 Storyboard

一个简单的 EventTrigger 示例:

下面是一个 EventTrigger 的基本使用示例,它在按钮点击时触发一个 Storyboard

<Button Content="Click Me"><Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Width" To="200" Duration="0:0:1"/></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers>
</Button>

在这个例子中,当按钮被点击时,EventTrigger 将触发 Storyboard,然后 Storyboard 中的 DoubleAnimation 会将按钮的宽度动画化到200像素。

使用技巧:

  1. 动画属性的选择: 当使用 EventTrigger 时,你需要确保你想要动画化的属性是依赖属性(Dependency Property),因为只有这些属性才能进行动画处理。

  2. 动画的目标: 通过设置 Storyboard.TargetNameStoryboard.TargetProperty,你可以精确地指定应该被动画化的对象和属性。

  3. 复杂动画序列: 如果你需要在一个事件触发时执行多个动画,你可以在 Storyboard 中包含多个动画,并且可以通过设置 BeginTime 来控制它们的启动时间。

  4. 避免代码后台: 尽可能在 XAML 中使用 EventTrigger,这可以使你的界面逻辑与后台代码解耦,更易于管理和维护。

  5. 动画的结束处理: 如果需要在动画结束时处理一些逻辑,可以在 Storyboard 里添加一个 Completed 事件处理器,这需要在代码后台进行。

  6. 条件触发: 如果你需要基于某些条件来触发动画,可以考虑使用 DataTriggerMultiDataTrigger,它们可以根据数据绑定的值来触发动画。

  7. 资源复用: 如果有多个元素或多处需要用到同样的 Storyboard,可以将 Storyboard 定义在资源字典(Resources)中,然后通过资源引用的方式重用。

通过这些技巧,你可以充分利用 WPF 动画和 EventTrigger,为你的应用程序创建丰富和响应式的用户界面。

BeginStoryboard

在 WPF 动画中,BeginStoryboard 是一个 TriggerAction,通常用在 EventTrigger 中或作为一个触发器动作。它的主要作用是开始一个 Storyboard,也就是执行一组动画。Storyboard 是一种特殊的时间线,用于组合和管理动画序列。

BeginStoryboard 包装了一个 Storyboard,并提供了控制这个 Storyboard 的运行的方法。你可以使用 BeginStoryboard 来启动、暂停、恢复和停止动画。此外,你还可以控制动画的行为,比如是否重复动画,以及动画完成后是否保持其最终状态。

BeginStoryboard 的主要属性:

  • Name: 你可以为 BeginStoryboard 指定一个 Name,这样你就可以在代码中或者通过其它触发器来引用并控制 Storyboard 的行为。

  • Storyboard: 这个属性引用了要开始的 Storyboard 对象。

一个简单的 BeginStoryboard 示例:

<Button Content="Click Me"><Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Width" To="200" Duration="0:0:1" /></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers>
</Button>

在这个例子中,当按钮被点击时,EventTrigger 触发了 BeginStoryboard,它又开始了内部的 StoryboardStoryboard 包含了一个 DoubleAnimation,它会在一秒钟内把按钮的宽度动画化到 200 像素。

使用 BeginStoryboard 的技巧:

  • 控制动画: 如果你在 BeginStoryboard 上指定了一个 Name,那么你可以使用 PauseStoryboardResumeStoryboardStopStoryboard 这些 ControlStoryboardAction 来暂停、恢复或停止动画。

  • 动画状态: 通过设置 StoryboardFillBehavior 属性,你可以控制动画完成后的状态。如果设置为 HoldEnd,动画完成后将保持结束值;设置为 Stop,动画完成后将回到开始值。

  • 动画之间的关系: 你可以在一个事件中启动多个 Storyboard。如果它们修改同一个属性,后启动的 Storyboard 将会覆盖先前的设置。

BeginStoryboard 是实现在 WPF 中无代码事件驱动动画的关键组件,使得动画可以通过简单的 XAML 声明来响应用户交互。

动画类型

1、DoubleAnimation

在 WPF (Windows Presentation Foundation) 中,DoubleAnimation 是一种动画类型,它用于创建从一个双精度浮点数值(double 类型)到另一个值的过渡。这种动画可以应用于任何使用 double 值的属性,比如控件的宽度、高度、透明度(不透明度)等。

DoubleAnimation 的关键属性:

  • From: 动画开始的值。如果未设置,将使用属性的当前值作为开始值。
  • To: 动画结束的值。
  • By: 动画的变化量。如果设置了 From,则动画的结束值将是 From + By 的值。如果没有设置 From,则动画的结束值是属性当前值 + By
  • Duration: 动画的持续时间。这是一个 Duration 对象,指定动画从开始到结束所需的时间。
  • AutoReverse: 如果设置为 true,则动画结束后会自动反向播放回开始位置。
  • RepeatBehavior: 控制动画的重复行为。可以设置它来重复特定次数或无限循环。
  • AccelerationRatioDecelerationRatio: 用于控制动画的加速和减速过程。

一个简单的 DoubleAnimation 示例:

<Window x:Class="AnimationExample.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="MainWindow" Height="350" Width="525"><Canvas><Rectangle Width="100" Height="100" Fill="Blue" Canvas.Left="10" Canvas.Top="10"><Rectangle.Triggers><EventTrigger RoutedEvent="Rectangle.MouseEnter"><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="Width"To="200" Duration="0:0:3" /><DoubleAnimation Storyboard.TargetProperty="Height"To="200" Duration="0:0:3" /></Storyboard></BeginStoryboard></EventTrigger></Rectangle.Triggers></Rectangle></Canvas>
</Window>

在上面的示例中,当鼠标光标进入矩形时,两个 DoubleAnimation 对象会分别将矩形的宽度和高度从当前值动画化到 200 像素。这两个动画都设置了一个持续时间,指定动画应该在 3 秒内完成。

使用 DoubleAnimation 的技巧:

  • 动画化转换: 使用 RenderTransformDoubleAnimation 结合可以创建平移、旋转、缩放和倾斜动画。
  • 透明度动画: 利用 DoubleAnimation 可以淡入或淡出控件,通过动画化控件的 Opacity 属性。
  • 路径动画: DoubleAnimation 可以用于沿路径动画,通过动画化 PathGeometry 中的 PathFigurePathSegment 的属性。
  • 动画绑定: 可以将 DoubleAnimationToFrom 属性绑定到数据或设置为动态值。

DoubleAnimation 是实现平滑的属性变化动画的强大工具,能够在 WPF 应用程序中提供丰富的用户体验。

2、ColorAnimation

ColorAnimation 用于动画化颜色属性。比如,你可以动画化一个 SolidColorBrushColor 属性,从而在 UI 元素上实现颜色的渐变效果。

示例代码:

<Rectangle Width="100" Height="100"><Rectangle.Fill><SolidColorBrush x:Name="MySolidColorBrush" Color="Red" /></Rectangle.Fill><Rectangle.Triggers><EventTrigger RoutedEvent="Rectangle.MouseEnter"><BeginStoryboard><Storyboard><ColorAnimation Storyboard.TargetName="MySolidColorBrush" Storyboard.TargetProperty="Color" To="Green" Duration="0:0:3" /></Storyboard></BeginStoryboard></EventTrigger></Rectangle.Triggers>
</Rectangle>

3、PointAnimation

PointAnimation 用于动画化 Point 类型的属性。这在动画化路径或画布上的位置时非常有用。

示例代码:

<Canvas><Ellipse Width="10" Height="10" Fill="Black"><Ellipse.RenderTransform><TranslateTransform x:Name="AnimatedTranslateTransform" X="0" Y="0"/></Ellipse.RenderTransform><Ellipse.Triggers><EventTrigger RoutedEvent="Ellipse.Loaded"><BeginStoryboard><Storyboard><PointAnimation Storyboard.TargetName="AnimatedTranslateTransform" Storyboard.TargetProperty="X" Duration="0:0:5" From="0" To="200" /></Storyboard></BeginStoryboard></EventTrigger></Ellipse.Triggers></Ellipse>
</Canvas>

4、DoubleAnimationUsingKeyFrames

DoubleAnimationUsingKeyFrames 允许你在动画的不同阶段定义值,从而创建复杂的动画序列。

示例代码:

<Rectangle Width="100" Height="100" Fill="Blue"><Rectangle.Triggers><EventTrigger RoutedEvent="Rectangle.MouseEnter"><BeginStoryboard><Storyboard><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width"><LinearDoubleKeyFrame Value="200" KeyTime="0:0:2" /><DiscreteDoubleKeyFrame Value="100" KeyTime="0:0:4" /><SplineDoubleKeyFrame Value="300" KeyTime="0:0:6" /></DoubleAnimationUsingKeyFrames></Storyboard></BeginStoryboard></EventTrigger></Rectangle.Triggers>
</Rectangle>

5、ThicknessAnimation

ThicknessAnimation 用于动画化属性类型为 Thickness 的属性,通常用于控制边距和内边距。

示例代码:

<Button Content="Click Me" Width="100" Height="50"><Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard><Storyboard><ThicknessAnimation Storyboard.TargetProperty="Margin" From="0" To="50" Duration="0:0:2" /></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers>
</Button>

6、ObjectAnimationUsingKeyFrames

ObjectAnimationUsingKeyFrames 用于在指定的时间点更改对象的属性。

示例代码:

<TextBlock Text="Hello, World!" HorizontalAlignment="Center" VerticalAlignment="Center"><TextBlock.Triggers><EventTrigger RoutedEvent="TextBlock.MouseEnter"><BeginStoryboard><Storyboard><ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontSize"><DiscreteObjectKeyFrame Value="12" KeyTime="0:0:0" /><DiscreteObjectKeyFrame Value="24" KeyTime="0:0:1" /><DiscreteObjectKeyFrame Value="36" KeyTime="0:0:2" /></ObjectAnimationUsingKeyFrames></Storyboard></BeginStoryboard></EventTrigger></TextBlock.Triggers>
</TextBlock>

这些动画类型涵盖了大部分的 WPF 动画需求,允许创建丰富和复杂的动态效果。通过组合这些动画或将它们应用于不同的属性,你可以在 WPF 应用程序中实现高度定制化的用户界面动画。

动画关键帧

在WPF(Windows Presentation Foundation)中,动画关键帧(KeyFrames)允许你定义动画在其持续时间内应如何发展。使用关键帧,可以创建复杂的动画时间线,其中可以指定动画在特定时间点应该达到的值。这为动画提供了高度的控制,允许创建平滑的过渡、突然变化或根据不同的缓动函数调整动画速度。

关键帧类型

WPF 提供了几种类型的关键帧,以支持不同的动画方式:

1. LinearKeyFrame

线性关键帧(如 LinearDoubleKeyFrame)在两个关键帧之间提供了平滑的线性插值。这意味着属性值以恒定速度从一个关键帧改变到下一个关键帧。

2. DiscreteKeyFrame

离散关键帧(如 DiscreteDoubleKeyFrame)在关键帧之间没有插值,而是在指定时间直接从一个值跳到另一个值。这在想要在动画中创建突然变化效果时非常有用。

3. SplineKeyFrame

样条关键帧(如 SplineDoubleKeyFrame)允许通过指定一个缓动函数来精确控制动画的速度和加速度。这可以创建非线性的动画效果,例如,开始时加速然后减速。

4. EasingKeyFrame

缓动关键帧(如 EasingDoubleKeyFrame)提供了一个 EasingFunction,可以用来创建自然的动态效果,如弹簧、弹跳或缓慢结束。

使用关键帧的示例

下面的示例使用 DoubleAnimationUsingKeyFrames 来动画化一个 Rectangle 的宽度,演示了不同类型的关键帧:

<Rectangle Width="100" Height="100" Fill="Blue"><Rectangle.Triggers><EventTrigger RoutedEvent="Rectangle.MouseEnter"><BeginStoryboard><Storyboard><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width"><!-- 在 2 秒结束时宽度线性增加到 200 --><LinearDoubleKeyFrame Value="200" KeyTime="0:0:2" /><!-- 在 4 秒时突变为宽度 100 --><DiscreteDoubleKeyFrame Value="100" KeyTime="0:0:4" /><!-- 使用样条曲线将宽度在 6 秒结束时调整到 300 --><SplineDoubleKeyFrame Value="300" KeyTime="0:0:6" KeySpline="0.5,0.1,0.5,1" /></DoubleAnimationUsingKeyFrames></Storyboard></BeginStoryboard></EventTrigger></Rectangle.Triggers>
</Rectangle>

在这个例子中,Rectangle 的宽度将在两秒内线性增加到 200,然后在第四秒突然跳到 100,接着在接下来的两秒内根据样条曲线变化到 300。这种混合使用不同类型的关键帧可以产生丰富的动画效果。

关键帧动画提供了强大的工具来精确控制动画的行为,它们可以应用于 WPF 中几乎所有的可动画属性,从而创建吸引人的交互式用户界面。

特殊的关键帧

WPF 动画系统提供了几种特殊的关键帧,使您能够创建非线性和复杂的动画效果。这里有一些特殊的关键帧类型及其用法:

1. Easing KeyFrames

EasingKeyFrame 类型的关键帧使用 EasingFunction 来创建更为复杂和自然的运动效果。EasingFunction 可以模拟物理现象,比如加速度和减速度,或者更复杂的行为,如弹跳和弹簧效果。这些关键帧可以用于任何类型的动画,如 DoubleAnimationUsingKeyFrames, ColorAnimationUsingKeyFrames, 等等。

示例代码:

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width"><EasingDoubleKeyFrame KeyTime="0:0:1" Value="200"><EasingDoubleKeyFrame.EasingFunction><BounceEase Bounces="2" Bounciness="3" /></EasingDoubleKeyFrame.EasingFunction></EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>

2. Int16, Int32, Int64 KeyFrames

除了常用的 Double, Color, 和 Point 动画关键帧,WPF 也支持 Int16, Int32, 和 Int64 类型的关键帧。这些关键帧允许你为整数类型的属性制定动画。

示例代码:

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"><DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static SystemFonts.IconFontSizeKey}" />
</ObjectAnimationUsingKeyFrames>

3. ObjectAnimationUsingKeyFrames

ObjectAnimationUsingKeyFrames 可以对任何类型的属性进行动画化,包括不支持插值的属性,如字符串或枚举值。使用 DiscreteObjectKeyFrame,你可以在动画过程中更改目标属性的值。

示例代码:

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"><DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{StaticResource MyBrush}" />
</ObjectAnimationUsingKeyFrames>

4. PriorityBinding

虽然 PriorityBinding 不是关键帧,但它是一个特殊的绑定机制,它允许你为同一个属性指定多个绑定源,并根据可用性来确定哪个源将提供值。这不是动画的直接部分,但可以在动画场景中使用,以根据动态数据提供值。

5. Path Animation

使用 PathGeometry 的关键帧,如 MatrixAnimationUsingPath,可以让元素沿着复杂路径进行动画化。这不是一个单独的关键帧类型,而是一种利用路径数据作为动画轨迹的方法。

示例代码:

<Rectangle Width="10" Height="10" Fill="Red"><Rectangle.Triggers><EventTrigger RoutedEvent="Rectangle.Loaded"><BeginStoryboard><Storyboard><MatrixAnimationUsingPathStoryboard.TargetProperty="(UIElement.RenderTransform).(MatrixTransform.Matrix)"Duration="0:0:5"RepeatBehavior="Forever"><MatrixAnimationUsingPath.PathGeometry><PathGeometry Figures="M 10,100 C 35,0 100,200 200,100" /></MatrixAnimationUsingPath.PathGeometry></MatrixAnimationUsingPath></Storyboard></BeginStoryboard></EventTrigger></Rectangle.Triggers><Rectangle.RenderTransform><MatrixTransform /></Rectangle.RenderTransform>
</Rectangle>

使用这些特殊的关键帧和动画技术,可以在 WPF 应用程序中实现高度定制和视觉吸引力的用户体验。

WPF动画控制技巧

在WPF中创建流畅和响应良好的动画,需要掌握一些关键的动画控制技巧。以下是一些有用的动画控制策略:

1. 使用 Storyboard 控制动画

Storyboard 是 WPF 中控制动画序列的主要方式。你可以通过编程方式或在 XAML 中启动、停止、暂停和恢复 Storyboard

编程方式控制Storyboard:

// 启动Storyboard
myStoryboard.Begin(this);// 暂停Storyboard
myStoryboard.Pause(this);// 继续播放Storyboard
myStoryboard.Resume(this);// 停止Storyboard
myStoryboard.Stop(this);

在 XAML 中使用Triggers来控制动画:

<BeginStoryboard x:Name="myStoryboard" Storyboard="{StaticResource MyStoryboard}"/>

在某个事件发生时,比如按钮点击:

<Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard Storyboard="{StaticResource MyStoryboard}"/></EventTrigger>
</Button.Triggers>

2. 使用动画的 Completed 事件

动画提供了一个 Completed 事件,允许你在动画结束时执行代码。这可以用来链接动画,或在动画完成后更改UI元素的状态。

myAnimation.Completed += new EventHandler(myAnimation_Completed);void myAnimation_Completed(object sender, EventArgs e)
{// 动画完成后执行的代码
}

3. 利用 AutoReverse 和 RepeatBehavior

通过设置 AutoReverse 属性为 true,动画在到达尾部后会反向播放。RepeatBehavior 可以设置动画的重复次数或无限循环。

<DoubleAnimationAutoReverse="True"RepeatBehavior="Forever"... />

4. 使用 FillBehavior 控制动画后的状态

FillBehavior 属性决定了动画完成后的行为。默认值是 HoldEnd,动画会在结束状态保持。如果设置为 Stop,动画完成后元素将回到动画开始前的状态。

<DoubleAnimationFillBehavior="Stop"... />

5. 使用依赖属性系统

WPF的依赖属性系统允许动画影响属性值,而无需持续的动画。你可以设置一个属性,然后让动画基于新值运行。

6. 动画组合

通过组合多个动画,可以创建复杂的效果。例如,可以同时使用 DoubleAnimationColorAnimation 在同一个 Storyboard 中改变一个元素的大小和颜色。

7. 使用 VisualStateManager

VisualStateManager 可以帮助你定义和控制元素在不同视觉状态下的动画。这是管理复杂UI交互的有力工具。

<VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="CommonStates"><VisualState x:Name="Normal"/><VisualState x:Name="MouseOver"><Storyboard><!-- 定义鼠标悬停时的动画 --></Storyboard></VisualState></VisualStateGroup>
</VisualStateManager.VisualStateGroups>

8. 动态创建动画

有时,你可能需要根据运行时数据动态创建动画。你可以在代码中创建 Animation 对象,并将其添加到 Storyboard 中。

DoubleAnimation dynamicAnimation = new DoubleAnimation();
dynamicAnimation.From = 0;
dynamicAnimation.To = 100;
dynamicAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
Storyboard.SetTarget(dynamicAnimation, myControl);
Storyboard.SetTargetProperty(dynamicAnimation, new PropertyPath(Control.WidthProperty));Storyboard dynamicStoryboard = new Storyboard();
dynamicStoryboard.Children.Add(dynamicAnimation);dynamicStoryboard.Begin();

9. 利用缓动函数

缓动函数(Easing Functions)可以创建更自然的动画效果,如加速、减速、弹跳等。你可以在 XAML 或代码中指定缓动函数来增强动画的视觉效果。

<DoubleAnimation.EasingFunction><BounceEase Bounces="2" Bounciness="3" />
</DoubleAnimation.EasingFunction>

利用这些技巧,你可以创建出既复杂又流畅的用户界面动画,提高应用程序的用户体验。

路径动画

WPF 路径动画允许你根据一个几何路径移动对象。这意味着动画的目标元素可以沿着定义的 Path 移动。这种类型的动画特别有用于创建复杂的移动序列,例如星球在轨道上的运动或者一个对象在屏幕上的非线性移动。

路径动画主要通过 PathGeometry 来定义运动路径,然后使用 DoubleAnimationUsingPathPointAnimationUsingPath 来沿路径移动对象。

以下是一个使用 StoryboardDoubleAnimationUsingPath 创建的 WPF 路径动画示例:

<Window x:Class="PathAnimationExample.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="MainWindow" Height="350" Width="525"><Window.Resources><PathGeometry x:Key="EllipsePath" Figures="M 10,100 A 90,90 0 1 1 190,100 A 90,90 0 1 1 10,100" /></Window.Resources><Canvas><Path Stroke="Black" StrokeThickness="1"><Path.Data><!-- 使用之前定义的路径几何 --><StaticResource ResourceKey="EllipsePath" /></Path.Data></Path><!-- 这是将要沿着路径动画移动的元素 --><Ellipse Width="20" Height="20" Fill="Blue" Canvas.Left="0" Canvas.Top="0"><Ellipse.Triggers><EventTrigger RoutedEvent="FrameworkElement.Loaded"><BeginStoryboard><Storyboard RepeatBehavior="Forever"><!-- 动画沿着路径移动 --><DoubleAnimationUsingPathStoryboard.TargetProperty="(Canvas.Left)"PathGeometry="{StaticResource EllipsePath}"Source="X" Duration="0:0:5" RepeatBehavior="Forever" /><DoubleAnimationUsingPathStoryboard.TargetProperty="(Canvas.Top)"PathGeometry="{StaticResource EllipsePath}"Source="Y" Duration="0:0:5" RepeatBehavior="Forever" /></Storyboard></BeginStoryboard></EventTrigger></Ellipse.Triggers></Ellipse></Canvas>
</Window>

在上面的示例中,我们首先在 Window.Resources 中定义了一个 PathGeometry,这个路径是一个椭圆。然后,我们在 Canvas 中定义了一个 Path 来可视化这个路径,并且定义了一个 Ellipse 作为动画的目标元素。

Ellipse 元素中,我们通过 EventTrigger 在元素加载时启动 StoryboardStoryboard 包含两个 DoubleAnimationUsingPath 实例:一个用于沿 X 轴移动(影响 Canvas.Left 属性),另一个用于沿 Y 轴移动(影响 Canvas.Top 属性)。这两个动画共享同一 PathGeometry,但一个读取 X 坐标,另一个读取 Y 坐标。Duration 属性设置为 5 秒,RepeatBehavior 设置为 Forever,这意味着动画会无限循环。

记住,这个例子需要放在 WPF 项目的主窗口 XAML 文件中,你可能需要进行一些调整以适应你的具体项目结构。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/160367.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

合并区间问题

以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&#xff1a; 输入&#xff1a;intervals [[1,…

Java如何获取泛型类型

泛型&#xff08;Generic&#xff09; 泛型允许程序员在强类型程序设计语言中编写代码时使用一些以后才指定的类型&#xff0c;在实例化时作为参数指明这些类型。各种程序设计语言和其编译器、运行环境对泛型的支持均不一样。Ada、Delphi、Eiffel、Java、C#、F#、Swift 和 Vis…

WPF树形控件TreeView使用介绍

WPF 中的 TreeView 控件用于显示层次结构数据。它是由可展开和可折叠的 TreeViewItem 节点组成的&#xff0c;这些节点可以无限嵌套以表示数据的层次。 TreeView 基本用法 例如实现下图的效果&#xff1a; xaml代码如下&#xff1a; <Window x:Class"TreeView01.Mai…

springcloud整合seata我踩过的坑

版本问题 seata 1.5和1.5之前的目录结构不同,使用docker修改的配置文件也不同 1.4的左右 1.5之后docker 挂载文件也不同 1.5之前是使用自己写的挂载registry docker run -d -p 8091:8091 -p 7091:7091 --network newlead --name seata-serve -e SEATA_IP192.168.249.132…

人工智能基础_机器学习047_用逻辑回归实现二分类以上的多分类_手写代码实现逻辑回归OVR概率计算---人工智能工作笔记0087

然后我们再来看一下如何我们自己使用代码实现逻辑回归的,对二分类以上,比如三分类的概率计算 我们还是使用莺尾花数据 首先我们把公式写出来 def sigmoid(z): 定义出来这个函数 可以看看到这需要我们理解OVR是如何进行多分类的,我们先来看这个 OVR分类器 思想 OVR(One-vs-…

UE 进阶篇一:动画系统

导语: 下面的动画部分功能比较全,可以参考这种实现方式,根据自己项目的颗粒度选择部分功能参考,我们商业项目动画部分也是这么实现的。 最后实现的效果如下: 最终效果 目录: ------------------------------------------- 文末有视频教程/工程地址链接 -------------…

9、鸿蒙应用桌面图标外观和国际化

一、项目资源目录 项目下的resoueces目录为资源配置目录&#xff0c;其中base为基础配置&#xff0c;即在任何语言环境下都会加载的资源&#xff0c; color.json&#xff1a;用于配置颜色&#xff0c;如页面的背景和文字的颜色。 string.json&#xff1a;用于设置文字&#…

Selenium切换窗口、框架和弹出框window、ifame、alert

一、切换窗口 #获取打开的多个窗口句柄 windows driver.window_handles #切换到当前最新打开的窗口 driver.switch_to.window(windows[-1]) #最大化浏览器 driver.maximize_window() #刷新当前页面 driver.refresh() 二、切换框架frame 如存在以下网页&#xff1a; <htm…

Java基础(程序控制结构篇)

Java的程序控制结构与C语言一致&#xff0c;分为顺序结构、选择结构&#xff08;分支结构&#xff09;和循环结构三种。 一、顺序结构 如果程序不包含选择结构或是循环结构&#xff0c;那么程序中的语句就是顺序的逐条执行&#xff0c;这就是顺序结构。 import java.util.Sc…

杭电oj 2064 汉诺塔III C语言

#include <stdio.h>void main() {int n, i;long long sum[35] { 2,8,26 };for (i 3; i < 35; i)sum[i] 3 * sum[i - 1] 2;while (~scanf_s("%d", &n))printf("%lld\n", sum[n - 1]); }

问鼎web服务

华子目录 www简介常见Web服务程序介绍&#xff1a;服务器主机主要数据浏览器网址及http介绍urlhttp请求方法 http协议请求的工作流程www服务器类型静态网站动态网站 快速安装Apache安装准备工作httpd所需目录主配置文件 实验操作 www简介 Web网络服务也叫www&#xff08;world…

编码的发展历史

编码的发展历史 ASCII&#xff1a; ASCII编码使用7位二进制数表示一个字符&#xff0c;范围从0到127。每个字符都有一个唯一的ASCII码值与之对应。例如&#xff0c;大写字母"A"的ASCII码是65&#xff0c;小写字母"a"的ASCII码是97。 ASCII字符集包括英文…

linux服务器安装gitlab

一、安装gitlab sudo yum install curl policycoreutils-python openssh-server openssh-clients sudo systemctl enable sshd sudo systemctl start sshd sudo firewall-cmd --permanent --add-servicehttp curl https://packages.gitlab.com/install/repositories/gitla…

LabVIEW中将SMU信号连接到PXI背板触发线

LabVIEW中将SMU信号连接到PXI背板触发线 本文介绍如何将信号从PXI&#xff08;e&#xff09;SMU卡路由到PXI&#xff08;e&#xff09;机箱上的背板触发线。该过程涉及使用NI-DCPowerVI将SMU信号导出到PXI_TRIG线上。 在继续操作之前&#xff0c;请确保在开发PC上安装了兼容版…

d3dx9_43.dll缺失怎么办?教你一分钟修复d3dx9_43.dll丢失问题

今天&#xff0c;与大家分享关于“d3dx9_43.dll丢失的5个解决方法”的主题。在我们的日常生活和工作中&#xff0c;我们可能会遇到各种各样的问题&#xff0c;而d3dx9_43.dll丢失就是其中之一。那么&#xff0c;什么是d3dx9_43.dll呢&#xff1f;它为什么会丢失&#xff1f;又该…

【LeetCode刷题-链表】--25.K个一组翻转链表

25.K个一组翻转链表 思路&#xff1a; 把链表节点按照k个一组分组&#xff0c;可以使用一个指针head依次指向每组的头节点&#xff0c;这个指针每次向前移动k步&#xff0c;直至链表结尾&#xff0c;对于每个分组&#xff0c; 先判断它的长度是否大于等于k&#xff0c;若是&am…

什么是Zero-shot(零次学习)

1 Zero-shot介绍 Zero-shot学习&#xff08;ZSL&#xff09;是机器学习领域的一种先进方法&#xff0c;它旨在使模型能够识别、分类或理解在训练过程中未见过的类别或概念。这种学习方法对于解决现实世界中常见的长尾分布问题至关重要&#xff0c;即对于一些罕见或未知类别的样…

商务俄语学习,柯桥基础入门教学,千万别小看俄语中的“что”

1、что до (чего) 至于 例&#xff1a; что до меня, то я не могу согласиться 至于我&#xff0c;我不能同意。 А что до зимовки... Ты приедешь в этом году? 说到冬天和过冬…你今年回来吗…

在windows笔记本中安装tensorflow1.13.2版本的gpu环境2

tensorflow1.13.2版本的gpu环境 看python-anacona的安装只需要看1.1部分即可 目录 1.1 Anaconda安装 1.2 tensorflow-gpu安装 1.3 python编译器-pycharm安装 1.1 Anaconda安装 从镜像源处下载anaconda&#xff0c;地址&#xff1a;Index of /anaconda/archive/ | 北京…

PTA-6-45 工厂设计模式-运输工具

题目如下&#xff1a; 工厂类用于根据客户提交的需求生产产品&#xff08;火车、汽车或拖拉机&#xff09;。火车类有两个子类属性&#xff1a;车次和节数。拖拉机类有1个子类方法耕地&#xff0c;方法只需简单输出“拖拉机在耕地”。为了简化程序设计&#xff0c;所有…