Sdílet prostřednictvím

AnimationBehavior

  • Článek

Jedná se AnimationBehavior o možnost Behavior animovat všechny VisualElement , ke kterým je připojena. Ve výchozím nastavení TapGestureRecognizer je připojena k VisualElement a aktivuje přidruženou animaci, když rozpozná, že uživatel kliknul nebo kliknul na VisualElement.

Vlastnost AnimationType je nutné nastavit, možné možnosti pro tuto možnost najdete v animacích.

Důležité

Chování sady nástrojů .NET MAUI Community Toolkit nenastavuje BindingContext chování, protože chování lze sdílet a použít u více ovládacích prvků prostřednictvím stylů. Další informace najdete v tématu Chování rozhraní .NET MAUI.

Syntaxe

Následující příklady ukazují, jak přidat AnimationBehavior do Label a použít FadeAnimation k animaci změny neprůhlednosti.

XAML

Zahrnutí oboru názvů XAML

Pokud chcete použít sadu nástrojů v XAML, musíte do stránky nebo zobrazení přidat následující xmlns položky:

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

Proto platí následující:

<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>

Bylo by změněno tak, aby zahrnovalo xmlns následující:

<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>

Použití animationBehavioru

<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#

V AnimationBehavior jazyce C# je možné ho použít následujícím způsobem:

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;
    }
}

Revize jazyka C#

Náš CommunityToolkit.Maui.Markup balíček nabízí mnohem stručnější způsob použití Behavior v jazyce C#.

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
                }
            });
    }
}

Následující snímek obrazovky ukazuje výsledný AnimationBehavior v Androidu: Snímek obrazovky s objektem AnimationBehavior v Androidu

Další příklady

Zpracování interakce uživatele

Reaguje AnimationBehavior na klepnutí a kliknutí uživatelem, je možné tuto interakci zpracovat prostřednictvím Command vlastnosti chování.

Následující příklad ukazuje, jak připojit AnimationBehavior k Image a vytvořit vazbu Command vlastnosti na vlastnost v modelu zobrazení.

Zobrazení

<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>

Zobrazit model


public ICommand ThumbsUpCommand { get; }

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

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

Aktivace animace prostřednictvím kódu programu

Umožňuje AnimationBehavior programově aktivovat animace. Dá AnimateCommand se spustit, aby se aktivoval přidružený typ animace.

Následující příklad ukazuje, jak přidat do objektu AnimationBehavior Entry, vytvořit vazbu AnimatedCommand a poté spustit příkaz z modelu zobrazení.

Zobrazení

<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>

Zobrazit model

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.
}

Poznámka:

Vlastnost AnimateCommand je určena jen pro čtení a očekává režim BindingMode.OneWayToSourcevazby . Také není nutné přiřadit hodnotu k vlastnosti příkazu v modelu zobrazení (TriggerAnimationCommand v příkladu výše), je to proto, že vazba přiřadí hodnotu vaší vlastnosti z hodnoty vytvořené v objektu AnimationBehavior.

To umožňuje aktivovat animaci z modelu zobrazení.

Aktivace animace z řídicích událostí

Poskytuje AnimationBehavior stejné základní funkce jako .EventToCommandBehavior EventName Pomocí vlastnosti lze přidružený typ animace aktivovat, když je vyvolána událost odpovídající zadanému názvu.

Pomocí následující ukázkové implementace animace:

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

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

Následující příklad ukazuje, jak můžeme přiřadit dvě AnimationBehavior instance Entry: jedna k aktivaci animace při vyvolání prioritní události a druhý k aktivaci jiné animace při vyvolání nezaměřené události.

<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>

Příklady

Příklad tohoto chování v akci najdete v ukázkové aplikaci .NET MAUI Community Toolkit.

rozhraní API

Zdrojový kód AnimationBehavior najdete v úložišti .NET MAUI Community Toolkit na GitHubu.