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>

 


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

 

 

posted on 2012-09-11 18:01 影天 阅读(...) 评论(...) 编辑 收藏

导航

公告