【荐】牛逼的WPF动画库：XamlFlair
【荐】牛逼的WPF动画库：XamlFlair
原文链接： https:// github.com/XamlFlair/Xa mlFlair
翻译：沙漠尽头的狼(本文未全文翻译，建议阅读原文了解更多)
XamlFlair
XamlFlair库的目标是简化常见动画的实现，并允许开发人员使用几行Xaml
轻松
地添加单个或组合的动画集。
展示
支持作者
如果你想用一些咖啡来支持我的工作，你可以在这里做：给我买杯咖啡
[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中下载
使用以下命令从 Package Manager Console 下载 XamlFlair :
UWP:
Install-PackageXamlFlair.UWP
您的应用程序必须至少针对Windows 10版本1809（内部版本17763）
WPF:
Install-PackageXamlFlair.WPF
Uno:
Install-PackageXamlFlair.Uno
您的UWP应用程序必须至少针对Windows 10版本1809（构建18362）
功能概述（Features Overview）
基本概念（Basic Concepts）
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
添加附加属性：
<Borderxf:Animations.Primary="{StaticResourceFadeIn}"/>
注意 ：如果
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:AnimationSettingsx:Key="SampleColorAnimation"
Kind="ColorTo"
Color="DarkGreen"
ColorOn="Fill"/>
<RectangleFill="RoyalBlue"
xf:Animations.Primary="{StaticResourceSampleColorAnimation}"/>
覆盖全局默认值
如果需要全局更改默认动画值之一（例如，默认
Duration
为750而不是500），则可以在应用程序的初始化代码中调用
OverrideDefaultSettings
函数。以下示例更改
Duration
和
Easing
的默认值：
XamlFlair.Animations.OverrideDefaultSettings(
duration:750,
easing:EasingType.Quadratic);
因此，在上面的示例代码中，每个动画都将以二次缓和的方式运行750ms。
使用
ResourceDictionary
进行基本设置
所有
常见
动画都应该放在全局
ResourceDictionary
（例如：
Animations.xaml
）中，并在应用程序中需要时使用。目标是将所有动画合并为一个具有有意义名称的文件，以便任何开发人员都能准确地了解将动画应用到
FrameworkElement
中的内容。下面是一个小例子：
<ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xf="using:XamlFlair">
<x:Doublex:Key="PositiveOffset">50</x:Double>
<x:Doublex:Key="NegativeOffset">-50</x:Double>
<x:Doublex:Key="SmallScaleFactor">0.75</x:Double>
<x:Doublex:Key="LargeScaleFactor">1.25</x:Double>
<xf:AnimationSettingsx:Key="FadeIn"
Kind="FadeFrom"
Opacity="0"/>
<xf:AnimationSettingsx:Key="FadeOut"
Kind="FadeTo"
Opacity="0"/>
<!--Scaletoalargervalue-->
<xf:AnimationSettingsx:Key="Expand"
Kind="ScaleXTo,ScaleYTo"
ScaleX="{StaticResourceLargeScaleFactor}"
ScaleY="{StaticResourceLargeScaleFactor}"/>
<!--Scalefromalargervalue-->
<xf:AnimationSettingsx:Key="Contract"
Kind="ScaleXFrom,ScaleYFrom"
ScaleX="{StaticResourceLargeScaleFactor}"
ScaleY="{StaticResourceLargeScaleFactor}"/>
</ResourceDictionary>
要设置应用程序中已有的这组预配置
AnimationSettings
，请执行以下步骤：
-
项目工程点击右键菜单，点击 Add > New Item...
-
选择 Resource Dictionary 并命名为
Animations.xaml -
App.xaml内容如下:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionarySource="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>