我有一个动画图标在XAML使用洛蒂。我做了一个单独的文件夹AnimatedVisuals，在那里我保存json格式的图标。
MyPage.xaml

<winui:AnimatedVisualPlayer x:Name="LottiePlayer" AutoPlay="False" Width="40" Height="40">
    <lottie:LottieVisualSource x:Name="LottieJsonSource" UriSource="ms-appx:///AnimatedVisuals/plus-icon.json" />
</winui:AnimatedVisualPlayer>
<Button Click="PlayButton_Click">Play</Button>

我可以用单独的按钮播放
MyPage.xaml.cs

private void PlayButton_Click(object sender, RoutedEventArgs e)
{
    _ = LottiePlayer.PlayAsync(fromProgress: 0, toProgress: 1, looped: false);
}

问题

1.当我点击图标时，如何激活图标动画？现在我用一个单独的按钮激活。也许有某种重叠？
1.如何将问题1的结果链接到命令？当我单击图标时，MyPageViewModel.cs中调用了一个命令？
<Button Command="{x:Bind ViewModel.CreateFileCommand}" />
1.这是激活动画的正确方法吗？我使用MVVM并尽可能保持代码为空。我可以从XAML或ViewModel.cs而不是MyPage.xaml.cs激活动画吗？

试1次

我可以用图标制作一个单独的样式，并将其应用到按钮上。
ButtonStyle.xaml

<Style
    x:Key="CircleButtonStyle"
    BasedOn="{StaticResource DefaultButtonStyle}"
    TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid">
                    <Ellipse x:Name="EllipseBase" Fill="#239E56" />

                    <winui:AnimatedVisualPlayer x:Name="LottiePlayer" AutoPlay="False" Width="40" Height="40">
                        <lottie:LottieVisualSource x:Name="LottieJsonSource" UriSource="ms-appx:///AnimatedVisuals/plus-icon.json" />
                    </winui:AnimatedVisualPlayer>

                    <ContentPresenter
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center" />
[...]

<Button Width="40" Height="40" Style="{StaticResource CircleButtonStyle}" Command="{x:Bind ViewModel.CreateFileCommand}" />

我尝试的障碍是我不能激活动画，因为ButtonStyle.xaml是一个没有代码的样式文件来激活动画。它无法访问_ = LottiePlayer.PlayAsync(fromProgress: 0, toProgress: 1, looped: false);。

注意事项

Lottie-Windows Github
我的应用程序是一个WinUI 3项目与模板工作室脚手架。