WPF Advanced Animations

发表于 | 分类于

创建动画的指导原则

创建动画首先就要为动画选择合适的属性。指导原则如下：

  • 如果希望使用动画显隐元素，使用Opacity
  • 如果希望动态改变元素位置，可以考虑Canvas面板（有Canvas.Left和Canvas.Top），开销很小。也可以通过ThicknessAnimation类动态改变Margin和Padding等属性。
  • 动画最常用的属性是渲染变换。如TranslateTransform/RotateTransform/ScaleTransform等。
  • 动态改变元素表面一般修改Brush的属性。可以使用ColorAnimation改变颜色或其他动画对象来变换更复杂画刷的属性。

动态变换

每个元素都能以两种不同的方式使用变换：RenderTransform和LayoutTransform属性。RenderTransform效率更高。

使用变换的第一步是定义变换。例如需要按钮旋转。：

1
2
3
4
5
<Button Content="Her Button">
	<RenderTransform>
    	<RotateTransform></RotateTransform>
    </RenderTransform>
</Button>

然后添加触发器

1
2
3
4
5
6
7
8
<EventTrigger RoutedEvent="Button.MouseEnter">
                    <BeginStoryboard Name="rotateStoryboardBegin">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
                                             To="360" Duration="0:0:0.8" RepeatBehavior="Forever"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>

改变，使用LayoutTransform属性可以推开其他按钮

完整代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<Style TargetType="{x:Type Button}">
           <Setter Property="HorizontalAlignment" Value="Center"/>
           <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
           <Setter Property="Padding" Value="20,15"/>
           <Setter Property="Margin" Value="2"/>
           <Setter Property="RenderTransform">
               <Setter.Value>
                   <RotateTransform></RotateTransform>
               </Setter.Value>
           </Setter>
           <Style.Triggers>
               <EventTrigger RoutedEvent="Button.MouseEnter">
                   <BeginStoryboard Name="rotateStoryboardBegin">
                       <Storyboard>
                           <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
                                            To="360" Duration="0:0:0.8" RepeatBehavior="Forever"></DoubleAnimation>
                       </Storyboard>
                   </BeginStoryboard>
               </EventTrigger>
               <EventTrigger RoutedEvent="Button.MouseLeave">
                   <EventTrigger.Actions>
                       <BeginStoryboard>
                           <Storyboard>
                               <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
                                                Duration="0:0:0.2"></DoubleAnimation>
                           </Storyboard>
                       </BeginStoryboard>
                   </EventTrigger.Actions>
               </EventTrigger>
           </Style.Triggers>
       </Style>

动态改变多个变换

组合使用变换 TransformGroup 对象设置LayoutTransform或者RenderTransform

例如文档内容旋转/扩展 并且快速淡入到视图中。

1
2
3
4
5
6
<Border.RenderTransform>
	<TransformGroup>
    	<ScaleTransform></ScaleTransform>
        <RotateTransform></RotateTransform>
    </TransformGroup>
</Border.RenderTransform>

通过指定数字偏移值，动画与两个变换交互

1
2
3
4
5
6
7
<DoubleAnimation Storyboard.TargetName="element" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" From="0" To="1" 
                 Duration="0:0:2" AccelerationRatio="1">
</DoubleAnimation>

<DoubleAnimation Storyboard.TargetName="element"
                 Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                 From="0" To="1" Duration="0:0:2" AccelerationRatio="1"></DoubleAnimation>

下面的动画位于相同的故事板中，用于旋转内容

1
2
3
4
<DoubleAnimation Storyboard.TargetName="element"
                 Storyboard.TargetProperty="RenderTransform.Childeren[1].Angle"
                 From="70" To="0" Duration="0:0:2">
</DoubleAnimation>

此例细节

1
2
3
4
5
6
7
8
9
10
11
12
<Window.Triggers>
	<EventTrigger RoutedEvent="Window.Loaded">
    	<EventTrigger.Actions>
        	<BeginStoryboard>
            	<Storyboard SpeedRatio="1.5">
                	<DoubleAnimation>
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Window.Triggers>

16.2 关键帧动画

skipp

23