WPF：Animation動畫--KeyFramesExample幀動畫（3）

時間 2020-01-26

標籤 wpf animation 動畫 keyframesexample 简体版

原文原文鏈接

InterpolationMethodsExample插補方式的幀動畫

實現效果：express

上圖的各方框不一樣的幀動畫、
動畫控制按鈕實現。

如下在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>

具體對應按鈕控制：如中止按鈕this

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

DoubleAnimationUsingKeyFrame浮點值幀動畫

無需特別留意，Double值爲Angle便可spa

<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的語法屬性值。rest

<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座標點幀動畫

同理附上簡單代碼：code

<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顏色幀動畫

簡單的各類**ColorKeyFrameorm

<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配合使用blog

<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:three

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。