마우이 Release모드에서 Image컨트롤에 Gif가 정상동작 안하는 문제가 있습니다.
https://github.com/dotnet/maui/issues/866
대응책으로는 SkiaSharp
SKLottieView를 사용하는 것입니다.(Nuget 설치 SkiaSharp.Extended.UI.Maui (시험판 포함))
LottieFile다운로드
근대 SKLottieView도 그냥 사용시에는 문제가 없지만 페이지 전환시에는 버벅이네요.
페이지 전환시 Activityindicator 컨트롤 대용으로 사용하려고 했던것인대…
혹시 다른 방법을 아시는분은 댓글 부탁드립니다.
Debug
Release
테스트소스
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp2.MainPage"
BindingContext="{Binding Source={RelativeSource Mode=Self}}"
xmlns:skia="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI">
<ScrollView>
<VerticalStackLayout Spacing="25"
Padding="30,0"
VerticalOptions="Center">
<Label TextColor="Black"
Text="Mode: Release"
HorizontalOptions="Center">
<Label.Triggers>
<DataTrigger TargetType="Label" Binding="{Binding IsDebug}" Value="True">
<Setter Property="Text" Value="Mode: Debug"/>
</DataTrigger>
</Label.Triggers>
</Label>
<Grid Background="{StaticResource Gray100}">
<Label Text="ActivityIndicator"
HorizontalOptions="Center"/>
<ActivityIndicator Color="Blue"
IsRunning="True"
WidthRequest="300"
HeightRequest="150"
HorizontalOptions="Center"
Margin="0,10,0,0"/>
</Grid>
<Grid Background="{StaticResource Gray100}">
<Label Text="Image"
HorizontalOptions="Center"/>
<Image x:Name="image"
Source="loading.gif"
WidthRequest="300"
HeightRequest="150"
HorizontalOptions="Center"/>
</Grid>
<Grid Background="{StaticResource Gray100}">
<Label Text="SKLottieView"
HorizontalOptions="Center"/>
<skia:SKLottieView Source="animation.json"
WidthRequest="300"
HeightRequest="130"
RepeatCount="-1"
HorizontalOptions="Center"
Margin="0,10,0,0"/>
</Grid>
</VerticalStackLayout>
</ScrollView>
</ContentPage>
namespace MauiApp2;
public partial class MainPage : ContentPage
{
public static readonly BindableProperty IsDebugProperty =
BindableProperty.Create(nameof(IsDebug), typeof(bool), typeof(MainPage), false);
public bool IsDebug
{
get { return (bool)GetValue(IsDebugProperty); }
set { SetValue(IsDebugProperty, value); }
}
public MainPage()
{
InitializeComponent();
#if DEBUG
IsDebug = true;
#endif
Loaded += MainPage_Loaded;
}
private void MainPage_Loaded(object sender, EventArgs e)
{
image.IsAnimationPlaying = !image.IsAnimationPlaying;
}
}