WPF桌面端开发12-动画

发表于 | 分类于
动画

前言

WPF中有三种动画类型：

  • 线性插值
  • 关键帧
  • 路径动画

这三种动画都是在System.Windows.Media.Animation命名空间中

其中路径动画有三种：

  • MatrixAnimationUsingPath
  • PointAnimationUsingPath
  • DoubleAnimationUsingPath

本文主要说线性插值动画。

XAML实现动画

BeginStoryboard、 Storyboard 和 DoubleAnimation 的解释：

1）BeginStoryboard：启动 Storyboard，并将动画分发给动画的目标对象和属性；
2）Storyboard：为容器的子动画提供对象和属性目标信息的容器时间线；
3）DoubleAnimation：在指定的时间内，使用线性内擦，对两个目标值之间的 System.Double 属性值进行动画处理。

XAML实现动画过程

  1. 设置动画目标对象
  2. 设置动画执行的触发器:控制动画播放的基本条件
  3. 在触发器中注册路由事件：指定对象的哪个事件激活触发器
  4. 激活触发器条件下开始故事版执行
  5. 故事版中添加动画，指定动画的5个必要属性

故事版动画

1
2
3
4
5
6
7
8
9
10
11
12
<Border Name="Bd" Width="100" Height="100" Background="Cyan" Canvas.Left="200" Canvas.Top="120">
  <Border.Triggers>
    <EventTrigger RoutedEvent="Border.MouseDown">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Opacity">
          </DoubleAnimation>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Border.Triggers>
</Border>

指定动画的必要属性

  1. From：动画属性的起始值
  2. To:动画属性的结束值
  3. Duration:动画执行所需的时间
  4. TargetName：执行这个动画的对象名称
  5. TargetProperty：执行这个动画的对象的属性是哪个属性

可选属性

  1. AutoReverse：设置是否往返播放
  2. RepeatBehavior：设置播放的次数枚举RepeatBehavior.Forever设置永久重复

在 XAML中应用和启动Storyboard的最简单的方法是使用事件触发器。

创建一个BeginStoryboard对象并将演示图板与其关联。BeginStoryboard 是一种应用和启动 Storyboard 的 TriggerAction。

1
2
3
4
<Storyboard>
  <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Opacity">
  </DoubleAnimation>
</Storyboard>

使用C#实现WPF动画

WPF动画实现的基本过程

  1. 先创建故事版
  2. 选择动画并创建动画
  3. 设置动画的5个必要属性
  4. 将动画添加到故事版中
  5. 通过故事版的方法来启动动画

平移动画

1、创建故事板

故事版就类似于是剧本，里面基本上要确定所有动画的播放规则属性。

1
2
// 创建故事版 Storyboard
Storyboard story = new Storyboard();

2、创建故事内容情节

类似于故事情节, 选择动画的性质

1
2
// 平移动画
DoubleAnimation move = new DoubleAnimation();

3、故事内容情节完善

五个属性：

3.1 From：起始值

1
move.From = 0;

3.2 To：结束值

1
move.To = 500;

3.3 Duration：表示动画执行一次所需要的时间

1
move.Duration = new Duration(TimeSpan.FromSeconds(3));

注意：

以上三点，可以合写在第二步中，如下：

1
DoubleAnimation move = new DoubleAnimation(0,500,new Duration(TimeSpan.FromSeconds(3)));

补充：

1
2
3
4
5
6
// 翻转动画
move.AutoReverse = true;
// 重复动画
move.RepeatBehavior = RepeatBehavior.Forever;
// 重置动画
move.FillBehavior = FillBehavior.HoldEnd;

3.4 Storyboard.SetTarget：设置动画执行的对象

1
Storyboard.SetTarget(move, this);

3.5 Storyboard.SetTargetProperty：设置动画的执行属性

1
Storyboard.SetTargetProperty(move, new PropertyPath("(Canvas.Left)"));

4、将故事情节添加到故事版中

1
story.Children.Add(move);

5、选择合适的机会开始执行动画

1
story.Begin();

整体示例

1
2
3
4
5
6
7
8
9
10
11
12
13
Storyboard story = new Storyboard();
DoubleAnimation da = new DoubleAnimation();
da.From = 1.0;
da.To = 0.0;
//可选属性：是否往返播放
da.AutoReverse = true;
//da.RepeatBehavior = RepeatBehavior.Forever;
da.RepeatBehavior = new RepeatBehavior(2);
da.Duration = new Duration(TimeSpan.FromSeconds(3));
Storyboard.SetTarget(da, br);
Storyboard.SetTargetProperty(da, new PropertyPath("Opacity"));
story.Children.Add(da);
story.Begin();

渐变动画

1
2
3
4
5
6
7
8
// 渐变动画
ColorAnimation color = new ColorAnimation(Colors.Orange,Colors.GreenYellow,new Duration(TimeSpan.FromSeconds(3)));
Storyboard.SetTarget(color, Bor);
Storyboard.SetTargetProperty(color, new PropertyPath("(Border.Background).(SolidColorBrush.Color)"));
color.AutoReverse = true;
color.RepeatBehavior = RepeatBehavior.Forever;
// 添加进故事版
story.Children.Add(color);

旋转动画

1
2
3
4
5
6
7
8
9
10
11
// 旋转动画
DoubleAnimation rotate = new DoubleAnimation(0, 360, new Duration(TimeSpan.FromSeconds(3)));
Storyboard.SetTarget(rotate, Bor); Storyboard.SetTargetProperty(rotate, new PropertyPath("RenderTransform.Angle")); 
story.Children.Add(rotate);
rotate.AutoReverse = true;
rotate.RepeatBehavior = RepeatBehavior.Forever;      
RotateTransform rotate1 = new RotateTransform();       
Bor.RenderTransform = rotate1;
Bor.RenderTransformOrigin = new Point(0.5,0.5);
// 添加进故事版
story.Children.Add(rotate);