通过

AnimationBehavior

  • 项目

AnimationBehavior 是一种 Behavior，提供对其附加到的任何 VisualElement 进行动画处理的功能。 默认情况下，TapGestureRecognizer 附加到 VisualElement，并在该识别器检测到用户已点击或单击 VisualElement 时触发关联的动画。

必须设置 AnimationType 属性，才可以在动画中查找其可能选项。

重要

.NET MAUI 社区工具包行为不会设置行为的 BindingContext，因为行为可以通过样式共享,并应用于多个控件。 有关详细信息，请参阅 .NET MAUI 行为

语法

以下示例演示如何将 AnimationBehavior 添加到 Label 并使用 FadeAnimation 对不透明度更改进行动画处理。

XAML

包括 XAML 命名空间

若要在 XAML 中使用工具包，需要将以下 xmlns 添加到页面或视图中：

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

因此，以下内容：

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

将被修改为包括 xmlns，如下所示：

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

使用 AnimationBehavior

<ContentPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="CommunityToolkit.Maui.Sample.Pages.Behaviors.AnimationBehaviorPage"
    x:Name="Page">

    <Label Text="Click this Label">
        <Label.Behaviors>
            <toolkit:AnimationBehavior>
                <toolkit:AnimationBehavior.AnimationType>
                    <toolkit:FadeAnimation Opacity="0.5" />
                </toolkit:AnimationBehavior.AnimationType>
            </toolkit:AnimationBehavior>
        </Label.Behaviors>
    </Label>

</ContentPage>

C#

AnimationBehavior 可在 C# 中按如下所示方式使用：

class AnimationBehaviorPage : ContentPage
{
    public AnimationBehaviorPage()
    {
        var label = new Label
        {
            Text = "Click this Label"
        };

        var animationBehavior = new AnimationBehavior
        {
            AnimationType = new FadeAnimation
            {
                Opacity = 0.5
            }
        };

        label.Behaviors.Add(animationBehavior);

        Content = label;
    }
}

C# 标记

我们的 CommunityToolkit.Maui.Markup 包提供一种更简洁的方式来在 C# 中使用此 Behavior。

using CommunityToolkit.Maui.Markup;

class AnimationBehaviorPage : ContentPage
{
    public AnimationBehaviorPage()
    {
        Content = new Label()
            .Text("Click this label")
            .Behaviors(new AnimationBehavior
            {
                AnimationType = new FadeAnimation
                {
                    Opacity = 0.5
                }
            });
    }
}

以下屏幕截图显示 Android 上生成的 AnimationBehavior：Android 上 AnimationBehavior 的屏幕截图

其他示例

处理用户交互

AnimationBehavior 响应用户点击和单击；可以通过行为上的 Command 属性处理此交互。

以下示例演示如何将 AnimationBehavior 附加到 Image，并将 Command 属性绑定到视图模型上的属性。

视图

<Image Source="thumbs-up.png" x:Name="ThumbsUpImage">
    <Image.Behaviors>
        <toolkit:AnimationBehavior 
            Command="{Binding ThumbsUpCommand}"
            BindingContext="{Binding Path=BindingContext, Source={x:Reference ThumbsUpImage}, x:DataType=Image}">
            <toolkit:AnimationBehavior.AnimationType>
                <toolkit:FadeAnimation />
            </toolkit:AnimationBehavior.AnimationType>
        </toolkit:AnimationBehavior>
    </Image.Behaviors>
</Image>

视图模型


public ICommand ThumbsUpCommand { get; }

public MyViewModel()
{
    ThumbsUpCommand = new Command(() => OnThumbsUp())
}

public void OnThumbsUp()
{
    // perform the thumbs up logic.
}

以编程方式触发动画

AnimationBehavior 提供以编程方式触发动画的功能。 可以执行 AnimateCommand 来触发关联的动画类型。

以下示例演示如何将 AnimationBehavior 添加到 Entry，绑定 AnimatedCommand，然后在视图模型中执行命令。

视图

<Entry Placeholder="First name (Required)"
       Text="{Binding FirstName}"
       x:Name="FirstNameEntry">
    <Entry.Behaviors>
        <toolkit:AnimationBehavior 
            AnimateCommand="{Binding TriggerAnimationCommand}"
            BindingContext="{Binding Path=BindingContext, Source={x:Reference FirstNameEntry}, x:DataType=Entry}">
            <toolkit:AnimationBehavior.AnimationType>
                <toolkit:FadeAnimation />
            </toolkit:AnimationBehavior.AnimationType>
        </toolkit:AnimationBehavior>
    </Entry.Behaviors>
</Entry>

视图模型

private string firstName;

public string FirstName
{
    get => firstName;
    set => SetProperty(ref firstName, value);
}

public ICommand TriggerAnimationCommand { get; set; }

public void Save()
{
    if (string.IsNullOrEmpty(FirstName))
    {
        TriggerAnimationCommand.Execute(CancellationToken.None);
        return;
    }

    // save code.
}

注意

AnimateCommand 属性是只读属性，需要 BindingMode.OneWayToSource 的绑定模式。 你也不需要为视图模型中的命令属性（上例中的 TriggerAnimationCommand）赋值，因为绑定会根据在 AnimationBehavior 中创建的值为你的属性赋值。

这提供从视图模型中触发动画的功能。

从控件事件触发动画

AnimationBehavior 提供与 EventToCommandBehavior 相同的基础功能。 通过使用 EventName 属性，可以在引发与提供的名称匹配的事件时触发关联的动画类型。

使用以下示例动画实现：

class SampleScaleToAnimation : BaseAnimation
{
    public double Scale { get; set; }

    public override Task Animate(VisualElement view) => view.ScaleTo(Scale, Length, Easing);
}

以下示例演示如何将两个 AnimationBehavior 实例分配给 Entry；一个在引发焦点事件时触发动画，另一个在引发无焦点事件时触发另一动画。

<Entry Placeholder="Animate on Focused and Unfocused">
    <Entry.Behaviors>
        <toolkit:AnimationBehavior EventName="Focused">
            <toolkit:AnimationBehavior.AnimationType>
                <behaviorPages:SampleScaleToAnimation 
                    Easing="{x:Static Easing.Linear}"
                    Length="100"
                    Scale="1.05"/>
            </toolkit:AnimationBehavior.AnimationType>
        </toolkit:AnimationBehavior>

        <toolkit:AnimationBehavior EventName="Unfocused">
            <toolkit:AnimationBehavior.AnimationType>
                <behaviorPages:SampleScaleToAnimation 
                    Easing="{x:Static Easing.Linear}"
                    Length="100"
                    Scale="1"/>
            </toolkit:AnimationBehavior.AnimationType>
        </toolkit:AnimationBehavior>
    </Entry.Behaviors>
</Entry>

示例

可以在 .NET MAUI 社区工具包示例应用程序中查找此行为的示例。

API

可以在 .NET MAUI 社区工具包 GitHub 存储库查看 AnimationBehavior 的源代码。