Get best of the week

沉思的阿瓦隆

与其他任何高质量工具一样，在AvaloniaUI中也有很多机会。但是，不幸的是，与网络不同，下载动画和其他特定内容的动画（目前）并未大量进行。
在本文中，我想向您介绍Avalonia的样式及其动画，并举例说明如何制作一个简单的加载窗口。


以下是一些示例：


我们将看一下许多人熟悉的最简单的动画：


为了制作类似的动画，请从模板创建一个mvvm Avalonia项目，并向其中添加Controls目录，我们将在其中添加必要的文件。


向解决方案中添加2个文件：

在cs文件中，只需创建一个将从ContentControl继承的类，就不会再添加其他任何东西了，因为所有的魔术都只能通过xaml完成。
    public class LoadRound:ContentControl
    {
        
  }


首先，为我们的未来动画创建一个模板：
<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>

在这里，我们指出将来的设计将与上述类相关联。
现在填写模板。为此，我们需要在画布上的一个圆圈中放置8个黑色圆圈。
<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>

这样我们得到了某种静态图片，


接下来，为了模拟运动，我们将更改圆的透明度。
为此，我们还要指出一种样式。
<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>


在样式内部，我们仅指示了动画在一定比例的动画应用程序中此圆应透明的程度。在Duration属性中，我们指定了整个动画的持续时间，在IterationCount属性中，指定了重复次数。


我们眨了眨眼。将此动画（随时间变化）应用于所有圆，我们获得了对我们必要的“运动”效果。

要使用我们的新控件，您需要将其命名空间添加到主窗口的描述中。
xmlns:controls="clr-namespace:Load.Controls"

向页面本身添加控件
<controls:LoadRound />

并在窗口中应用样式，以将可视化效果添加到控件中。
    <Window.Styles>
        <StyleInclude Source="avares://Load/Controls/LoadRound.xaml" />
    </Window.Styles>


C＃的支持，可以发现在这里，和阿瓦隆尼亚这里。

More articles:


All Articles