AvaloniaUI(五、动画)

 Avalonia的动画写法和wpf还是有点区别的，wpf是在storyboard中写动画的，avalonia 是在央视用靠Animation来完成的。wpf的动画 只有关键帧动画和过渡动画，今天这里只写关键帧动画的例子。

下面代码是实现一个旋转的动画

<Window 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:base="clr-namespace:omc64_aval.Basic"
          mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="omc64_aval.Controls.Window.LoadingWindow"
        Title="LoadingWindow" Width="300" Height="150"
        ShowInTaskbar="False" WindowStartupLocation="CenterOwner">
        <Window.Styles>
        <Style Selector="Image#icon">

            <Setter Property="Opacity" Value="1"></Setter>
            <Style.Animations>
                <Animation Duration="0:0:1" IterationCount="INFINITE">
                    <KeyFrame Cue="0%">
                        <Setter Property="RotateTransform.Angle" Value="1"/>
                    </KeyFrame>
                    <KeyFrame Cue="100%">
                        <Setter Property="RotateTransform.Angle" Value="360"/>
                    </KeyFrame>
                </Animation>
            </Style.Animations>
        </Style>
    </Window.Styles>

    <Grid >
        <Grid.Background>
            <SolidColorBrush Color="Black" Opacity="0.4"></SolidColorBrush>
        </Grid.Background>
        <StackPanel VerticalAlignment="Center"
                    HorizontalAlignment="Center">
            <Grid>
                
                <Image x:Name="icon" Stretch="Fill" Width="65" Height="65" Source="/Assets/Images/loading.png"></Image>
            </Grid>
            <TextBlock x:Name="msg" Grid.Row="1"  FontSize="16"
                       Foreground="White">加载中...</TextBlock>
        </StackPanel>


    </Grid>
</Window>

代码运行起来会让图片从0-360°的旋转动画

其中 <Animation Duration="0:0:1" IterationCount="INFINITE">  Duration 这个属性不用说了，与wpf一致 IterationCount 这个属性是动画运行的次数 "INFINITE" 表示一直运行

只记录了关键的地方，其他地方 与wpf 大概差不多

过渡动画 我还没怎么看过 就先不写了