プラットフォームプラットフォーム	Package	NuGet
UWP	XamlFlair.UWP
WPF	XamlFlair.WPF
Uno	XamlFlair.Uno

次のコマンドを使用して、Package Manager Console から XamlFlair をダウンロードします

UWP:

Install-Package XamlFlair.UWP

アプリケーションは、Windows 10バージョン18 0 9（ビルド177 6 3）以上でなければなりません。

WPF:

Install-Package XamlFlair.WPF

Uno:

Install-Package XamlFlair.Uno

UWPアプリはWindows 10バージョン18 0 9（ビルド183 6 2）以上で動作する必要があります。

XamlFlairの基本コンセプトは、FromとToのアニメーションに基づいています。Fromアニメーションで構成されるUI要素は、** 1つ以上の任意の値で始まり、対応するプロパティのデフォルト値で ** を完了します。Toアニメーションで構成されるUI要素は、現在の状態で ** を開始し、1つまたは複数の任意の値 ** に設定します。

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。以下是关于两个选项的示例：