【荐】牛逼的WPF动画库:XamlFlair

原文链接:https://github.com/XamlFlair/XamlFlair

翻译:沙漠尽头的狼(本文未全文翻译,建议阅读原文了解更多)

【荐】牛逼的WPF动画库:XamlFlair

XamlFlair

XamlFlair库的目标是简化常见动画的实现,并允许开发人员使用几行Xaml轻松地添加单个或组合的动画集。

【荐】牛逼的WPF动画库:XamlFlair

展示

Sekuence Puzzle Game

【荐】牛逼的WPF动画库:XamlFlair

支持作者

如果你想用一些咖啡来支持我的工作,你可以在这里做:给我买杯咖啡。你的帮助让我有动力继续花时间在这个项目上,并继续维护和更新它的新功能。提前谢谢!

内容

Nuget中下载

PlatformPackageNuGet
UWP[XamlFlair.UWP][UWPNuGet][![UWPNuGetShield]][UWPNuGet]
WPF[XamlFlair.WPF][WPFNuGet][![WPFNuGetShield]][WPFNuGet]
Uno[XamlFlair.Uno][UNONuGet][![UNONuGetShield]][UNONuGet]

使用以下命令从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)

功能概述(Features Overview)

FeatureUWPWPFUWP (Uno)iOS (Uno)Android (Uno)Wasm (Uno) EXPERIMENTAL
Animation SystemCompositionStoryboardsStoryboardsStoryboardsStoryboardsStoryboards
Transform TypeN/ATransformGroupCompositeTransformCompositeTransformCompositeTransformCompositeTransform
DefaultAnimations.xaml
TransformOn
Compound Animations
Relative Translations
Repeating Animations
Events & Bindings
Primary/Secondary Completion Commands
StartWith
AllowOpacityReset
ClipToBoundsN/A
Animated Lists
Blur Effect
Saturation Effect
Tint Effect
Color Animations
Perspective Rotations (Swivel)
Debugging Animations

基本概念(Basic Concepts)

XamlFlair的基本概念是基于From和To的动画。由From动画组成的任何UI元素都将以一个或多个任意值开始,并使用相应属性的默认值完成。由To动画组成的任何UI元素都将以其当前状态开始,并设置为一个或多个任意值

From动画的示例(一个移动到Translation(0)的UI元素):

【荐】牛逼的WPF动画库:XamlFlair
From动画

To动画示例(从当前状态滑出的UI元素):

【荐】牛逼的WPF动画库:XamlFlair
To动画

注意:需要注意的是,对于彩色动画,此规则有一个例外,这在“基本动画类型”部分中进行了说明。

使用

首先,需要添加以下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的用法是引用全局通用动画,这将在下一节中讨论。

基本动画类型(Base Animation Types)

淡入淡出(Fade)

【荐】牛逼的WPF动画库:XamlFlair
淡入淡出动画

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

移动(Translate)

【荐】牛逼的WPF动画库:XamlFlair
移动动画

缩放(Scale)

【荐】牛逼的WPF动画库:XamlFlair
缩放动画

旋转(Rotate)

【荐】牛逼的WPF动画库:XamlFlair
旋转动画

模糊 (Blur,只支持UWP 和 WPF)

【荐】牛逼的WPF动画库:XamlFlair
模糊动画

饱和度 (Saturate,只支持UWP)

【荐】牛逼的WPF动画库:XamlFlair
饱和度动画

色调(Tint)(只支持UWP)

【荐】牛逼的WPF动画库:XamlFlair
色调动画

色彩 (Color,只支持WPF和Uno)

【荐】牛逼的WPF动画库:XamlFlair
色彩动画

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

旋轴 (Swivel,只支持UWP)

【荐】牛逼的WPF动画库:XamlFlair
旋轴动画

注意:请阅读Perspective Rotations (UWP Only)一节了解更多详细信息。

下面列出了使用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)

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

  • 只能设置以下属性的动画: 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函数。以下示例更改DurationEasing的默认值:

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

因此,在上面的示例代码中,每个动画都将以二次缓和的方式运行750ms。

使用ResourceDictionary进行基本设置

所有常见动画都应该放在全局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>
  1. Animations.xaml中,复制粘贴以下相应链接中的内容

你的应用程序现在有一组通用动画可以使用了。

默认动画 (只支持WPF)

除了创建包含自定义AnimationSettingsResourceDictionary之外,XamlFlair还提供一些默认动画。

要在应用程序中引用这些默认动画,请在App.xaml中执行以下步骤:

  1. 顶部添加XamlFlair.WPF命名空间
    xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"
  1. 更新应用程序资源(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>

TransformOn 属性 (只支持WPF)

RenderTransform可使用TransformOn属性应用动画。可用选项为RenderLayout。未指定任何内容时,默认为Render。以下是关于两个选项的示例:

【荐】牛逼的WPF动画库:XamlFlair

注意:非常重要的是要注意WPF的LayoutTransform不支持任何TranslateTransform,因此translate动画永远不会生效。您可以在这里的备注部分了解更多信息。

原文readme.md太长了,翻译累了,大家有兴趣看原文吧,最后上一图:

【荐】牛逼的WPF动画库:XamlFlair

原文出处:XamlFlair

原文链接:https://github.com/XamlFlair/XamlFlair

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论