WPF动画

一、动画的本质

在一个时间段内对象位置、角度、颜色、透明度等属性值的连续变化。

注意：用来制作动画的属性必须是依赖属性。

二、动画的构成

Storyboard：故事板，是BeginAnimation（）方法的XAML等价物，动画的基本单元，通过故事板将动画指定到合适的元素和属性，故事板是增强的时间线，可以用来分组多个动画。控制动画的播放、暂停、停止等基础操作，需要指定TargetName和TargetProperty这两个属性。

布局控件（如：Border） - 事件触发器（Trigger） - 开始播放故事板（BeginStoryboard）- 故事板（Storyboard）- 动画（Animation）

三、动画的类型

共三种：简单动画，关键帧动画，沿路径运动的动画。

以DoubleAnimationBase的派生类为例详细说明：

DoubleAnimation：

DoubleAnimationUsingKeyFrames：

DoubleAnimationUsingPath：

1.简单线性动画DoubleAnimation

所谓“简单线性动画”就是指由变化起点、变化终点、变化幅度、变化时间四个要素构成的。

变化时间（Duration属性）：数据类型为Duration（0：0：0：3）或（00：00：03）

变化终点（To属性）：

变化幅度（By属性）：

变化起点（From属性）：

<Button x:Name="bt0" Grid.Row="3" Width="50" Height="50" HorizontalAlignment="Left" Content="Button" >
            <Button.RenderTransform>
                <TranslateTransform x:Name="xx"/>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="xx" 
					                        Storyboard.TargetProperty="X"
					                        BeginTime="00:00:00" Duration="00:00:3" From="0" To="200" AutoReverse="True" RepeatBehavior="Forever"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>

以上代码实现的效果是一个button按钮沿着x轴移动到目标位置并无限往返。其中：

AutoReverse属性表示自动返回；

RepeatBehavior属性表示重复动画次数。

RenderTransform：是Button的属性，属性值是名为xx的TranslateTransform对象，改变这个对象的X和Y值就会让Button的显示位置（而不是真实位置）变化。

2.关键帧动画DoubleAnimationUsingKeyFrames

动画执行到某个时间点时，某个属性应该达到什么样的值。

3.路径动画DoubleAnimationUsingPath

让目标沿着给定的一条路径移动。

四、实现颜色渐变动画

实现颜色渐变动画有三种方式：

1.通过改变渐变线性刷（LinearGradientBrush）的偏移量（Offset）来实现背景颜色变化的动画

定义一个Border控件：

<Border x:Name="border" BorderBrush="Black" BorderThickness="1" Grid.Row="3"
                Width="50" Height="50" >
            <Border.Background >
                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="{StaticResource NormalColor}" Offset="0"/>
                    <GradientStop Color="{StaticResource WhiteColor}" Offset="0.5"/>
                </LinearGradientBrush>
            </Border.Background>
        </Border>

这里的Color属性可自行设置。 

添加动画，在启动界面时自动触发渐变效果：

<Grid.Triggers >
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard >
                        <DoubleAnimation Duration="0:0:0:3"  To="1" From="0"
                                         Storyboard.TargetName="border"
                                         Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Offset)"
                                         RepeatBehavior="Forever"
                                         AutoReverse="True"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>

2.通过改变透明度来实现背景颜色渐变动画

定义一个Border控件：

<Border x:Name="bd1" BorderBrush="Gray" BorderThickness="2"
                Background="Purple" Width="50" Height="50" Grid.Row="3" VerticalAlignment="Center"
                HorizontalAlignment="Right" >

添加动画，在启动界面时自动触发渐变效果：

<Grid.Triggers >
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard x:Name="sb1" AutoReverse="True" >
                        <DoubleAnimation Duration="0:0:0:3" To="0" From="1"
                                         Storyboard.TargetName="bd1"
                                         Storyboard.TargetProperty="Opacity"
                                         RepeatBehavior="Forever"
                                         AutoReverse="True"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>

3.改变 color

五、动画特效（Effect）

WPF的控件效果主要通过Effect来实现，而Effect有：

DropshadowEffect（投影效果）和BlurEffect（模糊效果）。

1.DropshadowEffect（投影效果）

Direction属性：决定了阴影的方向，阴影为逆时针方向（0-360）。

ShadowDepth属性：决定了阴影的投影长度，数值越大，投影越长，值为0时为四周投影。

BlurRadius属性：模糊半径。

Color属性：设置阴影的颜色。

Opacity属性：阴影的透明度。

2.BlurEffect（模糊效果）

Radius属性：模糊效果，值越大，越模糊。

KernelType属性：有Box效果，如马赛克；有Gaussian效果，玻璃模糊。

以下是通过改变透明度实现动画效果的例子：

 XAML代码如下：

       <Border BorderBrush="Green" BorderThickness="10" Grid.Row="3" Margin="372,15,146,15" x:Name="bd9">
            <Border.Effect>
                <!--<DropShadowEffect BlurRadius="15" ShadowDepth="0" Color="Black" Opacity="20" Direction="0"/>-->
                <BlurEffect Radius="20" KernelType="Gaussian"/>
            </Border.Effect>
        </Border>
        <Grid.Triggers >
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0:5" To="0.1" From="1"
                                         Storyboard.TargetName="bd9"
                                         Storyboard.TargetProperty="Opacity"
                                         AutoReverse="True"
                                         RepeatBehavior="Forever"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>

注意：当对Border使用Effect的时候，最好不要在Border内部添加TextBlock等展示元素，否则会造成textblock模糊。