WPF动画小知识

一、动画合集

创建一个Storyboard演示画板，在画板里对动画进行定义与处理。

常见动画类型

提醒：更多介绍可查看microsoft提供的相关文档

DoubleAnimation                               //普通Double型控制动画

DoubleAnimationUsingKeyFrames //Double型关键帧动画

ObjectAnimationUsingKeyFrames  //Object型关键帧动画

ColorAnimationUsingKeyFrames    //Color型关键帧动画

StringAnimationUsingKeyFrames    //String型关键帧动画

MatrixAnimationUsingPath              //沿路径型动画

1、资源里添加动画资源

注意：开始动画得自己规划逻辑（触发器、事件都可）

     var storybd = this.FindResource("storybd") as Storyboard;
     storybd.Begin();

    <Window.Resources>
        <Storyboard x:Key="storybd">
            <DoubleAnimation AutoReverse="True"
                             By="0.1"
                             RepeatBehavior="Forever"
                             Storyboard.TargetName="btn"
                             Storyboard.TargetProperty="Opacity"
                             From="0.0" />
            <DoubleAnimation AutoReverse="True"
                             RepeatBehavior="Forever"
                             Storyboard.TargetName="btn"
                             Storyboard.TargetProperty="(Control.Background).(RadialGradientBrush.GradientStops)[1].Offset"
                             From="1"
                             To="0"
                             Duration="0:0:1" />
        Storyboard>
    Window.Resources>

2、事件触发器里开始一个动画

        <Rectangle Name="Rect"
                   Width="70"
                   Height="80"
                   Margin="279,0,0,0"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Center"
                   Fill="Green">
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Rectangle.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation AutoReverse="True"
                                             RepeatBehavior="Forever"
                                             Storyboard.TargetName="Rect"
                                             Storyboard.TargetProperty="Opacity"
                                             From="1"
                                             To="0"
                                             Duration="0:0:1" />
                        Storyboard>
                    BeginStoryboard>
                EventTrigger>
            Rectangle.Triggers>
        Rectangle>

3、Double型关键帧动画

<DoubleAnimationUsingKeyFrames AutoReverse="True"
                               RepeatBehavior="Forever"
                               Storyboard.TargetName="Rect"
                               Storyboard.TargetProperty="(FrameworkElement.Width)">
            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />                        
            <EasingDoubleKeyFrame KeyTime="0:0:5" Value="70" />
DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames AutoReverse="True"
                               RepeatBehavior="Forever"
                               Storyboard.TargetName="Rect"
                               Storyboard.TargetProperty="(FrameworkElement.Height)">
            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:5" Value="80" />
DoubleAnimationUsingKeyFrames>

4、Object型关键帧动画 

   <Window.Resources>
        <Storyboard x:Key="story">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="img" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.03" Value="{x:Static Visibility.Hidden}"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.06" Value="{x:Static Visibility.Visible}"/>
            ObjectAnimationUsingKeyFrames>
        Storyboard>
    Window.Resources>

5、Color型关键帧动画

      <Storyboard x:Key="story">
            <ColorAnimationUsingKeyFrames AutoReverse="True"
                                          RepeatBehavior="Forever"
                                          Storyboard.TargetName="btn"
                                          Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)">
                <EasingColorKeyFrame KeyTime="0" Value="Red" />
                <EasingColorKeyFrame KeyTime="0:0:0.5" Value="Blue" />
                <DiscreteColorKeyFrame KeyTime="0:0:1" Value="Red" />
                <DiscreteColorKeyFrame KeyTime="0:0:1.5" Value="Yellow" />
            ColorAnimationUsingKeyFrames>
        Storyboard>

6、String型关键帧动画

FillBehavior，动画结束时行为

                        HoldEnd：保持在动画结束的最后一帧画面

                        Stop：动画结束，恢复动画开始前的画面

            <StringAnimationUsingKeyFrames FillBehavior="HoldEnd"
                                           Storyboard.TargetName="btn"
                                           Storyboard.TargetProperty="(Button.Content)">
                <DiscreteStringKeyFrame KeyTime="0" Value="5s" />
                <DiscreteStringKeyFrame KeyTime="0:0:1" Value="4s" />
                <DiscreteStringKeyFrame KeyTime="0:0:2" Value="3s" />
                <DiscreteStringKeyFrame KeyTime="0:0:3" Value="2s" />
                <DiscreteStringKeyFrame KeyTime="0:0:4" Value="1s" />
                <DiscreteStringKeyFrame KeyTime="0:0:5" Value="0s" />
            StringAnimationUsingKeyFrames>

7、Matrix型沿路径动画

使用如下：

移动控件可用RenderTransformOrigin="0.5,0.5"，切换位置转换的中心点；

DoesRotateWithTangent：按切换方向旋转；

PathGeometry：指定路径；

 <Rectangle.RenderTransform>
        <MatrixTransform />
 Rectangle.RenderTransform>
 <MatrixAnimationUsingPath AutoReverse="True"
                           DoesRotateWithTangent="True"
                           PathGeometry="{StaticResource Path2}"
                           RepeatBehavior="Forever"
                           Storyboard.TargetName="Rect"
                           Storyboard.TargetProperty="RenderTransform.Matrix"
                           Duration="0:0:3" />

二、扩展

1、流动Path

 StrokeDashArray ：分段长度

 StrokeDashOffset：分段偏移值（改变该值实现流动效果）

 StrokeDashArray="5"  StrokeDashOffset="{Binding OffSet}"

2、变形

控制变形的属性：RenderTransform：呈现变形（定义在UIElement类中）；

                             LayoutTransform：布局变形（定义在FrameworkElement类中）；

 其数据类型都是Transform抽象类

 Transform派生类;

1、MatrixTransform：矩阵变形

2、RotateTransform：旋转变形

3、ScaleTransform：坐标系变形

4、SkewTransform：拉伸变形

5、TranslateTransform：偏移变形

6、TransformGroup：变形组（多个独立变形合成一个变形组）