WPF：Animation动画--KeyFramesExample帧动画（3）

InterpolationMethodsExample插补方式的帧动画

实现效果：

上图的各方框不同的帧动画、
动画控制按钮实现。

以下在StackPanel的附加属性按钮点击Button.Click中设置触发开始事件动画，并设置BeginStoryboard的Name，并由其他对应按钮进行控制**

<StackPanel.Triggers>
    <EventTrigger SourceName="restartButton"
      RoutedEvent="Button.Click">
      <BeginStoryboard Name="myBeginStoryboard">

<!-- Animates the position of a Rectangle from a base value of 10
       to 500, 200, and then 350 using a variety of interpolation methods. -->
  <DoubleAnimationUsingKeyFrames 
    Storyboard.TargetName="combinationKeyFrameRectangle" 
    Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:15" FillBehavior="HoldEnd">
    <DoubleAnimationUsingKeyFrames.KeyFrames>
      <DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
      <LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
      <SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"  KeySpline="0.25,0.5 0.75,1" />
    </DoubleAnimationUsingKeyFrames.KeyFrames>
  </DoubleAnimationUsingKeyFrames>    
</Storyboard>                             
  </BeginStoryboard>
</EventTrigger>

具体对应按钮控制：如停止按钮

<EventTrigger 
  SourceName="stopButton"
  RoutedEvent="Button.Click">
  <StopStoryboard BeginStoryboardName="myBeginStoryboard"  />
</EventTrigger>

DoubleAnimationUsingKeyFrame浮点值帧动画

无需特别留意，Double值为Angle即可

<Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
        <!-- Animates the angle of a RotateTransform from a base value of 0
             to 300, 45, and then 225 using a combination of interpolation
             methods. -->
          <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="myAnimatedButton"
            Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)"
            Duration="0:0:10" FillBehavior="Stop">
            <DoubleAnimationUsingKeyFrames.KeyFrames>

              <LinearDoubleKeyFrame Value="300" KeyTime="0:0:3" />
              <DiscreteDoubleKeyFrame Value="225" KeyTime="0:0:3.5" />
              <DiscreteDoubleKeyFrame Value="180" KeyTime="0:0:4" />
              <DiscreteDoubleKeyFrame Value="90" KeyTime="0:0:4.5" />
              <SplineDoubleKeyFrame Value="-180" KeyTime="0:0:10" KeySpline="0.25,0.5 0.75,1" />
                            
            </DoubleAnimationUsingKeyFrames.KeyFrames>
          </DoubleAnimationUsingKeyFrames>           
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>

ThicknessAnimationUsingKeyFramesExample边框厚度值Thickness帧动画

ps:此时Thickness的设置实例作为ThicknessKeyFrame.Value的语法属性值。

<Border.Triggers>
    <EventTrigger RoutedEvent="Border.Loaded">
      <BeginStoryboard>
        <Storyboard>

          <!-- Animating the BorderThickness property uses 3 KeyFrames. -->
          <ThicknessAnimationUsingKeyFrames
            Storyboard.TargetProperty="BorderThickness"
            Duration="0:0:5" FillBehavior="HoldEnd" RepeatBehavior="Forever">
            <ThicknessAnimationUsingKeyFrames.KeyFrames>

              <!-- Using a LinearThicknessKeyFrame, thickness increases gradually
              over the first half second of the animation. -->
              <LinearThicknessKeyFrame KeyTime="0:0:0.5">
                <LinearThicknessKeyFrame.Value>
                  <Thickness Left="8" Right="8" Top="6" Bottom="6" />
                </LinearThicknessKeyFrame.Value>
              </LinearThicknessKeyFrame>

              <!-- Using a DiscreteThicknessKeyFrame, thickness increases suddenly
              after the first second of the animation. -->
              <DiscreteThicknessKeyFrame KeyTime="0:0:1">
                <DiscreteThicknessKeyFrame.Value>
                  <Thickness Left="28" Right="28" Top="24" Bottom="24" />
                </DiscreteThicknessKeyFrame.Value>
              </DiscreteThicknessKeyFrame>

              <!-- Using a SplineThicknessKeyFrame, thickness decreases slowly at first
              and then suddenly contracts. This KeyFrame takes 2 seconds. -->
              <SplineThicknessKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:3">
                <SplineThicknessKeyFrame.Value>
                  <Thickness Left="1" Right="1" Top="1" Bottom="8" />
                </SplineThicknessKeyFrame.Value>
              </SplineThicknessKeyFrame>

            </ThicknessAnimationUsingKeyFrames.KeyFrames>
          </ThicknessAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Border.Triggers>

  <TextBlock>
    This example shows how to use the ThicknessAnimationUsingKeyFrames to create
    an animation on the BorderThickness property of a Border.
  </TextBlock>
</Border>

PointAnimationUsingKeyFrameExample坐标点帧动画

同理附上简单代码：

<Path Fill="Blue" Margin="15,15,15,15">
    <Path.Data>

      <!-- Describes an ellipse. -->
      <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
        Center="200,100" RadiusX="15" RadiusY="15" />
    </Path.Data>
    <Path.Triggers>
      <EventTrigger RoutedEvent="Path.Loaded">
        <BeginStoryboard Name="MyBeginStoryboard">
          <Storyboard>

            <!-- Animating the Center property uses 3 KeyFrames, which animate
            the ellipse allong a triangular path. -->
            <PointAnimationUsingKeyFrames
            Storyboard.TargetProperty="Center"
            Storyboard.TargetName="MyAnimatedEllipseGeometry"
            Duration="0:0:5" FillBehavior="HoldEnd" RepeatBehavior="Forever">
              <PointAnimationUsingKeyFrames.KeyFrames>

                <!-- Over the first half second, Using a LinearPointKeyFrame, the ellipse 
                moves steadily from its starting position along the first line of the 
                trianglar path.  -->
                <LinearPointKeyFrame KeyTime="0:0:0.5">
                  <LinearPointKeyFrame.Value>
                    <Point X="100" Y="300" />
                  </LinearPointKeyFrame.Value>
                </LinearPointKeyFrame>

ColorAnimationUsingKeyFrameExample颜色帧动画

简单的各种**ColorKeyFrame

<Border.Triggers>
    <EventTrigger RoutedEvent="Border.Loaded">
      <BeginStoryboard>
        <Storyboard>

          <!-- Animate from green to red using a linear key frame, from red to 
          yellow using a discrete key frame, and from yellow back to green with
          a spline key frame. This animation repeats forever. -->
          <ColorAnimationUsingKeyFrames
            Storyboard.TargetProperty="(SolidColorBrush.Color)"
            Storyboard.TargetName="MyAnimatedBrush"
            Duration="0:0:6" FillBehavior="HoldEnd" RepeatBehavior="Forever">
            <ColorAnimationUsingKeyFrames.KeyFrames>

              <!-- Go from green to red in the first 2 seconds. LinearColorKeyFrame creates
              a smooth, linear animation between values. -->
              <LinearColorKeyFrame Value="Red" KeyTime="0:0:2" />

BooleanAnimationUsingKeyFramesExample真假帧动画

设置按钮是否激活的帧动画，只有一种离散DiscreteBooleanKeyFrame配合使用

<Button Name="myAnimatedButton" Margin="200">Click Me
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <BooleanAnimationUsingKeyFrames 
            Storyboard.TargetName="myAnimatedButton" Storyboard.TargetProperty="(Button.IsEnabled)"
            Duration="0:0:4" FillBehavior="HoldEnd">
            <DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:0" />
            <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:1" />
            <DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:2" />
            <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:3" />
            <DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:3.5" />
            <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:4" />
          </BooleanAnimationUsingKeyFrames>            
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

StringAnimationUsingKeyFrames字符串帧动画

<Button Name="myAnimatedButton" Margin="200"
  FontSize="16pt" FontFamily="Verdana">
  Some Text
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <StringAnimationUsingKeyFrames 
            Storyboard.TargetName="myAnimatedButton" Storyboard.TargetProperty="Content"
            Duration="0:0:8" FillBehavior="HoldEnd">
            <DiscreteStringKeyFrame Value="" KeyTime="0:0:0" />
            <DiscreteStringKeyFrame Value="A" KeyTime="0:0:1" />
            <DiscreteStringKeyFrame Value="An" KeyTime="0:0:1.5" />
            <DiscreteStringKeyFrame Value="Ani" KeyTime="0:0:2" />
            <DiscreteStringKeyFrame Value="Anim" KeyTime="0:0:2.5" />
            <DiscreteStringKeyFrame Value="Anima" KeyTime="0:0:3" />
            <DiscreteStringKeyFrame Value="Animat" KeyTime="0:0:3.5" />
            <DiscreteStringKeyFrame Value="Animate" KeyTime="0:0:4" />
            <DiscreteStringKeyFrame Value="Animated" KeyTime="0:0:4.5" />
            <DiscreteStringKeyFrame Value="Animated " KeyTime="0:0:5" />
            <DiscreteStringKeyFrame Value="Animated T" KeyTime="0:0:5.5" />
            <DiscreteStringKeyFrame Value="Animated Te" KeyTime="0:0:6" />
            <DiscreteStringKeyFrame Value="Animated Tex" KeyTime="0:0:6.5" />
            <DiscreteStringKeyFrame Value="Animated Text" KeyTime="0:0:7" />
          </StringAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

RectAnimationUsingKeyFrameExmaple矩形几何帧动画

ps:

RectKeyFrame 类有三种类型，分别对应一个支持的内插方法： LinearRectKeyFrame、 DiscreteRectKeyFrame 和 SplineRectKeyFrame。
与 RectAnimation 不同，RectAnimationUsingKeyFrames 可以有两个以上的目标值。还可以控制单个 RectKeyFrame 段的内插方法。

<Path Stroke="Black" StrokeThickness="1" Fill="LemonChiffon">
  <Path.Data>
    <RectangleGeometry x:Name="myRectangleGeometry" Rect="0,200,100,100" />
  </Path.Data>
  <Path.Triggers>
    <EventTrigger RoutedEvent="Path.Loaded">
      <BeginStoryboard>
        <Storyboard>

          <!-- Animate the Rect property of the RectangleGeometry which causes the
          rectangle to animate its position as well as its width and height. -->
          <RectAnimationUsingKeyFrames
            Storyboard.TargetName="myRectangleGeometry"
            Storyboard.TargetProperty ="Rect"
            Duration="0:0:6" FillBehavior="HoldEnd" RepeatBehavior="Forever">

            <!-- Animate position, width, and height in first 2 seconds. LinearRectKeyFrame creates
            a smooth, linear animation between values. -->
            <LinearRectKeyFrame Value="600,50,200,50" KeyTime="0:0:2" />

            <!-- In the next half second, change height to 10. DiscreteColorKeyFrame creates a 
            sudden "jump" between values. -->
            <DiscreteRectKeyFrame Value="600,50,200,10" KeyTime="0:0:2.5" />

            <!-- In the final 2 seconds of the animation, go back to the starting position, width, and height.  
            Spline key frames like SplineRectKeyFrame creates a variable transition between values depending 
            on the KeySpline property. In this example, the animation starts off slow but toward the end of 
            the time segment, it speeds up exponentially.-->
            <SplineRectKeyFrame Value="0,200,100,100" KeyTime="0:0:4.5" KeySpline="0.6,0.0 0.9,0.00"  />
          </RectAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Path.Triggers>
</Path>

KeytimesExample关键时点

<!-- Create a button to restart the animations. -->
    <Button Canvas.Top="410" Canvas.Left="10">
      Restart Animations
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard FillBehavior="Stop">

              <!-- This animation goes from 10 to 100 in the first 3 seconds, 100 to 300 in the next
              second, and 300 to 500 in the last 6 seconds. Timing is controlled using TimeSpan values. -->
              <DoubleAnimationUsingKeyFrames 
                Storyboard.TargetName="KeyFrameRectangleUsingTimeSpan" Storyboard.TargetProperty="(Canvas.Left)"
                Duration="0:0:10">
                <DoubleAnimationUsingKeyFrames.KeyFrames>

                  <!-- KeyTime properties are expressed as TimeSpan values which are in the form of
                  "hours:minutes:seconds". -->
                  <LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
                  <LinearDoubleKeyFrame Value="300" KeyTime="0:0:4" />
                  <LinearDoubleKeyFrame Value="500" KeyTime="0:0:10" />
                </DoubleAnimationUsingKeyFrames.KeyFrames>
              </DoubleAnimationUsingKeyFrames>

              <!-- This animation goes from 10 to 100 in the first 3 seconds, 100 to 300 in the next
              second, and 300 to 500 in the last 6 seconds. Timing is controlled using percentages. -->
              <DoubleAnimationUsingKeyFrames 
                Storyboard.TargetName="KeyFrameRectangleUsingPercentage" Storyboard.TargetProperty="(Canvas.Left)"
                Duration="0:0:10" >
                <DoubleAnimationUsingKeyFrames.KeyFrames>

                  <!-- KeyTime properties are expressed as Percentages. -->
                  <LinearDoubleKeyFrame Value="100" KeyTime="30%" />
                  <LinearDoubleKeyFrame Value="300" KeyTime="40%" />
                  <LinearDoubleKeyFrame Value="500" KeyTime="100%" />
                </DoubleAnimationUsingKeyFrames.KeyFrames>
              </DoubleAnimationUsingKeyFrames>

              <!-- This animation moves at a constant rate. Timing is controlled with Uniform values. -->
              <DoubleAnimationUsingKeyFrames 
                Storyboard.TargetName="KeyFrameRectangleUsingUniform" Storyboard.TargetProperty="(Canvas.Left)"
                Duration="0:0:10">
                <DoubleAnimationUsingKeyFrames.KeyFrames>

                  <!-- KeyTime properties are expressed with values of Uniform. Uniform values are typically 
                  used with other values such as percentage or TimeSpan. All three KeyFrames below use Uniform
                  values only for demonstration. -->
                  <LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
                  <LinearDoubleKeyFrame Value="300" KeyTime="Uniform" />
                  <LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
                </DoubleAnimationUsingKeyFrames.KeyFrames>
              </DoubleAnimationUsingKeyFrames>

              <!--  This animation moves at a constant rate. Timing is controlled with Paced values. -->
              <DoubleAnimationUsingKeyFrames 
                Storyboard.TargetName="KeyFrameRectangleUsingPaced" Storyboard.TargetProperty="(Canvas.Left)"
                Duration="0:0:10">
                <DoubleAnimationUsingKeyFrames.KeyFrames>

                  <!-- KeyTime properties are expressed with values of Paced. Paced values are typically 
                  used with other values such as percentage or TimeSpan. All three KeyFrames below use Paced
                  values only for demonstration. -->
                  <LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
                  <LinearDoubleKeyFrame Value="300" KeyTime="Paced" />
                  <LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
                </DoubleAnimationUsingKeyFrames.KeyFrames>
              </DoubleAnimationUsingKeyFrames>

              <!--  Timing is a mix of different types of values. -->
              <DoubleAnimationUsingKeyFrames 
                Storyboard.TargetName="KeyFrameRectangleUsingMix" Storyboard.TargetProperty="(Canvas.Left)"
                Duration="0:0:10">
                <DoubleAnimationUsingKeyFrames.KeyFrames>

                  <!-- KeyTime properties are expressed using percentage, TimeSpan, and Paced. -->
                  <LinearDoubleKeyFrame Value="100" KeyTime="30%" />
                  <LinearDoubleKeyFrame Value="300" KeyTime="0:0:4" />
                  <LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
                </DoubleAnimationUsingKeyFrames.KeyFrames>
              </DoubleAnimationUsingKeyFrames>


            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>