【薦】牛逼的WPF動畫庫：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中下載下傳

Platform	Package	NuGet
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）

Feature	UWP	WPF	UWP (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【薦】牛逼的WPF動畫庫：XamlFlairXamlFlair展示

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

XamlFlair

展示

支援作者

内容

Nuget中下載下傳

功能概述（Features Overview）

基本概念（Basic Concepts）

使用

基本動畫類型（Base Animation Types）

淡入淡出（Fade）

移動（Translate）

縮放（Scale）

旋轉（Rotate）

模糊 (Blur，隻支援UWP 和 WPF)

飽和度 (Saturate，隻支援UWP)

色調（Tint）(隻支援UWP)

色彩 (Color，隻支援WPF和Uno)

旋軸 (Swivel，隻支援UWP)

色彩動畫 (Color Animations，隻支援WPF和Uno)

覆寫全局預設值

使用 ResourceDictionary 進行基本設定

預設動畫 (隻支援WPF)

TransformOn 屬性 (隻支援WPF)

參考資料

使用 `ResourceDictionary` 進行基本設定

`TransformOn` 屬性 (隻支援WPF)