Maui学习笔记-CommunityToolkit.Maui动画案例

动画元素

• 在CommunityToolkit.Maui工具包中提供了AnimationBehavior 和 BaseAnimation 类。

• AnimationBehavior作用在视图UI元素，并用作动画的容器。

• BaseAnimation是实现动画逻辑的基类。

• 下面这个案例是使一个按钮实现淡入淡出的效果

在主页的隐藏文件中创建一个类继承BaseAnimation

public class AttentionAnimation:BaseAnimation
{
    public override async Task Animate(VisualElement view, CancellationToken token = default)
    {
      //动画循环次数
        for (var i = 0; i <6; i++)
        {
            await view.FadeTo(0.5, Length, Easing);
            await view.FadeTo(1, Length, Easing);
        }
    }
}

 主页代码

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiApp2;"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MauiApp2.MainPage">
    <Grid>
        <Button Text="!"
                Margin="30"
                HeightRequest="100"
                WidthRequest="100"
                VerticalOptions="Center"
                HorizontalOptions="Center"
                Padding="5"
                CornerRadius="20">
            <Button.Behaviors>
                <toolkit:AnimationBehavior EventName="Loaded">
                    <toolkit:AnimationBehavior.AnimationType>
                        <local:AttentionAnimation
                           //控制动画持续时间
                            Length="500"
                            Easing="{x:Static Easing.SpringIn}"/>
                    </toolkit:AnimationBehavior.AnimationType>
                </toolkit:AnimationBehavior>
            </Button.Behaviors>
        </Button>
    </Grid>
   
</ContentPage>

• AnimationType接收从BaseAnimation抽象类继承的实例。

• AnimationBehavior该类可以在XAML中分配动画并根据特定条件出发动画。可以将它视为动画容器和基础结构，它应用于AnimationType分配给它的属性。

IOS下运行程序

使用Lottie 动画创建动态图形 

• Lottie是一种基于矢量的JSON编码动画格式。

• 可以在它的官网上找到许多现成的动画。

• 首先我们从网站上找到一个动画，下载它的JSON文件，放在项目中的Resource/raw目录下。文件属性设置为MauiAsset。

• 安装nuget包，SkiaSharp.Extended.UI.Maui、CommunityToolkit.Maui、CommunityToolkit.MVVM。并在MauiProgram.cs中对其引用。

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .UseSkiaSharp()
        .UseMauiCommunityToolkit()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        });
    

• 接下来创建一个ViewModel文件在页面添加提示语句和命令。

public partial class MyViewModel:ObservableObject
{
    [ObservableProperty] private string statusMessage = "Hi";

    [RelayCommand]
    async Task SayHi()
    {
        await Task.Delay(5000);
        StatusMessage = "点击开始重复";
    }
}

• 主页中需要对SKiaSharp引用。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:skia="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiApp2;"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:DataType="{x:Type local:MyViewModel}"
             x:Class="MauiApp2.MainPage">
    <ContentPage.BindingContext>
        <local:MyViewModel/>
    </ContentPage.BindingContext>
    <ContentPage.Resources>
        <toolkit:InvertedBoolConverter x:Key="InvertedBoolConverter"/>
    </ContentPage.Resources>
    <Grid RowDefinitions="*,50">
        <Label
            Text="{Binding StatusMessage}"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            FontSize="30"
            IsVisible="{Binding SayHiCommand.IsRunning,Converter={StaticResource InvertedBoolConverter}}"/>
        
        <skia:SKLottieView 
            //“-1”代表动画可以重复
            RepeatCount="-1"
            IsVisible="{Binding SayHiCommand.IsRunning}" 
            Source="run01.json"/>
        
        <Button
            Text="开始"
            Command="{Binding SayHiCommand}"
            Grid.Row="1"/>
    </Grid>
   
</ContentPage>

• SKLottieView它可以解析JSON动画文件并使用SkiaSharp引擎来绘制它。Skia是一个跨平台的图形库，可以在Android、Flutter和其他平台使用。

• Lottie动画主要优势在于可以缩放大小，而无需担心它的质量，轻量级的JSON文件，占用空间比GIF少得多。

IOS下运行程序

 ​​​​​​​