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>

 

---

類似的緩動函數效果還有很多：