一篇文章搞懂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 提供了多種內置的動畫類型，包括 DoubleAnimation、ColorAnimation、PointAnimation 等，分別用來動畫化 double、Color 和 Point 類型的屬性。
  • Easing Functions: 緩動函數可以改變動畫的速度，使其在開始、結束或整個持續時間內加速或減速。WPF 提供了多種緩動函數，如 BounceEase、ElasticEase、CircleEase 等。
  • 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.Click 或 FrameworkElement.Loaded。

  2. Actions: EventTrigger 包含一個 Actions 集合，該集合包含了在觸發事件時將執行的所有 TriggerAction 對象。其中最常見的 TriggerAction 是 BeginStoryboard，它用來啟動一個 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.TargetName 和 Storyboard.TargetProperty，你可以精確地指定應該被動畫化的對象和屬性。

  3. 復雜動畫序列: 如果你需要在一個事件觸發時執行多個動畫，你可以在 Storyboard 中包含多個動畫，并且可以通過設置 BeginTime 來控制它們的啟動時間。

  4. 避免代碼后臺: 盡可能在 XAML 中使用 EventTrigger，這可以使你的界面邏輯與后臺代碼解耦，更易于管理和維護。

  5. 動畫的結束處理: 如果需要在動畫結束時處理一些邏輯，可以在 Storyboard 里添加一個 Completed 事件處理器，這需要在代碼后臺進行。

  6. 條件觸發: 如果你需要基于某些條件來觸發動畫，可以考慮使用 DataTrigger 或 MultiDataTrigger，它們可以根據數據綁定的值來觸發動畫。

  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，它又開始了內部的 Storyboard。Storyboard 包含了一個 DoubleAnimation，它會在一秒鐘內把按鈕的寬度動畫化到 200 像素。

使用 BeginStoryboard 的技巧：

  • 控制動畫: 如果你在 BeginStoryboard 上指定了一個 Name，那么你可以使用 PauseStoryboard、ResumeStoryboard 和 StopStoryboard 這些 ControlStoryboardAction 來暫停、恢復或停止動畫。

  • 動畫狀態: 通過設置 Storyboard 的 FillBehavior 屬性，你可以控制動畫完成后的狀態。如果設置為 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: 控制動畫的重復行為。可以設置它來重復特定次數或無限循環。
  • AccelerationRatio 和 DecelerationRatio: 用于控制動畫的加速和減速過程。

一個簡單的 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 的技巧：

  • 動畫化轉換: 使用 RenderTransform 和 DoubleAnimation 結合可以創建平移、旋轉、縮放和傾斜動畫。
  • 透明度動畫: 利用 DoubleAnimation 可以淡入或淡出控件，通過動畫化控件的 Opacity 屬性。
  • 路徑動畫: DoubleAnimation 可以用于沿路徑動畫，通過動畫化 PathGeometry 中的 PathFigure 或 PathSegment 的屬性。
  • 動畫綁定: 可以將 DoubleAnimation 的 To 或 From 屬性綁定到數據或設置為動態值。

DoubleAnimation 是實現平滑的屬性變化動畫的強大工具，能夠在 WPF 應用程序中提供豐富的用戶體驗。

2、ColorAnimation

ColorAnimation 用于動畫化顏色屬性。比如，你可以動畫化一個 SolidColorBrush 的 Color 屬性，從而在 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. 動畫組合

通過組合多個動畫，可以創建復雜的效果。例如，可以同時使用 DoubleAnimation 和 ColorAnimation 在同一個 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 來定義運動路徑，然后使用 DoubleAnimationUsingPath 或 PointAnimationUsingPath 來沿路徑移動對象。

以下是一個使用 Storyboard 和 DoubleAnimationUsingPath 創建的 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 在元素加載時啟動 Storyboard。Storyboard 包含兩個 DoubleAnimationUsingPath 實例：一個用于沿 X 軸移動（影響 Canvas.Left 屬性），另一個用于沿 Y 軸移動（影響 Canvas.Top 屬性）。這兩個動畫共享同一 PathGeometry，但一個讀取 X 坐標，另一個讀取 Y 坐標。Duration 屬性設置為 5 秒，RepeatBehavior 設置為 Forever，這意味著動畫會無限循環。

記住，這個例子需要放在 WPF 項目的主窗口 XAML 文件中，你可能需要進行一些調整以適應你的具體項目結構。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/160367.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/160367.shtml
英文地址，請注明出處：http://en.pswp.cn/news/160367.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

合并區間問題

合并區間問題

以數組 intervals 表示若干個區間的集合&#xff0c;其中單個區間為 intervals[i] [starti, endi] 。請你合并所有重疊的區間&#xff0c;并返回 一個不重疊的區間數組&#xff0c;該數組需恰好覆蓋輸入中的所有區間 。 示例 1&#xff1a; 輸入&#xff1a;intervals [[1,…
閱讀更多...
Java如何獲取泛型類型

Java如何獲取泛型類型

泛型&#xff08;Generic&#xff09; 泛型允許程序員在強類型程序設計語言中編寫代碼時使用一些以后才指定的類型&#xff0c;在實例化時作為參數指明這些類型。各種程序設計語言和其編譯器、運行環境對泛型的支持均不一樣。Ada、Delphi、Eiffel、Java、C#、F#、Swift 和 Vis…
閱讀更多...
WPF樹形控件TreeView使用介紹

WPF樹形控件TreeView使用介紹

WPF 中的 TreeView 控件用于顯示層次結構數據。它是由可展開和可折疊的 TreeViewItem 節點組成的&#xff0c;這些節點可以無限嵌套以表示數據的層次。 TreeView 基本用法 例如實現下圖的效果&#xff1a; xaml代碼如下&#xff1a; <Window x:Class"TreeView01.Mai…
閱讀更多...
springcloud整合seata我踩過的坑

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…
閱讀更多...
4：kotlin 方法（Functions）

4：kotlin 方法（Functions）

想要聲明一個函數需要使用fun關鍵字 fun hello() {return println("Hello, world!") }fun main() {hello()// Hello, world! }格式: fun 方法名(參數1: 參數1類型, 參數2 : 參數2類型, ...): 返回值類型 {方法體return 返回值 }fun 方法名(參數1: 參數1類型, 參數2…
閱讀更多...
人工智能基礎_機器學習047_用邏輯回歸實現二分類以上的多分類_手寫代碼實現邏輯回歸OVR概率計算---人工智能工作筆記0087

人工智能基礎_機器學習047_用邏輯回歸實現二分類以上的多分類_手寫代碼實現邏輯回歸OVR概率計算---人工智能工作筆記0087

然后我們再來看一下如何我們自己使用代碼實現邏輯回歸的,對二分類以上,比如三分類的概率計算 我們還是使用鶯尾花數據 首先我們把公式寫出來 def sigmoid(z): 定義出來這個函數 可以看看到這需要我們理解OVR是如何進行多分類的,我們先來看這個 OVR分類器 思想 OVR（One-vs-…
閱讀更多...
UE 進階篇一：動畫系統

UE 進階篇一：動畫系統

導語： 下面的動畫部分功能比較全，可以參考這種實現方式，根據自己項目的顆粒度選擇部分功能參考，我們商業項目動畫部分也是這么實現的。 最后實現的效果如下： 最終效果 目錄： ------------------------------------------- 文末有視頻教程/工程地址鏈接 -------------…
閱讀更多...
9、鴻蒙應用桌面圖標外觀和國際化

9、鴻蒙應用桌面圖標外觀和國際化

一、項目資源目錄 項目下的resoueces目錄為資源配置目錄&#xff0c;其中base為基礎配置&#xff0c;即在任何語言環境下都會加載的資源&#xff0c; color.json&#xff1a;用于配置顏色&#xff0c;如頁面的背景和文字的顏色。 string.json&#xff1a;用于設置文字&#…
閱讀更多...
Selenium切換窗口、框架和彈出框window、ifame、alert

Selenium切換窗口、框架和彈出框window、ifame、alert

一、切換窗口 #獲取打開的多個窗口句柄 windows driver.window_handles #切換到當前最新打開的窗口 driver.switch_to.window(windows[-1]) #最大化瀏覽器 driver.maximize_window() #刷新當前頁面 driver.refresh() 二、切換框架frame 如存在以下網頁&#xff1a; <htm…
閱讀更多...
Java基礎（程序控制結構篇）

Java基礎（程序控制結構篇）

Java的程序控制結構與C語言一致&#xff0c;分為順序結構、選擇結構&#xff08;分支結構&#xff09;和循環結構三種。 一、順序結構 如果程序不包含選擇結構或是循環結構&#xff0c;那么程序中的語句就是順序的逐條執行&#xff0c;這就是順序結構。 import java.util.Sc…
閱讀更多...
【 OpenGauss源碼學習 —— 列存儲（CStoreMemAlloc）】

【 OpenGauss源碼學習 —— 列存儲（CStoreMemAlloc）】

列存儲&#xff08;CStoreMemAlloc&#xff09; 概述CStoreMemAlloc 類CStoreMemAlloc::Palloc 函數CStoreMemAlloc::AllocPointerNode 函數CStoreMemAlloc::FreePointerNode 函數CStoreMemAlloc::Repalloc 函數CStoreMemAlloc::PfreeCStoreMemAlloc::Register 函數CStoreMemAl…
閱讀更多...
杭電oj 2064 漢諾塔III C語言

杭電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服務

問鼎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

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背板觸發線

LabVIEW中將SMU信號連接到PXI背板觸發線 本文介紹如何將信號從PXI&#xff08;e&#xff09;SMU卡路由到PXI&#xff08;e&#xff09;機箱上的背板觸發線。該過程涉及使用NI-DCPowerVI將SMU信號導出到PXI_TRIG線上。 在繼續操作之前&#xff0c;請確保在開發PC上安裝了兼容版…
閱讀更多...
MySQL啟動MySQL8.0并指定配置文件

MySQL啟動MySQL8.0并指定配置文件

MySQL啟動MySQL8.0并指定配置文件 mkdir -p /mysql8hello/config ; mkdir -p /mysql8hello/data ; mkdir -p /mysql8hello/logs; mkdir -p /mysql8hello/conf; vim /mysql8hello/config/my.cnf; # 啟動報錯就修改成777&#xff0c;但是會提示風險 chmod 644 /mysql8hello/co…
閱讀更多...
d3dx9_43.dll缺失怎么辦？教你一分鐘修復d3dx9_43.dll丟失問題

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個一組翻轉鏈表

【LeetCode刷題-鏈表】--25.K個一組翻轉鏈表

25.K個一組翻轉鏈表 思路&#xff1a; 把鏈表節點按照k個一組分組&#xff0c;可以使用一個指針head依次指向每組的頭節點&#xff0c;這個指針每次向前移動k步&#xff0c;直至鏈表結尾&#xff0c;對于每個分組&#xff0c; 先判斷它的長度是否大于等于k&#xff0c;若是&am…
閱讀更多...
什么是Zero-shot（零次學習）

什么是Zero-shot（零次學習）

1 Zero-shot介紹 Zero-shot學習&#xff08;ZSL&#xff09;是機器學習領域的一種先進方法&#xff0c;它旨在使模型能夠識別、分類或理解在訓練過程中未見過的類別或概念。這種學習方法對于解決現實世界中常見的長尾分布問題至關重要&#xff0c;即對于一些罕見或未知類別的樣…
閱讀更多...
最新文章

Copyright @ 2022~2023