Share via

AnimationBehavior

  • [アーティクル]

AnimationBehavior は、アタッチされている VisualElement をアニメーション化する機能を提供する Behavior です。 既定では、TapGestureRecognizer は VisualElement にアタッチされ、ユーザーが VisualElement をタップまたはクリックしたことが認識エンジンによって検出されると、関連付けられたアニメーションがトリガーされます。

AnimationType プロパティを設定する必要があります。使用可能なオプションについては、「アニメーション」を参照してください。

重要

.NET MAUI Community Toolkit のビヘイビアーでは、ビヘイビアーの 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# Markup

この 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">
    <Image.Behaviors>
        <toolkit:AnimationBehavior Command="{Binding ThumbsUpCommand}">
            <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}">
    <Entry.Behaviors>
        <toolkit:AnimationBehavior AnimateCommand="{Binding TriggerAnimationCommand}">
            <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.
}

Note

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

次の例は、2 つの AnimationBehavior インスタンスを Entry に割り当てる方法を示しています。1 つは Focused イベントが発生したときにアニメーションをトリガーする方法で、もう 1 つは Unfocused イベントが発生したときに別のアニメーションをトリガーする方法です。

<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 Community Toolkit サンプル アプリケーションで確認できます。

API

AnimationBehavior のソース コードは、.NET MAUI Community Toolkit の GitHub リポジトリにあります。