【薦】牛逼的WPF動畫庫：XamlFlair

原文鏈接：https://github.com/XamlFlair/XamlFlair

翻譯：沙漠盡頭的狼(本文未全文翻譯，建議閱讀原文了解更多)

XamlFlair

XamlFlair庫的目標是簡化常見動畫的實現，并允許開發人員使用幾行Xaml輕松地添加單個或組合的動畫集。

展示

Sekuence Puzzle Game^[1]

支持作者

如果你想用一些咖啡來支持我的工作，你可以在這里做：給我買杯咖啡^[2]。你的幫助讓我有動力繼續花時間在這個項目上，并繼續維護和更新它的新功能。提前謝謝！

內容

• Install from Nuget^[3]

• Features Overview^[4]

• Basic Concepts^[5]

• Usage^[6]

• Base Animation Types^[7]

• Color Animations (*WPF And Uno Only*)^[8]

• Overriding the Global Default Values^[9]

• Using a `ResourceDictionary` for Base Settings^[10]

• Default Animations (*WPF Only*)^[11]

• `TransformOn` Property (*WPF Only*)^[12]

• Perspective Rotations (*UWP Only*)^[13]

• Combining Animations^[14]

• Overriding Values^[15]

• Relative Translations on X and Y Axes^[16]

• Compound Animations^[17]

• Repeating Animations^[18]

• Events and Bindings^[19]

• Primary and Secondary Completion Commands^[20]

• Using the `StartWith` Property^[21]

• Using the `AllowOpacityReset` Property (*WPF Only*)^[22]

• Using the `ClipToBounds` Property (*UWP And Uno Only*)^[23]

• Debugging Animations^[24]

• Logging Animations^[25]

• `ListViewBase` (_UWP and Uno_) and `ListBox`-based (_WPF_) Animations^[26]

Nuget中下載

PlatformPackageNuGet

UWP	[XamlFlair.UWP][UWPNuGet]	[![UWPNuGetShield]][UWPNuGet]
WPF	[XamlFlair.WPF][WPFNuGet]	[![WPFNuGetShield]][WPFNuGet]
Uno	[XamlFlair.Uno][UNONuGet]	[![UNONuGetShield]][UNONuGet]

使用以下命令從Package Manager Console下載XamlFlair:

UWP:

Install-Package?XamlFlair.UWP

您的應用程序必須至少針對Windows 10版本1809（內部版本17763）

WPF:

Install-Package?XamlFlair.WPF

Uno:

Install-Package?XamlFlair.Uno

您的UWP應用程序必須至少針對Windows 10版本1809（構建18362）

功能概述（Features Overview）

FeatureUWPWPFUWP (Uno)iOS (Uno)Android (Uno)Wasm (Uno) EXPERIMENTAL

Animation System	Composition	Storyboards	Storyboards	Storyboards	Storyboards	Storyboards
Transform Type	N/A	TransformGroup	CompositeTransform	CompositeTransform	CompositeTransform	CompositeTransform
DefaultAnimations.xaml	-	?	-	-	-	-
TransformOn	-	?	-	-	-	-
Compound Animations	?	?	?	?	?	?
Relative Translations	?	?	?	?	?	?
Repeating Animations	?	?	?	?	?	?
Events & Bindings	?	?	?	?	?	?
Primary/Secondary Completion Commands	?	?	?	?	?	?
StartWith	?	?	?	?	?	?
AllowOpacityReset	-	?	-	-	-	-
ClipToBounds	?	N/A	?	?	?	?
Animated Lists	?	?	?	?	?	?
Blur Effect	?	?	-	-	-	-
Saturation Effect	?	-	-	-	-	-
Tint Effect	?	-	-	-	-	-
Color Animations	-	?	?	?	?	?
Perspective Rotations (Swivel)	?	-	-	-	-	-
Debugging Animations	?	?	?	?	?	-

基本概念（Basic Concepts）

XamlFlair的基本概念是基于From和To的動畫。由From動畫組成的任何UI元素都將以一個或多個任意值開始，并使用相應屬性的默認值完成。由To動畫組成的任何UI元素都將以其當前狀態開始，并設置為一個或多個任意值。

From動畫的示例（一個移動到Translation(0)的UI元素）：

From動畫

To動畫示例（從當前狀態滑出的UI元素）：

To動畫

注意：需要注意的是，對于彩色動畫，此規則有一個例外，這在“基本動畫類型”部分中進行了說明。

使用

首先，需要添加以下Xaml命名空間引用：

UWP and Uno:

xmlns:xf="using:XamlFlair"

WPF:

xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"

給任何需要動畫的UI元素FrameworkElement添加附加屬性：

<Border?xf:Animations.Primary="{StaticResource?FadeIn}"?/>

注意：如果FrameworkElement在Xaml中定義了CompositeTransform，則它將在動畫過程中更改。

注意：StaticResource的用法是引用全局通用動畫，這將在下一節中討論。

基本動畫類型（Base Animation Types）

淡入淡出（Fade）

淡入淡出動畫

警告：設置FadeTo動畫時要小心，因為如果Visibility是Visible，元素將保留在可視樹中。在某些情況下，您可能需要手動管理IsHitTestVisible，以允許用戶點擊元素。

移動（Translate）

移動動畫

縮放（Scale）

縮放動畫

旋轉（Rotate）

旋轉動畫

模糊 (Blur，只支持UWP 和 WPF)

模糊動畫

飽和度 (Saturate，只支持UWP)

飽和度動畫

色調（Tint）(只支持UWP)

色調動畫

色彩 (Color，只支持WPF和Uno)

色彩動畫

注意：重要的是要注意，當使用From動畫設置色彩動畫時，顏色將從指定值設置為其當前狀態，而不是默認值。

旋軸 (Swivel，只支持UWP)

旋軸動畫

注意：請閱讀Perspective Rotations (*UWP Only*)^[27]一節了解更多詳細信息。

下面列出了使用XamlFlair時一些值得注意的默認值：

• Kind: FadeTo

• Duration (milliseconds): 500

• Easing: Cubic

• Easing Mode: EaseOut

• TransformCenterPoint: (0.5, 0.5)

• Event: Loaded

• InterElementDelay (milliseconds): 25 (List controls only)

• TransformOn: Render (WPF only)

• Saturation: 0.5 (UWP only)

• Tint: Transparent (UWP only)

色彩動畫 (Color Animations，只支持WPF和Uno)

使用色彩動畫時需要注意，因為它們與其他基本類型動畫略有不同。使用ColorTo和ColorFrom時，必須執行以下操作：

• 只能設置以下屬性的動畫：Control.Background, Control.Foreground, Control.BorderBrush, Border.Background, Border.BorderBrush, TextBlock.Foreground, Shape.Fill, Shape.Stroke

• 確保在要設置動畫的相應屬性上設置brush

• 還必須使用ColorOn指定目標屬性

以下示例將為Rectangle的Fill屬性設置從RoyalBlue到DarkGreen的動畫：

<xf:AnimationSettings?x:Key="SampleColorAnimation"Kind="ColorTo"Color="DarkGreen"ColorOn="Fill"?/><Rectangle?Fill="RoyalBlue"xf:Animations.Primary="{StaticResource?SampleColorAnimation}"?/>

覆蓋全局默認值

如果需要全局更改默認動畫值之一（例如，默認Duration為750而不是500），則可以在應用程序的初始化代碼中調用OverrideDefaultSettings函數。以下示例更改Duration和Easing的默認值：

XamlFlair.Animations.OverrideDefaultSettings(duration:?750,easing:?EasingType.Quadratic);

因此，在上面的示例代碼中，每個動畫都將以二次緩和的方式運行750ms。

使用ResourceDictionary進行基本設置

所有常見動畫都應該放在全局ResourceDictionary（例如：Animations.xaml）中，并在應用程序中需要時使用。目標是將所有動畫合并為一個具有有意義名稱的文件，以便任何開發人員都能準確地了解將動畫應用到FrameworkElement中的內容。下面是一個小例子：

<ResourceDictionary?xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:xf="using:XamlFlair"><x:Double?x:Key="PositiveOffset">50</x:Double><x:Double?x:Key="NegativeOffset">-50</x:Double><x:Double?x:Key="SmallScaleFactor">0.75</x:Double><x:Double?x:Key="LargeScaleFactor">1.25</x:Double><xf:AnimationSettings?x:Key="FadeIn"Kind="FadeFrom"Opacity="0"?/><xf:AnimationSettings?x:Key="FadeOut"Kind="FadeTo"Opacity="0"?/><!--?Scale?to?a?larger?value?--><xf:AnimationSettings?x:Key="Expand"Kind="ScaleXTo,ScaleYTo"ScaleX="{StaticResource?LargeScaleFactor}"ScaleY="{StaticResource?LargeScaleFactor}"?/><!--?Scale?from?a?larger?value?--><xf:AnimationSettings?x:Key="Contract"Kind="ScaleXFrom,ScaleYFrom"ScaleX="{StaticResource?LargeScaleFactor}"ScaleY="{StaticResource?LargeScaleFactor}"?/>...</ResourceDictionary>

要設置應用程序中已有的這組預配置AnimationSettings，請執行以下步驟：

項目工程點擊右鍵菜單，點擊Add > New Item...

選擇 Resource Dictionary 并命名為 Animations.xaml

App.xaml內容如下:

????<Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary?Source="Animations.xaml"?/></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources>

在 Animations.xaml中,復制粘貼以下相應鏈接中的內容

• Animation settings for UWP^[28]

• Animation settings for WPF^[29]

• Animation settings for Uno^[30]

你的應用程序現在有一組通用動畫可以使用了。

默認動畫 (只支持WPF)

除了創建包含自定義AnimationSettings的ResourceDictionary之外，XamlFlair還提供一些默認動畫。

要在應用程序中引用這些默認動畫，請在App.xaml中執行以下步驟：

頂部添加XamlFlair.WPF命名空間

????xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"

更新應用程序資源（Application Resources）:

????<Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><xf:XamlFlairResources?/></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources>

您的應用程序現在有一系列全局默認的動畫可以使用了。

如果Visual Studio Intellisense在使用<xf:XamlFlairResources />時不起作用，您可能需要嘗試以下操作：

????<Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary?Source="pack://application:,,,/XamlFlair.WPF;component/DefaultAnimations.xaml"/></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources>

TransformOn 屬性 (只支持WPF)

RenderTransform可使用TransformOn屬性應用動畫。可用選項為Render和Layout。未指定任何內容時，默認為Render。以下是關于兩個選項的示例：

注意：非常重要的是要注意WPF的LayoutTransform不支持任何TranslateTransform，因此translate動畫永遠不會生效。您可以在這里^[31]的備注部分了解更多信息。

原文readme.md太長了，翻譯累了，大家有興趣看原文吧，最后上一圖：

參考資料

[1]

Sekuence Puzzle Game: https://sekuence.fun

[2]

給我買杯咖啡: https://www.buymeacoffee.com/xamlflair

[3]

Install from Nuget: #install-from-nuget

[4]

Features Overview: #features-overview

[5]

Basic Concepts: #basic-concepts

[6]

Usage: #usage

[7]

Base Animation Types: #base-animation-types

[8]

Color Animations (WPF And Uno Only): #color-animations-wpf-and-uno-only

[9]

Overriding the Global Default Values: #overriding-the-global-default-values

[10]

Using a ResourceDictionary for Base Settings: #using-a-resourcedictionary-for-base-settings

[11]

Default Animations (WPF Only): #default-animations-wpf-only

[12]

TransformOn Property (WPF Only): #transformon-property-wpf-only

[13]

Perspective Rotations (UWP Only): #perspective-rotations-uwp-only

[14]

Combining Animations: #combining-animations

[15]

Overriding Values: #overriding-values

[16]

Relative Translations on X and Y Axes: #relative-translations-on-x-and-y-axes

[17]

Compound Animations: #compound-animations

[18]

Repeating Animations: #repeating-animations

[19]

Events and Bindings: #events-and-bindings

[20]

Primary and Secondary Completion Commands: #primary-and-secondary-completion-commands

[21]

Using the StartWith Property: #using-the-startwith-property

[22]

Using the AllowOpacityReset Property (WPF Only): #using-the-allowopacityreset-property-wpf-only

[23]

Using the ClipToBounds Property (UWP And Uno Only): #using-the-cliptobounds-property-uwp-and-uno-only

[24]

Debugging Animations: #debugging-animations

[25]

Logging Animations: #logging-animations

[26]

ListViewBase (UWP and Uno) and ListBox-based (WPF) Animations: #listviewbase-uwp-and-uno-and-listbox-based-wpf-animations

[27]

Perspective Rotations (UWP Only): #perspective-rotations-uwp-only

[28]

Animation settings for UWP: https://github.com/XamlFlair/XamlFlair/blob/master/Samples/XamlFlair.Samples.UWP/Animations.xaml

[29]

Animation settings for WPF: https://github.com/XamlFlair/XamlFlair/blob/master/Samples/XamlFlair.Samples.WPF/Animations.xaml

[30]

Animation settings for Uno: https://github.com/XamlFlair/XamlFlair/blob/master/Samples/Uno/XamlFlair.Samples.Uno.Shared/Animations.xaml

[31]

這里: https://docs.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement.layouttransform?redirectedfrom=MSDN&view=net-5.0#remarks

總結

以上是生活随笔為你收集整理的【荐】牛逼的WPF动画库：XamlFlair的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。