🤞🏾 🤩 👩🏻‍🌾 Avalonia pensativa 🍅 👨🏼‍💼 📆

En AvaloniaUI, como en cualquier otra herramienta de alta calidad, hay muchas oportunidades. Pero desafortunadamente, a diferencia de la web, varias animaciones de descargas y otras cosas específicas no se hicieron (por ahora) en gran número para ello.
En este artículo, quiero presentarles un poco más sobre la estilización de Avalonia, con sus animaciones y mostrarles con un ejemplo cómo hacer una ventana de arranque simple.

Aquí hay algunos ejemplos:

Veremos la animación más simple con la que muchas personas están familiarizadas:

para hacer una animación similar, cree un proyecto mvvm Avalonia a partir de la plantilla y agregue el directorio de Controles, en el que agregaremos los archivos necesarios.

Agregue 2 archivos a la solución:

en el archivo cs, simplemente creamos una clase que heredaremos de ContentControl y no agregaremos nada más, porque toda la magia se realizará solo desde xaml.

    public class LoadRound:ContentControl
    {
        
  }

Primero, cree una plantilla para nuestra futura animación:

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cc="clr-namespace:Load.Controls">
    <Style Selector="cc|LoadRound">
  </Style>
</Styles>

Aquí indicamos que el diseño futuro estará asociado con la clase anterior.
Ahora complete la plantilla. Para hacer esto, necesitamos 8 círculos negros, colocados en un círculo en el lienzo.

<Style Selector="cc|LoadRound">
        <Setter Property="Template">
            <ControlTemplate>
                <Grid ClipToBounds="True">

                    <ContentPresenter Name="Content"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}" />
                    <Canvas Width="160" Height="160" 
                            IsHitTestVisible="False">
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_8" Canvas.Left="60" Canvas.Top="20"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_7" Canvas.Left="100" Canvas.Top="40"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_6" Canvas.Left="120" Canvas.Top="80"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_5" Canvas.Left="100" Canvas.Top="120"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_4" Canvas.Left="60" Canvas.Top="140"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_3" Canvas.Left="20" Canvas.Top="120"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_2" Canvas.Left="0" Canvas.Top="80"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40"  Classes="ellipse pos_el_1" Canvas.Left="20" Canvas.Top="40"
                                 Fill="Black" />
                    </Canvas>
                </Grid>
            </ControlTemplate>
        </Setter>
    </Style>

Entonces obtenemos algún tipo de imagen estática.

Luego, para simular el movimiento, cambiaremos la transparencia de los círculos.
Para esto, indicamos un estilo más.

<Style Selector="Ellipse.pos_el_1">
        <Style.Animations>
            <Animation Duration="0:0:0.5" IterationCount="INFINITE">
                <KeyFrame Cue="0%">
                    <Setter Property="Opacity" Value="0.17" />
                </KeyFrame>
                <KeyFrame Cue="14%">
                    <Setter Property="Opacity" Value="0.34" />
                </KeyFrame>
                <KeyFrame Cue="28%">
                    <Setter Property="Opacity" Value="0.50" />
                </KeyFrame>
                <KeyFrame Cue="42%">
                    <Setter Property="Opacity" Value="0.67" />
                </KeyFrame>
                <KeyFrame Cue="56%">
                    <Setter Property="Opacity" Value="0.84" />
                </KeyFrame>
                <KeyFrame Cue="70%">
                    <Setter Property="Opacity" Value="1" />
                </KeyFrame>
                <KeyFrame Cue="84%">
                    <Setter Property="Opacity" Value="0" />
                </KeyFrame>
                <KeyFrame Cue="100%">
                    <Setter Property="Opacity" Value="0.07" />
                </KeyFrame>
            </Animation>
        </Style.Animations>
    </Style>

Dentro del estilo, solo indicamos animaciones que tan transparente debería ser este círculo en un cierto% de la aplicación de animación. En la propiedad Duración, especificamos la duración de toda la animación, y en la propiedad IterationCount, el número de repeticiones.

Y tenemos un parpadeo. Y aplicando esta animación (con un cambio de tiempo) a todos los círculos obtenemos el efecto de "movimiento" que es necesario para nosotros.

Para usar nuestro nuevo control, debe agregar su espacio de nombres a la descripción de la ventana principal.

xmlns:controls="clr-namespace:Load.Controls"

Agregar control a la página misma

<controls:LoadRound />

Y aplique un estilo dentro de la ventana que agregue visualización a nuestro control.

    <Window.Styles>
        <StyleInclude Source="avares://Load/Controls/LoadRound.xaml" />
    </Window.Styles>

El soporte para c # se puede encontrar aquí , y para Avalonia aquí .

Avalonia pensativa

More articles: