プラットフォーム	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 要素は、1 つ以上の任意の値から開始し、対応するプロパティのデフォルト値で完了します。To アニメーションで構成される UI 要素は、現在の状態から開始し、1 つ以上の任意の値に設定されます。

From アニメーションの例（Translation(0)に移動する UI 要素）：

To アニメーションの例（現在の状態からスライドアウトする UI 要素）：

注意：カラーアニメーションに関しては、このルールに例外があり、「基本アニメーションタイプ」セクションで説明されています。

まず、以下の Xaml 名前空間参照を追加する必要があります。

UWP および 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
• アニメーション化する対象のプロパティにブラシが設定されていることを確認する
• 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 を 500 ではなく 750 にしたい場合）を変更する必要がある場合は、アプリケーションの初期化コードで OverrideDefaultSettings 関数を呼び出すことができます。次の例では、Duration と Easing のデフォルト値を変更しています：

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

したがって、上記のサンプルコードでは、すべてのアニメーションが 750ms で二次イージングで実行されます。

すべての「一般的な」アニメーションは、グローバルな ResourceDictionary（例：Animations.xaml）に配置し、アプリケーション内で必要なときに使用するようにします。目標は、すべてのアニメーションを意味のある名前で 1 つのファイルにまとめ、どの開発者でも 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" />

  <!-- より大きな値に拡大 -->
  <xf:AnimationSettings
    x:Key="Expand"
    Kind="ScaleXTo,ScaleYTo"
    ScaleX="{StaticResource LargeScaleFactor}"
    ScaleY="{StaticResource LargeScaleFactor}"
  />

  <!-- より大きな値から縮小 -->
  <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>
  <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 です。2 つのオプションの例を以下に示します：