WPF动画

分类：

线性插值过程：在开始值和结束值之间以逐步增减的方式改变属性的动画。

     关键帧动画：从一个值突然变成了另一个值的动画，所有关键帧动画都使用“类型名+AnimationUsingKeyFrames”的形式进行命名。

某些数据类型有关键帧动画类，但没有插值动画类。所有数据类型都支持关键帧动画，所有具有（使用插值）常规动画类的数据类型都都有相应的关键帧动画的动画类型

1.简单线性动画：指仅右变化起点、变化终点、变化幅度、变化时间四个要素构成。

• 变化时间（Duration属性）：必须指定，数据类型为Duration。
• 变化起点（From属性）：如果没有指定变化起点则以变化目标属性的当前值为起点。
• 变化终点（To属性）：如果没有指定变化终点，程序将采用上一次动画的终点或默认值。
• 变化幅度（By属性）：如果同时指定了变化终点，变化幅度将被忽略。

 XAML代码：   

<Grid>

        <Button Content="Move" HorizontalAlignment="Left" VerticalAlignment="Top" Width="60" Height="50" Click="Button_Click">

            <Button.RenderTransform>

                <TranslateTransform x:Name="tt" X="0" Y="0"/>

            </Button.RenderTransform>

        </Button>

</Grid>

C#后台代码：

private void Button_Click(object sender, RoutedEventArgs e)

{

       DoubleAnimation daX = new DoubleAnimation();

       DoubleAnimation daY = new DoubleAnimation();



       //指定起点

       Random random = new Random();

       daX.To = random.NextDouble() * 300;

       daY.To = random.NextDouble() * 300;



       //动画的主体是TranslateTransform变形，而非Button

       this.tt.BeginAnimation(TranslateTransform.XProperty, daX);

       this.tt.BeginAnimation(TranslateTransform.YProperty, daY); 

}

 

2.高级动画控制

一些动画属性：

• AccelerationRatio：加速速率，介于0.0和1.0之间，与DecelerationRatio之和不大于1.0。
• DecelerationRatio：减速速率，介于0.0和1.0之间，与AccelerationRatio之和不大于1.0。
• SpeedRatio：动画实际播放速度与正常速度的比值。
• AutoReverse：是否以相同的动画方式从终止值返回起始值。
• RepeatBehavior：动画的重复行为，取0为不播放，使用double类型值可控制循环次数，取RepeatBehavior.Forever为永远循环。
• BeginTime：正式开始播放前的等待时间。
• EasingFunction：缓冲式渐变

XAML代码：   

 <Grid>

        <Button Content="Move" HorizontalAlignment="Left" VerticalAlignment="Top" Width="60" Height="50" Click="Button_Click">

            <Button.RenderTransform>

                <TranslateTransform x:Name="tt" X="0" Y="0"/>

            </Button.RenderTransform>

        </Button>

</Grid>

C#后台代码：

private void Button_Click(object sender, RoutedEventArgs e)

{

      DoubleAnimation daX = new DoubleAnimation();

      DoubleAnimation daY = new DoubleAnimation();



       //设置反弹

      BounceEase bounceEase = new BounceEase();

      bounceEase.Bounces = 3;//弹跳三次

      bounceEase.Bounciness = 3;//弹性程度，值越大反弹越低

      daY.EasingFunction = bounceEase;



      //指定终点

      daX.To = 300;

      daY.To = 300;



      //指定时长

      Duration duration = new Duration(TimeSpan.FromMilliseconds(2000));

      daX.Duration = duration;

      daY.Duration = duration;



      //动画的主体是TranslateTransform变形，而非button

      this.tt.BeginAnimation(TranslateTransform.XProperty, daX);

      this.tt.BeginAnimation(TranslateTransform.YProperty, daY);

}

 

3.关键帧动画

动画是UI元素属性连续改变所产生的视觉效果。属性每次细微的变化都会产生一个新的画面，每个新画面就称为一“帧”，帧的连续播放就产生动画效果。

private void Button_Click(object sender, RoutedEventArgs e)

{

      DoubleAnimationUsingKeyFrames dakX = new DoubleAnimationUsingKeyFrames();

      DoubleAnimationUsingKeyFrames dakY = new DoubleAnimationUsingKeyFrames();



      //设置动画总时长

      dakX.Duration = new Duration(TimeSpan.FromMilliseconds(900));

      dakY.Duration = new Duration(TimeSpan.FromMilliseconds(900));



      //创建、添加关键帧

      LinearDoubleKeyFrame x_linear1 = new LinearDoubleKeyFrame();

      LinearDoubleKeyFrame x_linear2 = new LinearDoubleKeyFrame();

      LinearDoubleKeyFrame x_linear3 = new LinearDoubleKeyFrame();



      x_linear1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));

      x_linear1.Value = 200;

      x_linear2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(600));

      x_linear2.Value = 0;

      x_linear3.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(900));

      x_linear3.Value = 200;



      dakX.KeyFrames.Add(x_linear1);

      dakX.KeyFrames.Add(x_linear2);

      dakX.KeyFrames.Add(x_linear3);



      LinearDoubleKeyFrame y_linear1 = new LinearDoubleKeyFrame();

      LinearDoubleKeyFrame y_linear2 = new LinearDoubleKeyFrame();

      LinearDoubleKeyFrame y_linear3 = new LinearDoubleKeyFrame();



      y_linear1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));

      y_linear1.Value = 0;

      y_linear2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(600));

      y_linear2.Value = 180;

      y_linear3.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(900));

      y_linear3.Value = 180;



      dakY.KeyFrames.Add(y_linear1);

      dakY.KeyFrames.Add(y_linear2);

      dakY.KeyFrames.Add(y_linear3);



      //执行动画

      this.tt.BeginAnimation(TranslateTransform.XProperty, dakX);

      this.tt.BeginAnimation(TranslateTransform.YProperty, dakY);

}

LinearDoubleKeyFrame是最简单的关键帧，这种关键帧的特点就是只需你给定时间点（KeyTime属性）和到达时间点时目标属性的值（value属性）动画就会让目标属性值在两个关键帧之间匀速变化。

 

4.特殊的关键帧

• LinearDoubleKeyFrame：线性变化关键帧，目标属性值的变化是直线型的、均匀的，即变化速率不变
• DiscreteDoubleKeyFrame：不连续变化关键帧，目标属性值的变化是跳跃性的、跃迁的。
• SplineDoubleKeyFrame：样条函数式变化关键帧，目标属性值的变化速率是一条贝塞尔曲线。
• EasingDoubleKeyFrame：缓冲式变化关键帧，目标属性值以某种缓冲形式变化