在 Avalonia UI 中启动动画的数据触发器

Question

我正在尝试将我的 wpf 应用程序迁移到 avalonia UI。有些方面看起来相当混乱或分散。

我的 wpf xaml 中有简单的 Image 对象：

  <Image.Style>
             <Style TargetType="Image">                
                 <Setter Property="Opacity" Value="0" />
                 <Style.Triggers>                
                     <DataTrigger Binding="{Binding IsBusy}" Value="True">
                         <DataTrigger.EnterActions>
                             <BeginStoryboard Storyboard="{StaticResource fadeInAnimation}" />
                         </DataTrigger.EnterActions>
                         <DataTrigger.ExitActions>
                             <BeginStoryboard Storyboard="{StaticResource fadeOutAnimation}" />
                         </DataTrigger.ExitActions>
                     </DataTrigger>
                 </Style.Triggers>
             </Style>
         </Image.Style>
     </Image>

它与我的 Datacontext 中的布尔 IsBusy 属性很好地绑定。更改属性的值会启动不透明度的平滑过渡并适当设置可见性。

    <Storyboard x:Key="fadeOutAnimation">
        <DoubleAnimation Storyboard.TargetProperty="Opacity"
               From="1" To="0"
               Duration="0:0:0.3"/>

        <ObjectAnimationUsingKeyFrames BeginTime="0:0:0.3"
                               Storyboard.TargetProperty="Visibility"
                               Duration="0:0:0">
            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Collapsed</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>

我喜欢将 xaml 和 viewmodel 完全分开。根本没有任何代码。

Avalonia UI 上提供的文档非常简陋。我只能找到有关转换和动画的信息，但没有提到通过更改绑定属性来触发视觉动作。

还有 Avalonia.Xaml.Behaviors 及其 DataTriggerBehavior，但唯一的示例展示了如何更改控件的颜色。我无法将这些点连接起来。

有关于如何深入了解 Acalonia UI 的更好资源吗？

Ta

Answer 1

为了在基于 ViewModel 属性的对象上触发动画，您必须在绑定到该属性的对象上定义样式类。完成此操作后，您可以通过选择器将关键帧动画应用到该样式类。考虑以下示例：

<StackPanel Orientation="Horizontal">
    <Border Classes.triggered="{Binding AnimationOn}" Background="Red" Width="100" Height="100" >
        <Border.Styles>
            <Style Selector="Border.triggered">
                <Setter Property="Opacity" Value="0"/>
                <Style.Animations>
                    <Animation Duration="0:0:3" IterationCount="INFINITE">
                        <KeyFrame Cue="0%">
                            <Setter Property="Opacity" Value="0.0"/>
                        </KeyFrame>
                        <KeyFrame Cue="50%">
                            <Setter Property="Opacity" Value="1.0"/>
                        </KeyFrame>
                        <KeyFrame Cue="100%">
                            <Setter Property="Opacity" Value="0.0"/>
                        </KeyFrame>
                    </Animation>
                </Style.Animations>
            </Style>
        </Border.Styles>
    </Border>
        
    <ToggleButton IsChecked="{Binding AnimationOn}" Width="100" Height="35" Content="Animate It!"/>
</StackPanel>