wpf缓动动画小例子

这两天因为项目需求需要做个缓动动画，在网上看了很多例子，但对于没有介入过的人来说，网上的一些教程很难看得非常明白，所以这里想跟大家分享一下我的学习过程，缓动动画的详细了解可以参考



http://blog.csdn.net/ghj1976/article/details/5389086这里列出了很多博客可以进一步了解。

我这里主要贴出其具体如何用的，看下面这个小例子：

<Window x:Class="WpfApplication2.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication2"
        mc:Ignorable="d"
        Title="Window2" Height="500" Width="500" Loaded="Window_Loaded">
    <Window.Resources>
        <Storyboard x:Key="UsingBackEaseAnimation"  Storyboard.TargetName="qqqq" Storyboard.TargetProperty="Height">
            <!--<DoubleAnimation From="0" To="100" Duration="0:0:3">-->
            <DoubleAnimationUsingKeyFrames >
                <EasingDoubleKeyFrame KeyTime="0" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseInOut" Amplitude="0"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="200">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseInOut" Amplitude="0"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Grid>
        <Button Name="button" Height="20" Width="20" Click="button_Click" Margin="0,216,446,234" HorizontalAlignment="Right"/>
        <Grid  VerticalAlignment="Bottom" Margin="0,0,0,0" Name="qqqq" Height="200">
            <Image Source="img/背景色1.png" Height="200" />
        </Grid>
    </Grid>
</Window>

这里是在前台应用缓动动画的方法，“ Storyboard.TargetName”为这个动画具体应用于哪个控件，“Storyboard.TargetProperty”这个属性表示动画是应用在哪个属性上，我这里设置的是grid “qqqq”的高度，且在后台需要做些操作如下:

  Storyboard std = this.Resources["UsingBackEaseAnimation"] as Storyboard;
            std.Begin();

这样动画才能开始起效果.

下面是在后台设置:

 <Grid  VerticalAlignment="Bottom" Margin="0,0,0,0" Name="qqqq" Height="200">
            <Image Source="img/背景色1.png" Height="200" />
        </Grid>

前台只需要加这样一个grid，其他的须在后台完成：

  Storyboard storybd = new Storyboard();

            DoubleAnimationUsingKeyFrames kFs = new DoubleAnimationUsingKeyFrames();

            EasingDoubleKeyFrame k1 = new EasingDoubleKeyFrame();
            k1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0));
            k1.Value = 200;
            k1.EasingFunction = new BackEase() { EasingMode = EasingMode.EaseOut, Amplitude = 0 };

            EasingDoubleKeyFrame k2 = new EasingDoubleKeyFrame();
            k2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2));
            k2.Value = 0;
            k2.EasingFunction = new BackEase() { EasingMode = EasingMode.EaseOut, Amplitude = 0 };

            kFs.KeyFrames.Add(k1);
            kFs.KeyFrames.Add(k2);
            storybd.Children.Add(kFs);
            Storyboard.SetTarget(kFs, qqqq);
            Storyboard.SetTargetProperty(kFs, new PropertyPath("(Height)"));

            storybd.RepeatBehavior = RepeatBehavior.Forever;
            storybd.Begin();

这就是前台或后台应用缓动动画的过程，希望能帮到初学者