WPF动画

WPF动画是在一段时间内改变属性值的一种方式，它需要相应的数据类型的动画类，在System.Windows.Media.Animation名称空间中将会发现以下内容：

7个 "类型名+Animation类"  这些类使用插值动画。

22个 "类型名+AnimationUsingKeyFrames" 这些类使用关键帧动画。

3个 "类型名+AnimationUsingPath"类这类使用基于路径 的动画。（一般少用）

Animation类 实际上只有两种类型的动画，一种是在开始值和结束值之间以逐步增加的方式改变属性的动画（线性插值过程），另一种是从一个值突然变成另一个值的动画（关键帧动画）。而线性插值动画不一定能够实现关键帧动画，但是关键帧却能够实现线性插值动画，因为某些数据类型有关键帧动画类，但没有插值动画类。由此,WPF动画使用三种方法：线性插值、关键帧和路径

而实现动画需要具备故事版和触发器两个基本要素，Storyboard（故事版）是动画的基本单元，可以控制动画的暂停、播放、停止等操作，故事版需要指定TargetName（指定操作控件）和TargetProperty（指定操作控件的具体属性），而触发器将会触发故事版动画效果

实例动画设置在页面加载时实现，From是表示指定值在100开始，To是表示指定值到200时动画结束，Duration是动画执行一次的时间长度

<Window.Resources>

        <!--故事版：定义动画（数值线性插值动画）-->

        <Storyboard x:Key="button" TargetName="MyButton" TargetProperty="Width">

            <DoubleAnimation  From="100" To="200" Duration="0:0:1"/>

        </Storyboard>

</Window.Resources>

<Window.Triggers>

        <!--事件触发器-->

        <EventTrigger RoutedEvent="Window.Loaded">

            <EventTrigger.Actions>

                <BeginStoryboard Storyboard="{StaticResource button}"/>

            </EventTrigger.Actions>

        </EventTrigger>

</Window.Triggers>

<Grid>

<Button x:Name="MyButton" Width="150" Height="80" Content="button" FontSize="40" Background="Red"></Button>

</Grid>

未执行时的效果

执行效果

关键帧动画 可以在任意多个的目标属性值之间进行渐变，根据目标属性值差异产生更多复杂的动画效果

动画元素

DoubleAnimationUsingKeyFrames 属于Double类型的属性都可以使用它

ColorAnimationUsingKeyFrames 属于Color类型的属性都可以使用它

实例：

<Page.Resources>

        <Storyboard x:Key="retancle">

            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="dou" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:4">

                <DiscreteDoubleKeyFrame KeyTime="0:0:0:5" Value="50"></DiscreteDoubleKeyFrame>

                <DiscreteDoubleKeyFrame KeyTime="0:0:0:2" Value="100"></DiscreteDoubleKeyFrame>

                <DiscreteDoubleKeyFrame KeyTime="0:0:0:3" Value="200"></DiscreteDoubleKeyFrame>

                <DiscreteDoubleKeyFrame KeyTime="0:0:0:4" Value="300"></DiscreteDoubleKeyFrame>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

    </Page.Resources>

    <Page.Triggers>

        <!--事件触发器-->

        <EventTrigger RoutedEvent="Window.Loaded">

            <EventTrigger.Actions>

                <BeginStoryboard Storyboard="{StaticResource retancle}"/>

            </EventTrigger.Actions>

        </EventTrigger>

    </Page.Triggers>

    <Canvas>

        <Rectangle x:Name="dou" Width="100" Height="100" Fill="Green"></Rectangle>

</Canvas>

 

最后执行效果