平台	Package	NuGet
UWP	XamlFlair.UWP
WPF	XamlFlair.WPF
Uno	XamlFlair.Uno

使用以下命令從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）

XamlFlair 的基礎概念是基於 From 和 To 的動畫。由 From 動畫組成的任何 UI 元素都將以「一個或多個任意值開始，並使用對應屬性的預設值完成」。由 To 動畫組成的任何 UI 元素都將「以其當前狀態開始，並設定為一個或多個任意值」。

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

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

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

首先，需要新增以下 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 的用法是參考全域通用動畫，這將在下一節中討論。

淡入淡出（Fade）

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

位移動畫（Translate）

縮放動畫（Scale）

旋轉動畫（Rotate）

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

飽和度 (Saturate，僅支援 UWP)

色調（Tint）(僅支援 UWP)

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

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

旋轉透視 (Swivel，僅支援 UWP)

使用色彩動畫時需要注意，因為它們與其他基本類型動畫略有不同。使用 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（例如：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，請執行以下步驟：

1. 對專案按右鍵，點選Add > New Item...
2. 選擇 Resource Dictionary 並命名為 Animations.xaml
3. App.xaml 內容如下：

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

4. 在 Animations.xaml 中，複製貼上以下對應連結中的內容

除了建立包含自訂 AnimationSettings 的 ResourceDictionary 之外，XamlFlair 還提供一些「預設」動畫。

若要在應用程式中參考這些預設動畫，請在 App.xaml 中執行以下步驟：

1. 頂部新增 XamlFlair.WPF 命名空間

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

2. 更新應用程式資源（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>

RenderTransform 可使用 TransformOn 屬性套用動畫。可用選項為 Render 和 Layout。未指定任何內容時，預設為 Render。以下是關於兩個選項的範例：