English version:https://medium.com/@rretamal.dev/writing-an-animated-3-star-popup-with-net-maui-and-lottie-cb67b7dfe7e
En múltiples aplicaciones gamificadas y juegos podemos ver el típico sistema de 3 estrellas que indican que tan bien un usuario realizo una acción, pasó un nivel, etc, en este caso me pregunté como hacer algo así en .Net Maui.
Existen varias alternativas en este caso pero dada la facilidad de las implementacion con Lottie (el tiempo es un recurso escaso) y la calidad de las animaciones me decidí hacer un ejemplo.
Para ello lo primero es crear nuestro proyecto en Visual Studio 2022:
Seguidamente seleccionaremos el framework, yo en este caso usé .Net 7 y le colocaremos un nombre a nuestro proyecto.
Una vez cumplidos los pasos anteriores veremos la plantilla estandar del proyecto Maui que consiste en un botón con un par de labels y una imagen:
En este momento agregaremos las librerías necesarias por Nuget:
- CommunityToolkit.Maui: para levantar un popup
- Skiasharp.Extended.UI.Maui: para ejecutar la animación
Seguidamente iremos a la web de Lottie https://lottiefiles.com/ donde buscaremos una animación con estrellas:
Yo me fui por la primera imagen pero hay muchas mas. En este caso lo que necesitamos es el archivo .json de la animación y lo guardaremos en la carpeta Raw (Resources -> Raw).
Ya con nuestro archivo en lugar crearemos un ContentView donde tendremos nuestra animación de estrellas, para ello se hará click derecho en el proyecto y de ahí a Agregar -> Nuevo Archivo donde seleccionaremos de las plantillas de Maui un .Net MAUI ContentView (XAML), en mi caso lo nombre StarRating:
En este archivo cambiaremos algunas cosas, en vez del ContentView lo modificaremos a un Popup del Xamarin Community Toolkit, para ello tenemos que agregar la referencia al Toolkit y la referencia a Skiasharp:
xmlns:skia=”clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI”
xmlns:toolkit=”http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
El archivo XAML quedaría de la siguiente manera:
<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:skia="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="Lottie.Demo.StarRating">
<VerticalStackLayout BackgroundColor="Transparent">
<Frame CornerRadius="20" BackgroundColor="White">
<Grid HorizontalOptions="CenterAndExpand" WidthRequest="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<skia:SKLottieView
Grid.Column="0"
x:Name="star1"
Source="star.json"
RepeatCount="0"
HeightRequest="100"
WidthRequest="100"
Margin="0,30,0,0"
IsAnimationEnabled="False"/>
<skia:SKLottieView
Grid.Column="1"
x:Name="star2"
Source="star.json"
RepeatCount="0"
HeightRequest="100"
WidthRequest="100"
IsAnimationEnabled="False"/>
<skia:SKLottieView
Grid.Column="2"
x:Name="star3"
Source="star.json"
RepeatCount="0"
HeightRequest="100"
WidthRequest="100"
Margin="0,30,0,0"
IsAnimationEnabled="False"/>
</Grid>
</Frame>
</VerticalStackLayout>
</toolkit:Popup>
Lo que verás es que se modifico el ContentView por el toolkit:Popup y dentro se colocó un Frame para darle un fondo blanco con esquinas redondas y dentro se colocó un grid de 3 columnas, una por cada estrella, en la columna 1 y 3 se bajaron un poco las estrellas para dar la impresión de arco.
Seguidamente se verá un control del tipo SKLottieView que es el que necesitamos para mostrar la animación, las propiedades que nos interesan en este caso son:
- Source: hace referencia al archivo de animación, en este caso star.json
- RepeatCount: solo queremos ejecutar la animación una sola vez sin repetición
- IsAnimationEnabled: por defecto la estrella se verá apagada hasta que decidamos activarla
El archivo CS quedaría de la siguiente manera:
using CommunityToolkit.Maui.Views;
namespace Lottie.Demo;
public partial class StarRating : Popup
{
public StarRating()
{
InitializeComponent();
}
public async Task ShowStarAnimation() {
await Task.Delay(400);
star1.IsAnimationEnabled = true;
await Task.Delay(1200);
star2.IsAnimationEnabled = true;
await Task.Delay(1200);
star3.IsAnimationEnabled = true;
}
}En el archivo tendremos un método llamado ShowStarAnimation que hará una espera inicial e irá activando cada estrella despues de una pausa entre estrellas.
Que toca ahora? invocarlo desde la pantalla principal, yo eliminé todo el contenido inicial y solo dejé un botón:
<?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="Lottie.Demo.MainPage">
<VerticalStackLayout
VerticalOptions="Center" HorizontalOptions="CenterAndExpand">
<Button x:Name="btnRating" Text="Show Rating" HorizontalOptions="CenterAndExpand"></Button>
</VerticalStackLayout>
</ContentPage>
El archivo .cs luciría de la siguiente manera:
using CommunityToolkit.Maui.Views;
namespace Lottie.Demo;
public partial class MainPage : ContentPage
{
int count = 0;
public MainPage()
{
InitializeComponent();
btnRating.Clicked += BtnRating_Clicked;
}
private async void BtnRating_Clicked(object sender, EventArgs e)
{
var popup = new StarRating();
this.ShowPopup(popup);
await popup.ShowStarAnimation();
}
}
En el cs capturamos el click del botón e inicializamos nuestro popup ejecutando seguidamente la rutina de animación.
El resultado sería el siguiente:
El código lo pueden conseguir por aquí:
GitHub - rretamal/lottie-star-maui: Small demo of a star rating animation on .Net MAUIYou can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…github.com
Happy Coding!
