UWP (XAML & C#):动画命令栏图标

本文关键字：动画 命令 图标 XAML amp UWP | 更新日期: 2023-09-27 18:35:37

在将照片集与OneDrive同步期间，如何使命令栏图标像在照片应用程序中一样动画？我应该使用 GIF 图像还是有更好的方法可以做到这一点？

UWP (XAML & C#):动画命令栏图标

使用 xaml 中定义的Storyboard很容易：

 <Page.Resources>
    <Storyboard x:Name="IconRotation" AutoReverse="False" RepeatBehavior="Forever">
        <DoubleAnimation Duration="0:0:1" To="360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="symbolIcon" />
   </Storyboard>
 </Page.Resources>

SymbolIcon、AppBarButton和CommandBar：

<CommandBar>
  <AppBarButton>
    <AppBarButton.Icon>
     <SymbolIcon x:Name="symbolIcon"  Symbol="Sync" RenderTransformOrigin="0.5,0.5" >
       <SymbolIcon.RenderTransform>
          <CompositeTransform/>
       </SymbolIcon.RenderTransform>
      </SymbolIcon>
     </AppBarButton.Icon>
    </AppBarButton>
  </CommandBar>

运行它并在 cs 文件中停止它：

IconRotation.Begin();
IconRotation.Stop();

要更改旋转速度，请在情节提要上更改Duration属性，您应该能够访问与照片应用程序中完全相同的动画。

相关文章：