wpf动画——缓动动画Animation Easing

在wpf或者silverlight中，经常用到Storyboard来完成一些动画的效果，本例将说明使用缓动函数关联动画 Animation Easing的方法：

---

1.新建一个wpf应用程序(silverlight亦可)，xaml简单修改布局如下：

 

<Window x:Class="WpfApplication45.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas x:Name="LayoutRoot">

    </Canvas>
</Window>

 

后代cs如下：

    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            Ellipse e1 = new Ellipse();
            e1.Width = e1.Height = 50;
            e1.Fill = new SolidColorBrush(Colors.Blue);
            this.LayoutRoot.Children.Add(e1);

            Storyboard sb = new Storyboard();

            DoubleAnimation da = new DoubleAnimation(50, 200, TimeSpan.FromSeconds(2));
            sb.Children.Add(da);
            Storyboard.SetTarget(da, e1);
            Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Top)"));

            sb.RepeatBehavior = RepeatBehavior.Forever;
            sb.Begin();
        }
    }

以上代码实现了一个简单的动画效果：一个蓝色的圆，由上往下做直线匀速运动，匀速的意思就是移动位置与时间成一次线性关系(速度不变)。

---

2.修改cs如下：

/// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            Ellipse e1 = new Ellipse();
            e1.Width = e1.Height = 50;
            e1.Fill = new SolidColorBrush(Colors.Blue);
            this.LayoutRoot.Children.Add(e1);

            Storyboard sb = new Storyboard();

            DoubleAnimationUsingKeyFrames ks = new DoubleAnimationUsingKeyFrames();

            EasingDoubleKeyFrame k1 = new EasingDoubleKeyFrame();
            k1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0));
            k1.Value = 50;
            k1.EasingFunction = new BackEase() { EasingMode = EasingMode.EaseInOut };

            EasingDoubleKeyFrame k2 = new EasingDoubleKeyFrame();
            k2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2));
            k2.Value = 200;
            k2.EasingFunction = new BackEase() { EasingMode = EasingMode.EaseInOut };

            ks.KeyFrames.Add(k1);
            ks.KeyFrames.Add(k2);
            sb.Children.Add(ks);
            Storyboard.SetTarget(ks, e1);
            Storyboard.SetTargetProperty(ks, new PropertyPath("(Canvas.Top)"));

            sb.RepeatBehavior = RepeatBehavior.Forever;
            sb.Begin();
        }
    }

这里使用到了EasingDoubleKeyFrame(与缓动函数相关联的关键帧)，
设定EasingFunction属性，为BackEase(倒退缓冲)，

设定EasingMode类型，为EaseInOut，

重新生成程序，观察运行效果，圆的运行发生了改变，位置与时间的函数如下(斜率为速度)：

 

类似的效果，xaml写法如下：

            <EasingDoubleKeyFrame KeyTime="0" Value="50">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BackEase EasingMode="EaseInOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="200">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BackEase EasingMode="EaseInOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>

 

---

类似的缓动函数效果还有很多：