📒 😔 🕵🏻 Avalonia pensativa 😑 🎱 👈🏻

No AvaloniaUI, como em qualquer outra ferramenta de alta qualidade, muitas oportunidades. Infelizmente, porém, diferentemente da Web, várias animações de downloads e outras coisas específicas não foram feitas (por enquanto) em grandes números.
Neste artigo, quero apresentar um pouco mais ao estilo do Avalonia, com suas animações e mostrar com um exemplo como criar uma janela de carregamento simples.

Aqui estão alguns exemplos:

Analisaremos a animação mais simples com a qual muitas pessoas estão familiarizadas:

para criar uma animação semelhante, crie um projeto mvvm Avalonia a partir do modelo e adicione o diretório Controls, ao qual adicionaremos os arquivos necessários.

Adicione 2 arquivos à solução:

no arquivo cs, basta criar uma classe que herdaremos do ContentControl e não adicionaremos mais nada a ela, porque toda a mágica será feita apenas a partir do xaml.

    public class LoadRound:ContentControl
    {
        
  }

Primeiro, crie um modelo para nossa animação futura:

<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>

Aqui indicamos que o design futuro será associado à classe acima.
Agora preencha o modelo. Para fazer isso, precisamos de 8 círculos pretos, colocados em um círculo na tela.

<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>

Então, temos um tipo de imagem estática: a

seguir, para simular o movimento, mudaremos a transparência dos círculos.
Para isso, indicamos mais um estilo.

<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 do estilo, indicamos apenas animações o quão transparente esse círculo deve ser em uma determinada porcentagem de uso de animação. Na propriedade Duration, especificamos a duração de toda a animação e, na propriedade IterationCount, o número de repetições.

E nós temos um piscar de olhos. E aplicando essa animação (com uma mudança de horário) a todos os círculos, obtemos o efeito de "movimento" necessário para nós.

Para usar nosso novo controle, você precisa adicionar seu espaço para nome à descrição da janela principal.

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

Adicione controle à própria página

<controls:LoadRound />

E aplique um estilo dentro da janela que adicione visualização ao nosso controle.

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

Suporte para c # pode ser encontrado aqui , e para Avalonia aqui .

Avalonia pensativa

More articles: