UWP（XAML和C＃）：动画CommandBar图标

Question

如何使CommandBar图标在使用OneDrive同步照片集合时像Photos应用程序中的那样动画化？我应该使用GIF图像还是有更好的方法？

- Jan Chalupa

Answer 1

使用在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 and 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属性，就可以实现与照片应用程序中完全相同的动画。

- Alamakanambra

---

非常感谢您的回复。但是我该如何将其设置为CommandBar按钮的图标？我尝试将x:Name="symbolIcon"应用于所需的按钮，但对我没有起作用。 - Jan Chalupa

你是最棒的 - 非常感谢！我学到了新东西。 - Jan Chalupa