WPF插值方法动画

WPF插值方法动画

前台代码

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Interpolation Methods"
  Background="White">

  <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" Margin="20">
    <Canvas Width="600" Height="300">
    
      <!-- Mark the key frame points for illustrative purposes. -->
      <Rectangle
        Style="{StaticResource MyMarkerRectangleStyle}"
        Canvas.Left="10" Canvas.Top="50" />
      <TextBlock Canvas.Left="10">Starting Value</TextBlock>
      
      <Rectangle
        Style="{StaticResource MyMarkerRectangleStyle}"
        Canvas.Left="500" Canvas.Top="50" />
        
      <TextBlock Canvas.Left="500">1. Value = 500 <LineBreak /> KeyTime = 0:0:7</TextBlock>
      <Rectangle Style="{StaticResource MyMarkerRectangleStyle}"
        Canvas.Left="200" Canvas.Top="50"/>
      <TextBlock Canvas.Left="200">2. Value = 200 <LineBreak /> KeyTime = 0:0:10</TextBlock>
      <Rectangle Style="{StaticResource MyMarkerRectangleStyle}"
        Canvas.Left="350" Canvas.Top="50" />
      <TextBlock Canvas.Left="350">3. Value = 350 <LineBreak /> KeyTime = 0:0:15</TextBlock>


      <!-- This rectangle is animated using a key frame animation
           with linear interpolation. -->
      <Rectangle Name="linearKeyFrameRectangle"
        Canvas.Top="50"
        Canvas.Left="10"
        Height="50"
        Width="50"
        Stroke="Black"
        StrokeThickness="5">
        <Rectangle.Fill>
          <SolidColorBrush Color="Blue" Opacity="0.4" />
        </Rectangle.Fill>    
      </Rectangle>

      <!-- This rectangle is animated using a key frame animation
           with splined interpolation. -->
      <Rectangle Name="splineKeyFrameRectangle"
        Canvas.Top="110"
        Canvas.Left="10"
        Height="50"
        Width="50"
        Stroke="Black"
        StrokeThickness="5">
        <Rectangle.Fill>
          <SolidColorBrush Color="Purple" Opacity="0.4" />
          </Rectangle.Fill>
      </Rectangle>

      <!-- This rectangle is animated using a key frame animation
           with discrete interpolation. -->
      <Rectangle Name="discreteKeyFrameRectangle"
        Canvas.Top="170"
        Canvas.Left="10"
        Height="50"
        Width="50"
        Stroke="Black"
        StrokeThickness="5">
        <Rectangle.Fill>
          <SolidColorBrush Color="Lime" Opacity="0.4" />
        </Rectangle.Fill>
      </Rectangle>

      <!-- This rectangle is animated using a key frame animation
           with a combination of interpolation methods. -->
      <Rectangle Name="combinationKeyFrameRectangle"
        Canvas.Top="230"
        Canvas.Left="10"
        Height="50"
        Width="50"
        Stroke="Black"
        StrokeThickness="5">
        <Rectangle.Fill>
          <SolidColorBrush Color="Orange" Opacity="0.4" />
        </Rectangle.Fill>
      </Rectangle>
    </Canvas>
    
    <!-- These buttons are used to restart, pause, resume, and stop the animations. -->
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
      <StackPanel.Triggers>
        <EventTrigger SourceName="restartButton"
          RoutedEvent="Button.Click">
          <BeginStoryboard Name="myBeginStoryboard">
            <Storyboard>
              <!-- Animates the position of a Rectangle from a base value of 10
                  to 500, 200, and then 350 using linear interpolation. -->
              <DoubleAnimationUsingKeyFrames 
                Storyboard.TargetName="linearKeyFrameRectangle" Storyboard.TargetProperty="(Canvas.Left)"
                Duration="0:0:15" FillBehavior="HoldEnd">
                <DoubleAnimationUsingKeyFrames.KeyFrames>
                  <LinearDoubleKeyFrame Value="500" KeyTime="0:0:7" />
                  <LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
                  <LinearDoubleKeyFrame Value="350" KeyTime="0:0:15" />
                </DoubleAnimationUsingKeyFrames.KeyFrames>
              </DoubleAnimationUsingKeyFrames>
    
              <!-- Animates the position of a Rectangle from a base value of 10
                   to 500, 200, and then 350 using splined interpolation. -->
              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="splineKeyFrameRectangle" Storyboard.TargetProperty="(Canvas.Left)" 
                Duration="0:0:15" FillBehavior="HoldEnd">
                <DoubleAnimationUsingKeyFrames.KeyFrames>
                  <SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.25,0.5 0.75,1" /><!--IB: was 7.5-->
                  <SplineDoubleKeyFrame Value="200" KeyTime="0:0:10"  KeySpline="0.25,0.5 0.75,1" />
                  <SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"  KeySpline="0.25,0.5 0.75,1" />
                </DoubleAnimationUsingKeyFrames.KeyFrames>
              </DoubleAnimationUsingKeyFrames>
    
              <!-- Animates the position of a Rectangle from a base value of 10
                   to 500, 200, and then 350 using discrete interpolation. -->
              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="discreteKeyFrameRectangle" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:15" FillBehavior="HoldEnd">
                <DoubleAnimationUsingKeyFrames.KeyFrames>
                  <DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
                  <DiscreteDoubleKeyFrame Value="200" KeyTime="0:0:10" />
                  <DiscreteDoubleKeyFrame Value="350" KeyTime="0:0:15" />
                </DoubleAnimationUsingKeyFrames.KeyFrames>
              </DoubleAnimationUsingKeyFrames>

              <!-- 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="pauseButton"
          RoutedEvent="Button.Click">
          <PauseStoryboard BeginStoryboardName="myBeginStoryboard"  />
        </EventTrigger>   
        <EventTrigger 
          SourceName="resumeButton"
          RoutedEvent="Button.Click">
          <ResumeStoryboard BeginStoryboardName="myBeginStoryboard"  />
        </EventTrigger>    
        <EventTrigger 
          SourceName="skipToEndButton"
          RoutedEvent="Button.Click">
          <SkipStoryboardToFill BeginStoryboardName="myBeginStoryboard"  />
        </EventTrigger>         
        <EventTrigger 
          SourceName="stopButton"
          RoutedEvent="Button.Click">
          <StopStoryboard BeginStoryboardName="myBeginStoryboard"  />
        </EventTrigger>           
      </StackPanel.Triggers>
      
      <Button Name="restartButton">Restart</Button>
      <Button Name="pauseButton">Pause</Button>
      <Button Name="resumeButton">Resume</Button>
      <Button Name="skipToEndButton">Skip To End</Button>
      <Button Name="stopButton">Stop</Button>
    </StackPanel>
</StackPanel>
</Page>