WPF动画的使用

前言

弹幕是什么？这里是使用动画将控件弹起来，通过C#提供的多样化动画类型，我们可以制做出丰富的界面效果。主要有基于时间的动画和基于属性的动画。

1、Animatable

一个提供动画支持的抽象类。

继承

Object

DispatcherObject

DependencyObject

Freezable

Animatable

2、DoubleAnimation 类

在指定的 Duration 期间使用线性内插对两个目标值之间的 Double 属性值进行动画处理。是一种简单线性动画，仅由变化起点、变化终点、变化幅度、变化时间4个要素构成。三个细节：开始值（From）、结束值（To）和整个动画执行的时间（Duration）。

private void Button_Click(object sender, RoutedEventArgs e)
{DoubleAnimation daX = new DoubleAnimation();DoubleAnimation daY = new DoubleAnimation();//设置反弹BounceEase be = new BounceEase();be.Bounces = 3;be.Bounciness = 3;daY.EasingFunction = be;//指定起点daX.From = 300D;daY.From = 300D;//指定终点//Random r = new Random();//daX.To = r.NextDouble() * 300;//daY.To = r.NextDouble() * 300;//指定时长Duration duration = new Duration(TimeSpan.FromMilliseconds(2000));daX.Duration = duration;daY.Duration = duration;//动画的主体是TranslateTransform变形，而非Buttonthis.tt.BeginAnimation(TranslateTransform.XProperty, daX);this.tt.BeginAnimation(TranslateTransform.YProperty, daY);
}

3、DoubleAnimationUsingPath

使用 PathGeometry 在两个或多个目标值之间对 Double 属性值进行动画处理，以指定这些值。 此动画可用于沿路径移动可视对象。

//从XAML代码中获取移动路径数据
PathGeometry pg = this.LayoutRoot.FindResource("movingPath") as PathGeometry;
Duration duration = new Duration(TimeSpan.FromMilliseconds(600));//创建动画
DoubleAnimationUsingPath dapX = new DoubleAnimationUsingPath();
dapX.PathGeometry = pg;
dapX.Source = PathAnimationSource.X;
dapX.Duration = duration;DoubleAnimationUsingPath dapY = new DoubleAnimationUsingPath();
dapY.PathGeometry = pg;
dapY.Source = PathAnimationSource.Y;
dapY.Duration = duration;
//自动返回、永远循环
dapX.AutoReverse = true;
dapX.RepeatBehavior = RepeatBehavior.Forever;
dapY.AutoReverse = true;
dapY.RepeatBehavior = RepeatBehavior.Forever;//执行动画
this.tt.BeginAnimation(TranslateTransform.XProperty, dapX);
this.tt.BeginAnimation(TranslateTransform.YProperty, dapY);

4、DoubleAnimationUsingKeyFrames

根据一组 KeyFrames 对 Double 属性的值进行动画处理。

关键帧动画的目标值由其 KeyFrames 属性定义，该属性包含对象的集合 DoubleKeyFrame 。 每个都 DoubleKeyFrame 定义了动画的一段，其自己的目标和 ValueKeyTime。 当动画运行时，它会在指定的关键时间从一个键值前进到下一个键值。

有三种类型的 DoubleKeyFrame 类，每个支持的内插方法各有一种： LinearDoubleKeyFrame、 DiscreteDoubleKeyFrame和 SplineDoubleKeyFrame。

与 不同， DoubleAnimation可以 DoubleAnimationUsingKeyFrames 具有两个以上的目标值。 还可以控制单个 DoubleKeyFrame 段的内插方法。

DoubleAnimationUsingKeyFrames dakX = new DoubleAnimationUsingKeyFrames();
DoubleAnimationUsingKeyFrames dakY = new DoubleAnimationUsingKeyFrames();//设置动画总时长
dakX.Duration = new Duration(TimeSpan.FromMilliseconds(900));
dakY.Duration = new Duration(TimeSpan.FromMilliseconds(900));//创建、添加关键帧
LinearDoubleKeyFrame x_kf_1 = new LinearDoubleKeyFrame();
LinearDoubleKeyFrame x_kf_2 = new LinearDoubleKeyFrame();
LinearDoubleKeyFrame x_kf_3 = new LinearDoubleKeyFrame();x_kf_1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));
x_kf_1.Value = 200;
x_kf_2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(600));
x_kf_2.Value = 0;
x_kf_3.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(900));
x_kf_3.Value = 200;dakX.KeyFrames.Add(x_kf_1);
dakX.KeyFrames.Add(x_kf_2);
dakX.KeyFrames.Add(x_kf_3);LinearDoubleKeyFrame y_kf_1 = new LinearDoubleKeyFrame();
LinearDoubleKeyFrame y_kf_2 = new LinearDoubleKeyFrame();
LinearDoubleKeyFrame y_kf_3 = new LinearDoubleKeyFrame();y_kf_1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));
y_kf_1.Value = 0;
y_kf_2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(600));
y_kf_2.Value = 180;
y_kf_3.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(900));
y_kf_3.Value = 180;
dakY.KeyFrames.Add(y_kf_1);
dakY.KeyFrames.Add(y_kf_2);
dakY.KeyFrames.Add(y_kf_3);//执行动画
this.tt.BeginAnimation(TranslateTransform.XProperty, dakX);
this.tt.BeginAnimation(TranslateTransform.YProperty, dakY);

5、高级动画

AccelerationRation加速速率，介于0.0和0.1之间。

DecelerationRation减速速度，介于0.0和0.1之间。

SpeedRation动画实际播放速度与正常速度的比值。

AutoReverse是否以相反的动画方式从终止值返回起始值。

RepeatBehavior动画重复行为，取0为不播放，使用double类型值 可控制循环次数，取RepeatBehavior.Forver为永远循环。

EasingFunction缓冲式渐变。

6、场景动画

并行执行的一组动画。

以交互方式控制情节提要，可控制的情节提要可以暂停、恢复、查找、停止和删除。
数据绑定和对时间线进行动画处理。

后台代码方式实现

Duration duration = new Duration(TimeSpan.FromMilliseconds(600));//红色小球匀速移动
DoubleAnimation daRx = new DoubleAnimation();
daRx.Duration = duration;
daRx.To = 600;//绿色小球变速运动
DoubleAnimationUsingKeyFrames dakGx = new DoubleAnimationUsingKeyFrames();
dakGx.Duration = duration;
SplineDoubleKeyFrame kfG = new SplineDoubleKeyFrame(600, KeyTime.FromPercent(1.0));
kfG.KeySpline = new KeySpline(1, 0, 0, 1);
dakGx.KeyFrames.Add(kfG);//蓝色小球变速运行
DoubleAnimationUsingKeyFrames dakBx = new DoubleAnimationUsingKeyFrames();
dakBx.Duration = duration;
SplineDoubleKeyFrame kfB = new SplineDoubleKeyFrame(600, KeyTime.FromPercent(1.0));
kfB.KeySpline = new KeySpline(0, 1, 1, 0);
dakBx.KeyFrames.Add(kfB);//创建场景
Storyboard storyboard = new Storyboard();Storyboard.SetTargetName(daRx, "ttR");
Storyboard.SetTargetProperty(daRx, new PropertyPath(TranslateTransform.XProperty));Storyboard.SetTargetName(dakGx, "ttG");
Storyboard.SetTargetProperty(dakGx, new PropertyPath(TranslateTransform.XProperty));Storyboard.SetTargetName(dakBx, "ttB");
Storyboard.SetTargetProperty(dakBx, new PropertyPath(TranslateTransform.XProperty));storyboard.Duration = duration;
storyboard.Children.Add(daRx);
storyboard.Children.Add(dakGx);
storyboard.Children.Add(dakBx);storyboard.Begin(this);
storyboard.Completed += (a, b) => { MessageBox.Show(ttR.X.ToString()); };

前台XAML方式实现

  <!--按钮--><Button Content="Go!" Grid.Column="1" Grid.RowSpan="3"><Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard><Storyboard Duration="0:0:0:6"><!--红色小球动画--><DoubleAnimation Storyboard.TargetProperty="X"Storyboard.TargetName="ttR"To="400"Duration="0:0:0:6" /><!--绿色小球动画--><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="X"Storyboard.TargetName="ttG"Duration="0:0:0:6" ><SplineDoubleKeyFrame KeyTime="0:0:0:6" Value="400" KeySpline="1,0,0,1"/></DoubleAnimationUsingKeyFrames><!--蓝色小球动画--><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="X"Storyboard.TargetName="ttB"Duration="0:0:0:6" ><SplineDoubleKeyFrame KeyTime="0:0:0:6" Value="400" KeySpline="0,1,1,0"/></DoubleAnimationUsingKeyFrames></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers></Button>