WPF：Animation动画-TargetValues目标值From、To、By动画

• 黑色方框背景色代码：

灰色方格背景DrawingBrush作为Bord贴图填充
ps：其中Stretch默认为Fill，所有AlignmentX/Y值无用，当Stretch为None，ViewBox和Viewport具有不同带大小及Stretch为Uniform或UniformToFill,而纵横比不同时将使用AlignmentX/Y。

<DrawingBrush x:Key="MyGridBrushResource"
  Viewport="0,0,10,10" ViewportUnits="Absolute"
  TileMode="Tile" Opacity="0.5"
  AlignmentX="Left" AlignmentY="Top"
  presentationOptions:Freeze="True">
        <DrawingBrush.Drawing>
            <DrawingGroup>
                <GeometryDrawing Geometry="M0,0 L1,1" Brush="#44CCCCFF" />
                <GeometryDrawing Geometry="M0,0 L1,0 1,0.05 0.05,0.05 0.05,1 0,1Z" 
       Brush="Gray" />
            </DrawingGroup>
        </DrawingBrush.Drawing>
    </DrawingBrush>

箭头绘图代码：

1. 设置Marin的不同值，使箭头方框X轴不同位置
2. 使用DrawingBursh里的3个Geometry组成箭头形状，贴图填充方框区域

<DrawingBrush x:Key="ArrowBackgroundBrush" Opacity="0.5"
  Viewbox="0,0,1,1" Viewport="0,0,10,20" ViewportUnits="Absolute"
  TileMode="Tile" presentationOptions:Freeze="True">
    <DrawingBrush.Drawing>
        <DrawingGroup>
            <GeometryDrawing Geometry="M0,0 L1,0, 1,0.5" Brush="#9999FF" />
            <GeometryDrawing Geometry="M0,0 L1,0.5, 0,1">
                <GeometryDrawing.Brush>
                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                        <GradientStop Offset="0.0" Color="#9999FF" />
                        <GradientStop Offset="1.0" Color="Transparent" />
                    </LinearGradientBrush>
                </GeometryDrawing.Brush>
            </GeometryDrawing>
            <GeometryDrawing Geometry="M0,1 L1,1, 1,0.5" Brush="#9999FF" />
        </DrawingGroup>
    </DrawingBrush.Drawing>
</DrawingBrush>

Button按钮本身动画代码：

1. 按压触发+鼠标进入、退出触发动画

<Style TargetType="{x:Type Button}" x:Key="CustomButtonStyle">
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="Padding" Value="20" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid HorizontalAlignment="Stretch"
      VerticalAlignment="Stretch"
      Background="Transparent">
                    <Rectangle
       RadiusX="10" RadiusY="10" 
       StrokeThickness="5" Stroke="{TemplateBinding Background}"/>
                    <Rectangle 
          Margin="10"
          Fill="{TemplateBinding Background}" />
                    <Rectangle x:Name="outlineRect"
        RadiusX="10" RadiusY="10" 
        StrokeThickness="5">
                        <Rectangle.Stroke>
                            <SolidColorBrush x:Name="outlineRectangleBrush" Color="Transparent" />
                        </Rectangle.Stroke>
                    </Rectangle>
                    <Rectangle x:Name="sBackingRect"                
        Margin="10">
                        <Rectangle.Fill>
                            <SolidColorBrush x:Name="fillRectangleBrush" Color="Transparent" />
                        </Rectangle.Fill>
                    </Rectangle>
                    <Rectangle Name="glassCube"
        RadiusX="10" RadiusY="10" Opacity="0" 
        Fill="{DynamicResource MyGlassBrushResource}"
        StrokeThickness="2"
        RenderTransformOrigin="0.5,0.5">
                        <Rectangle.Stroke>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Offset="0.0" Color="LightBlue" />
                                <GradientStop Offset="1.0" Color="Gray" />
                            </LinearGradientBrush>
                        </Rectangle.Stroke>
                        <Rectangle.OpacityMask>
                            <RadialGradientBrush>
                                <GradientStop Offset="0.0" Color="Transparent" />
                                <GradientStop Offset="1.0" Color="Black" />
                            </RadialGradientBrush>
                        </Rectangle.OpacityMask>
                        <Rectangle.RenderTransform>
                            <ScaleTransform x:Name="glassCubeScaleTransform" />
                        </Rectangle.RenderTransform>
                    </Rectangle>
                    <ContentPresenter x:Name="myContentPresenter"
        Margin="{TemplateBinding Padding}"
        Grid.Row="0" Grid.Column="0"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Content="{TemplateBinding Content}"  />
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="true">
                        <Trigger.EnterActions>
                            <BeginStoryboard HandoffBehavior="Compose">
                                <Storyboard>
                                    <ColorAnimation 
               Storyboard.TargetName="outlineRectangleBrush"
               Storyboard.TargetProperty="Color"
               To="Red" Duration="0:0:0.25"
               AutoReverse="True" 
               FillBehavior="Stop" />
                                    <ColorAnimation 
              Storyboard.TargetName="fillRectangleBrush"
              Storyboard.TargetProperty="Color"
              To="{x:Static SystemColors.HighlightColor}" Duration="0:0:0.25"
              AutoReverse="True" 
              FillBehavior="Stop" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>

                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="outlineRect" Property="Rectangle.Opacity" Value="0"  />
                        <Setter TargetName="glassCube" Property="Rectangle.Opacity" Value="0.75"  />
                    </Trigger>

                    <EventTrigger RoutedEvent="Mouse.MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard Name="mouseEnterBeginStoryboard">
                                <Storyboard>
                                    <DoubleAnimation 
                Storyboard.TargetName="glassCube"
                Storyboard.TargetProperty="Opacity"
                To="1" Duration="0:0:0.5"
               />
                                    <ColorAnimation 
                Storyboard.TargetName="outlineRectangleBrush"
                Storyboard.TargetProperty="Color"
                To="{x:Static SystemColors.HighlightColor}" Duration="0:0:0.5"
               />
                                    <DoubleAnimation 
                Storyboard.TargetName="glassCubeScaleTransform"
                Storyboard.TargetProperty="ScaleX"
                By="-0.1" Duration="0:0:0.5"
                AutoReverse="True" RepeatBehavior="Forever" />
                                    <DoubleAnimation 
                Storyboard.TargetName="glassCubeScaleTransform"
                Storyboard.TargetProperty="ScaleY"
                By="-0.1" Duration="0:0:0.5"
                AutoReverse="True" RepeatBehavior="Forever" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Mouse.MouseLeave">
                        <EventTrigger.Actions>
                            <RemoveStoryboard BeginStoryboardName="mouseEnterBeginStoryboard" />
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation 
                Storyboard.TargetName="glassCube"
                Storyboard.TargetProperty="Opacity"
                To="0" Duration="0:0:0.5" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Button点击事件触发右侧方框动画代码：
简单的故事版动画目标元素、目标属性、持续时间、From、By、To等组合构成了不同的动画效果

<Button Grid.Row="10" Grid.Column="0" Grid.ColumnSpan="3"
  Background="LimeGreen" Style="{StaticResource CustomButtonStyle}">
  Start Animations
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard FillBehavior="Stop">

          <!-- Demonstrates the From and To properties used together.
               Animates the rectangle's Width property from 50 to 300 over 10 seconds. -->
          <DoubleAnimation 
            Storyboard.TargetName="fromToAnimatedRectangle" 
            Storyboard.TargetProperty="Width"
            From="50" To="300" Duration="0:0:10" />

          <!-- Demonstrates the To property used by itself.
               Animates the Rectangle's Width property from its base value
               (100) to 300 over 10 seconds. -->
          <DoubleAnimation 
            Storyboard.TargetName="toAnimatedRectangle" 
            Storyboard.TargetProperty="Width"
            To="300" Duration="0:0:10" />

          <!-- Demonstrates the By property used by itself.
               Increments the Rectangle's Width property by 300 over 10 seconds.
               As a result, the Width property is animated from its base value
               (100) to 400 (100 + 300) over 10 seconds. -->
          <DoubleAnimation 
            Storyboard.TargetName="byAnimatedRectangle" 
            Storyboard.TargetProperty="Width" 
            By="300" Duration="0:0:10" />

          <!-- Demonstrates the From and By properties used by together.
               Increments the Rectangle's Width property by 300 over 10 seconds.
               As a result, the Width property is animated from 50
               to 350 (50 + 300) over 10 seconds. -->
          <DoubleAnimation 
            Storyboard.TargetName="fromByAnimatedRectangle" 
            Storyboard.TargetProperty="Width" 
            From="50" By="300" Duration="0:0:10"  />

          <!-- Demonstrates the From property used by itself.
               Animates the rectangle's Width property from 50 to its base value (100)
               over 10 seconds. -->
          <DoubleAnimation 
            Storyboard.TargetName="fromAnimatedRectangle" 
            Storyboard.TargetProperty="Width"
            From="50" Duration="0:0:10"  />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>