Avalonia UI简单的加载动画_avalonia 动画

Avalonia UI简单的加载动画

最近学习AvaloniaUI尝试写了一些简单的加载动画，项目地址：Github

动图：

下面是一些代码示例：

axaml:

<UserControl x:Class="LoadingAnimation.Avalonia.Demo.Views.ProgressPage"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:progress="using:LoadingAnimation.Avalonia.Progress"
             d:DesignHeight="450"
             d:DesignWidth="800"
             mc:Ignorable="d">
    <UniformGrid>
        <Border>
            <progress:Progress1 />
        </Border>
        <Border>
            <progress:Progress2 />
        </Border>
        <Border>
            <progress:Progress3 />
        </Border>
        <Border>
            <progress:Progress4 />
        </Border>
        <Border>
            <progress:Progress5 />
        </Border>
        <Border>
            <progress:Progress6 />
        </Border>
    </UniformGrid>
</UserControl>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

axaml:

<UserControl x:Class="LoadingAnimation.Avalonia.Classic.Classic5"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
			 xmlns:local="using:LoadingAnimation.Avalonia.Classic"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             d:DesignHeight="450"
             d:DesignWidth="800"
             mc:Ignorable="d">
    <Grid>
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock Margin="4" Text="{Binding $parent[local:Classic5].CaptionText}" />
            <Grid x:Name="maskGrid" Background="{StaticResource PrimaryBrush}">
                <TextBlock Margin="4" Foreground="White" Text="Loading..." />
            </Grid>
        </Grid>
    </Grid>
</UserControl>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

csharp:

 public partial class Classic5 : ClassicBase
 {
     public Classic5()
     {
         InitializeComponent();
     }

     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);

         var _animation = new Animation
         {
             Duration = TimeSpan.FromMicroseconds(2000),
             IterationCount = IterationCount.Infinite,
             SpeedRatio = 0.001,
         };
         _animation.Children.Add(new KeyFrame()
         {
             Cue = new Cue(0.0),
             Setters = { new Setter { Property = ClipProperty, Value = new RectangleGeometry() { Rect = new Rect(new Size(0, 28)) } } }
         });
         _animation.Children.Add(new KeyFrame()
         {
             Cue = new Cue(1.0),
             Setters = { new Setter { Property = ClipProperty, Value = new RectangleGeometry() { Rect = new Rect(new Size(100, 28)) } } }
         });

         GeometryAnimator animator = new GeometryAnimator();
         Animation.SetAnimator(_animation.Children[0].Setters[0], animator);
         Animation.SetAnimator(_animation.Children[1].Setters[0], animator);

         _animation.RunAsync(maskGrid);
     }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35