platform	Package	NuGet
UWP	XamlFlair.UWP
WPF	XamlFlair.WPF
Uno	XamlFlair.Uno

Use the following command to download ** XamlFlair ** from the ** Package Manager Console **:

UWP:

Install-Package XamlFlair.UWP

Your application must be no less than Windows 10 version 1809 (build 17763)

WPF:

Install-Package XamlFlair.WPF

Uno:

Install-Package XamlFlair.Uno

Your UWP application must be at least for Windows 10 version 1809 (Build 18362)

The basic concept of XamlFlair is based on From and To animations. Any UI element consisting of a From animation will start with one or more arbitrary values of ** and complete ** using the default values of the corresponding attribute. Any UI element consisting of a To animation will ** start with its current state and be set to one or more arbitrary values **.

Example of From animation (a UI element moved to Translation (0)):

To animation example (UI element slid out of current state):

• • Note **: Note that for color animations, there is an exception to this rule, which is explained in the "Basic Animation Types" section.

First, you need to add the following Xaml namespace references:

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 in and out

警告：设置FadeTo动画时要小心，因为如果Visibility是Visible，元素将保留在可视树中。在某些情况下，您可能需要手动管理IsHitTestVisible，以允许用户点击元素。

Mobile (Translate)

Scale

Rotate

Blur (only supports UWP and WPF)

Saturation (UWP only)

Tint (UWP only supports)

Color (Color, only supports WPF and Uno)

注意：重要的是要注意，当使用From动画设置色彩动画时，颜色将从指定值设置为其当前状态，而不是默认值。

Swivel (UWP only)

使用色彩动画时需要注意，因为它们与其他基本类型动画略有不同。使用ColorTo和ColorFrom时，必须执行以下操作：

• 只能设置以下属性的动画： Control.Background, Control.Foreground, Control.BorderBrush, Border.Background, Border.BorderBrush, TextBlock.Foreground, Shape.Fill, Shape.Stroke
• Make sure to set brush on the appropriate property you want to animate
• 还必须使用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);

Therefore, in the example code above, each animation will run for 750 ms in a secondary moderated manner.

所有常见动画都应该放在全局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. Project Engineering Right-click the menu and click ** 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. Update 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。以下是关于两个选项的示例：