Xamanimation 1.3.0

Xamanimation - 为 Xamarin.Forms 提供动画库

Xamanimation 是一个为 Xamarin.Forms 设计的可移植库，旨在帮助开发者使用 动画。使用非常简单，从 C# 和 XAML 代码中直接使用。

我们可以通过一个 Behavior 在 XAML 中定义在加载时应用于一个可视元素的动画，或者在 XAML中使用触发器来执行动画，或者从 C# 代码中。

可用的动画

• 颜色
• FadeTo
• 翻转
• 心形
• 跳跃
• 旋转
• 缩放
• 震动
• 平移
• 旋转门

安装

要安装 Xamanimation，请在包管理器控制台中运行以下命令。

PM> Install-Package Xamanimation

直接从 XAML 使用动画

此库的主要优势之一是可以从 XAML 中使用动画。我们必须使用以下命名空间

xmlns:xamanimation="clr-namespace:Xamanimation;assembly=Xamanimation"

让我们为 BoxView 添加动画

<BoxView
     x:Name="FadeBox"
     HeightRequest="120"
     WidthRequest="120"
     Color="Blue" />

我们可以在 XAML 中直接定义动画（作为应用或页面资源）

<xamanimation:FadeToAnimation
     x:Key="FadeToAnimation"
     Target="{x:Reference FadeBox}"
     Duration="2000"
     Opacity="0"/>

使用 xamanimation 命名空间，我们可以访问整个库的动画集。在所有这些中，有许多共同的 参数，例如

• 目标：指示我们将应用动画的可视元素。
• 持续时间：动画的持续时间（以毫秒为单位）。

根据使用的动画类型，我们会有更多参数来自定义特定的动画。例如，在淡入动画的情况下，我们将有一个不透明度属性来设置如何修改不透明度。

要启动动画，我们有以下两种选择

• 触发器：调用 BeginAnimation，它允许我们在条件满足时启动动画。
• 行为： 我们有一个名为 BeginAnimation 的行为，可以将该行为关联到视觉元素，以便在指示所需动画时，当元素加载发生时可以启动相同的动画。

我们可以通过按钮的 Clicked 事件使用提供的触发器来启动之前的动画

<Button 
     Text="Fade">
     <Button.Triggers>
          <EventTrigger Event="Clicked">
               <xamanimation:BeginAnimation
                    Animation="{StaticResource FadeToAnimation}" />
          </EventTrigger>
     </Button.Triggers>
</Button>

我们还有一个概念叫做 Storyboard，它是一组可以在时间内执行的动画

<xamanimation:StoryBoard
     x:Key="StoryBoard"
     Target="{x:Reference StoryBoardBox}">
     <xamanimation:ScaleToAnimation  Scale="2"/>
     <xamanimation:ShakeAnimation />
</xamanimation:StoryBoard>

使用 C#

与我们可以从 XAML 使用库中的动画一样，我们也可以从 C# 代码中做同样的事情。我们有一个名为 Animate 的扩展方法，该方法预计将包含任何可用的动画实例。

如果我们想对名为 AnimationBox 的 BoxView 进行动画处理

<BoxView
     x:Name="AnimationBox"
     HeightRequest="120"
     WidthRequest="120"
     Color="Blue" />

访问元素，使用预期的 Animate 方法

AnimationBox.Animate(new HeartAnimation());

控制动画

您可以使用 Duration 属性来控制动画的持续时间。以及要使用哪种类型的 Easing。现在还添加了一些新属性，比如

延迟 在播放动画之前添加延迟。

<img src="Media/xamanimation-delayed.gif" Width="250" />

无限重复 您现在可以根据需要创建无限动画。

<img src="Media/xamanimation-repeat.gif" Width="250" />

触发器！

触发器允许您在 XAML 中根据事件或属性更改声明性地启动动画。

<Entry 
    FontSize="16" 
    BackgroundColor="LightGray">
    <Entry.Triggers>
        <Trigger TargetType="Entry" Property="IsFocused" Value="True">
            <Trigger.EnterActions>
                <xamanimation:AnimateDouble TargetProperty="Entry.FontSize" To="24"/>
                <xamanimation:AnimateColor TargetProperty="Entry.TextColor" To="Red"/>
                <xamanimation:AnimateColor TargetProperty="VisualElement.BackgroundColor" To="Yellow" Delay="1000"/>
                <xamanimation:AnimateDouble TargetProperty="VisualElement.Rotation" To="12" Duration="100"/>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <xamanimation:AnimateDouble TargetProperty="{x:Static Entry.FontSizeProperty}" To="16"/>
                <xamanimation:AnimateColor TargetProperty="{x:Static Entry.TextColorProperty}" To="Black"/>
                <xamanimation:AnimateColor TargetProperty="{x:Static VisualElement.BackgroundColorProperty}" To="LightGray"/>
                <xamanimation:AnimateDouble TargetProperty="{x:Static VisualElement.RotationProperty}" To="0"/>
            </Trigger.ExitActions>
        </Trigger>
    </Entry.Triggers>
</Entry>

您可以动画化任何类型为 Int、Double、Color、Thickness 或 CornerRadius 的属性。可用选项包括

• AnimateInt
• AnimateColor
• AnimateCornerRadius
• AnimateDouble
• AnimateThickness

进度动画

有时您需要根据随时间变化的价值进行动画处理，例如用户交互的结果。

一个常见的场景是使用滚动。视差效果等。

<BoxView 
    BackgroundColor="Red"
    CornerRadius="24, 24, 0, 0">
    <VisualElement.Behaviors>
        <xamanimation:AnimateProgressColor
            TargetProperty="VisualElement.BackgroundColor"
            Progress="{Binding ScrollY, Source={x:Reference ScrollBehavior}}" 
            Minimum="0"
            Maximum="200"
            From="Black"
            To="Red"/>
        <xamanimation:AnimateProgressCornerRadius
            TargetProperty="BoxView.CornerRadius"
            Progress="{Binding ScrollY, Source={x:Reference ScrollBehavior}}" 
            Minimum="0"
            Maximum="200"
            From="24, 24, 0, 0"
            To="0,0,0,0"/>
    </VisualElement.Behaviors>
</BoxView>

可用选项

• AnimateProgressInt
• AnimateProgressColor
• AnimateProgressCornerRadius
• AnimateProgressDouble
• AnimateProgressThickness

过渡

当控件首次出现时，提供动画过渡行为。您可以使用此功能于单个对象或对象的容器。在后一种情况下，子元素将按顺序进入视图而不是同时全部进入。

<FlexLayout 
     Wrap="Wrap"
	 Direction="Row"
	 JustifyContent="Start"
	 AlignItems="Start"
	 AlignContent="Start">
	 <FlexLayout.Behaviors>
	 <xamanimation:EntranceTransition
	      Duration="1000"/>
	 </FlexLayout.Behaviors>
</FlexLayout>