Why

• 主要是这几天写了几个简单的动画，一个是颜色渐变的还有一个是旋转的，仅作记录。

How

颜色

//定义动画
 <UserControl.Resources>
     <ResourceDictionary>
         <Storyboard x:Key="ShowStoryboard" RepeatBehavior="Forever">
             <ColorAnimationUsingKeyFrames Storyboard.TargetName="Part_Image" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                 <DiscreteColorKeyFrame KeyTime="0:0:1" Value="#11AA66" />
                 <DiscreteColorKeyFrame KeyTime="0:0:2" Value="#FFAA44" />
                 <DiscreteColorKeyFrame KeyTime="0:0:3" Value="#11AA66" />
             </ColorAnimationUsingKeyFrames>
         </Storyboard>
     </ResourceDictionary>
 </UserControl.Resources>

 <Viewbox Width="50">
     <Grid>
         <Path
             x:Name="Part_Image"
             Data="M682.666667 744.106667a375.466667 375.466667 0 0 0 204.8-334.506667c0-207.36-168.106667-375.466667-375.466667-375.466667S136.533333 202.24 136.533333 409.6a375.466667 375.466667 0 0 0 204.8 334.506667V819.2a34.133333 34.133333 0 0 0 34.133334 34.133333h273.066666a34.133333 34.133333 0 0 0 34.133334-34.133333v-75.093333z"
             Fill="#11AA66">
             <Path.Triggers>
                 <EventTrigger RoutedEvent="Loaded">
                     <BeginStoryboard Storyboard="{StaticResource ShowStoryboard}" />
                 </EventTrigger>
             </Path.Triggers>
         </Path>
         <Path Data="M341.333333 785.066667a34.133333 34.133333 0 0 0-34.133333 34.133333v68.266667a34.133333 34.133333 0 0 0 34.133333 34.133333h68.266667v34.133333a34.133333 34.133333 0 0 0 34.133333 34.133334h136.533334a34.133333 34.133333 0 0 0 34.133333-34.133334v-34.133333h68.266667a34.133333 34.133333 0 0 0 34.133333-34.133333v-68.266667a34.133333 34.133333 0 0 0-34.133333-34.133333H341.333333z" Fill="#FFAA44" />
         <Path Data="M395.946667 348.16a34.133333 34.133333 0 1 0-40.96 54.613333l122.88 92.16V682.666667a34.133333 34.133333 0 0 0 68.266666 0v-187.733334l122.88-92.16a34.133333 34.133333 0 0 0-40.96-54.613333L512 435.2l-116.053333-87.04z" Fill="#FFFFFF" />
     </Grid>

 </Viewbox>

• 表示在加载完成之后就开始颜色动画，需要注意的是最后一个动画的设置需要跟第一个保持一致。

旋转

 <Border
     x:Name="PART_BORDER"
     Background="{TemplateBinding Background}"
     BorderBrush="{TemplateBinding BorderBrush}"
     BorderThickness="{TemplateBinding BorderThickness}">

     <Grid>
         <Viewbox Width="50">
             <Grid>
                 <Path
                     x:Name="PART_BK_IMG"
                     Data="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0zM192 556.8c-16-128 48-265.6 172.8-329.6C518.4 147.2 710.4 204.8 793.6 358.4H528v-86.4c-44.8 0-86.4 6.4-128 25.6-92.8 48-140.8 147.2-128 246.4 0 22.4-41.6 57.6-80 12.8z m467.2 240c-153.6 80-345.6 22.4-428.8-131.2h265.6v83.2c44.8 3.2 92.8-3.2 131.2-25.6 89.6-48 137.6-144 128-240-9.6-76.8 73.6-60.8 76.8-19.2 12.8 134.4-51.2 268.8-172.8 332.8z"
                     Fill="Red"
                     RenderTransformOrigin="0.5,0.5"
                     Stretch="Uniform">
                     <Path.RenderTransform>
                         <RotateTransform x:Name="PART_RUN_ROTATE" Angle="0" />
                     </Path.RenderTransform>
                 </Path>
             </Grid>
         </Viewbox>
         <ContentPresenter
             Margin="{TemplateBinding Padding}"
             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
             Content="{TemplateBinding Content}" />
     </Grid>
 </Border>
 
 
 <BeginStoryboard x:Name="RUNROATE">
    <Storyboard>
        <DoubleAnimation
            BeginTime="00:00:00"
            RepeatBehavior="Forever"
            Storyboard.TargetName="PART_RUN_ROTATE"
            Storyboard.TargetProperty="Angle"
            From="0"
            To="360"
            Duration="00:00:03" />
    </Storyboard>
</BeginStoryboard>

• 注意需要设置旋转中心 RenderTransformOrigin="0.5,0.5"

Tips

• 仅做记录。