🍛 👴 🚐 Avalonia termenung 🚇 🕧 🙌🏻

Di AvaloniaUI, seperti pada alat berkualitas tinggi lainnya, banyak peluang. Namun sayangnya, tidak seperti web, berbagai animasi unduhan dan hal-hal spesifik lainnya tidak dilakukan (untuk saat ini) dalam jumlah besar untuk itu.
Pada artikel ini, saya ingin memperkenalkan Anda sedikit lebih banyak tentang gaya Avalonia, dengan animasinya dan menunjukkan dengan contoh bagaimana membuat jendela boot sederhana.

Berikut adalah beberapa contoh:

Kami akan melihat animasi paling sederhana yang banyak orang kenal:

Untuk membuat animasi yang serupa, buat proyek mvvm Avalonia dari template dan tambahkan direktori Controls ke dalamnya, di mana kami akan menambahkan file yang diperlukan.

Kami menambahkan 2 file ke solusinya:

Dalam file cs, kami cukup membuat kelas yang akan kami warisi dari ContentControl, dan kami tidak akan menambahkan apa pun ke dalamnya, karena semua keajaiban hanya akan dibuat dari xaml.

    public class LoadRound:ContentControl
    {
        
  }

Pertama, buat templat untuk animasi masa depan kita:

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

Di sini kami menunjukkan bahwa desain masa depan akan dikaitkan dengan kelas di atas.
Sekarang isi template. Untuk melakukan ini, kita perlu 8 lingkaran hitam, ditempatkan dalam lingkaran di kanvas.

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

Jadi kita mendapatkan semacam gambar statis.

Selanjutnya, untuk mensimulasikan gerakan, kita akan mengubah transparansi lingkaran.
Untuk ini, kami menunjukkan satu gaya lagi.

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

Di dalam style, kami hanya menunjukkan animasi seberapa transparan lingkaran ini seharusnya dalam% tertentu dari aplikasi animasi. Di properti Durasi, kami menentukan durasi seluruh animasi, dan di properti IterationCount, jumlah pengulangan.

Dan kami mendapat kedipan. Dan menerapkan animasi ini (dengan pergeseran waktu) ke semua lingkaran kita mendapatkan efek "gerakan" yang diperlukan untuk kita.

Untuk menggunakan kontrol baru kami, Anda perlu menambahkan namespace-nya ke deskripsi jendela utama.

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

Tambahkan kontrol ke halaman itu sendiri

<controls:LoadRound />

Dan terapkan gaya dalam jendela yang menambahkan visualisasi ke kontrol kami.

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

Dukungan untuk c # dapat ditemukan di sini , dan untuk Avalonia di sini .

Avalonia termenung

More articles: