WPF动画的使用

前言

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

1、Animatable

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

继承

Animatable

2、DoubleAnimation 类

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

cs 复制代码

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变形，而非Button
    this.tt.BeginAnimation(TranslateTransform.XProperty, daX);
    this.tt.BeginAnimation(TranslateTransform.YProperty, daY);
}

3、DoubleAnimationUsingPath

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

cs 复制代码

//从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 段的内插方法。

cs 复制代码

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、场景动画

并行执行的一组动画。

以交互方式控制情节提要，可控制的情节提要可以暂停、恢复、查找、停止和删除。

数据绑定和对时间线进行动画处理。

后台代码方式实现

cs 复制代码

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方式实现

html 复制代码

  <!--按钮-->
        <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>