WPF 动画

一、故事板
1、Storyboard（故事板）是动画的基本单元。
2、Storyboard控制动画的播放，暂停，停止，操作。

    3、需要指定TargetName和TargetProperty属性。
4、动画类型声明过后，需要使用EveryTrigger（事件触发器）触发

DockPanel面板的Dock都是附加属性。

二、线性插值动画

1、DoubleAnimation（属于Double类型的属性都可以使用它产生线性插值动画）
2、ColorAnimation（作用于属性为Color类型对象的线性插值动画，用于改变对象的填充颜色）

线性插值动画对象属性：

动画播放控制属性：

三、关键帧动画

1、关键帧动画根据目标属性值之间的差异产生各种动画效果。

2、一个关键帧动画可以在任意多个的目标属性值之间进行渐变。

3关键帧动画可以产生更多更复杂的动画效果。

关键帧动画XAMl代码：

<Window x:Class="Wpf动画.test4"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="test4" Height="550" Width="550" Foreground="{x:Null}" WindowStyle="None" ResizeMode="NoResize" AllowsTransparency="True" Background="{x:Null}" Topmost="True" WindowStartupLocation="CenterScreen">

    <Window.Resources>

        <Storyboard x:Key="fanzhuan">

            <!--翻转位置0.5,0.5表示中心翻转-->

            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="grid">

                <EasingPointKeyFrame KeyTime="0" Value="0.5,0.5"/>

            </PointAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid" >

                <!--  KeyTime 表示时间间隔，value表示从哪里翻转-1表示反面 -0.8表示侧一点 -->

                <EasingDoubleKeyFrame KeyTime="0" Value="-1">

                    <EasingDoubleKeyFrame.EasingFunction>

                        <CubicEase EasingMode="EaseIn"/>

                    </EasingDoubleKeyFrame.EasingFunction>

                </EasingDoubleKeyFrame>

                <!--0:0:1是timespan 翻转完全的时间间隔-->

                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">

                    <EasingDoubleKeyFrame.EasingFunction>

                        <CubicEase EasingMode="EaseIn"/>

                    </EasingDoubleKeyFrame.EasingFunction>

                </EasingDoubleKeyFrame>

                <!-- 0:0:1是timespan 翻转完全的时间间隔-->

                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">

                    <EasingDoubleKeyFrame.EasingFunction>

                        <CubicEase EasingMode="EaseOut"/>

                    </EasingDoubleKeyFrame.EasingFunction>

                </EasingDoubleKeyFrame>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

    </Window.Resources>

    <Window.Triggers>

        <EventTrigger RoutedEvent="FrameworkElement.Loaded">

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

        </EventTrigger>

    </Window.Triggers>

    <Grid x:Name="grid">

        <!--必须需要能翻转属性-->

        <Grid.RenderTransform>

            <TransformGroup>

                <ScaleTransform/>

                <SkewTransform/>

                <RotateTransform/>

                <TranslateTransform/>

            </TransformGroup>

        </Grid.RenderTransform>

        <Grid.Background>

            <ImageBrush Stretch="UniformToFill" ImageSource="t011b49c6ecfc91c4a0.jpg"></ImageBrush>

        </Grid.Background>

        <Button Content="翻转" Name="FZ" HorizontalAlignment="Left" Margin="418,0,0,0" VerticalAlignment="Top" Width="52">

            <Button.Triggers>

                <!--反转动画-->

                <EventTrigger RoutedEvent="Button.Click">

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

                </EventTrigger>

            </Button.Triggers>

        </Button>

        <Button x:Name="button" Content="关闭" HorizontalAlignment="Left" Margin="473,0,-0.2,0" VerticalAlignment="Top" Width="52" Click="Button_Click"></Button>

    </Grid>

</Window>