分享

缓动曲线

 牛人的尾巴 2016-06-06

缓动曲线

(2012-07-17 16:12:54)
标签:

杂谈

    WPF和Silverlight中的缓动曲线可以用于现实对象运动的物理仿真,如加减速运动、自由落体运动、振荡等,这对设计教学中有关动画很有用。当选择动画故事板中某关键帧时,在【属性】面板中就会出现“缓动”设置栏,如图2-127。

缓动曲线

图2-127


    “缓动”栏中有3项选择,KeySpline(图2-127左图,贝塞尔曲线)、EasingFunction(图2-127右图,缓动函数曲线)、HoldIn(取消缓动设置,停止在目标点)。

    其中贝塞尔曲线可以只调整曲线首尾的2个点就能改变对象运动状态。

    其中缓动函数曲线EasingFunction分三种模式,In、Out和InOut(或者表示为EaseIn、EaseOut和EaseInOut),每种模式11类曲线共33个曲线,图2-127没有全部显示。

    三种模式的含义是:

    EaseIn:动画开始就根据曲线运动。

    EaseOut:同样的曲线,但运动规律和EaseIn相反。

    EaseInOut:动画运动被分成两部分,前一部分同EaseIn,后一部分同EaseOut。

    11类曲线分别是Back倒退曲线、Bounce弹跳曲线、Circle圆曲线、Cubic立方体曲线、Elastic振荡曲线、Exponential指数曲线、Power乘方曲线、Quadratic平方曲线、Quartic四次方曲线、Quintic五次方曲线、Sine正弦曲线。其中:

    倒退曲线有可调整参数Amplitude(double类型),幅度调整,默认是1。此曲线使动画的运动先后退,然后再前进,有点像停在坡上的汽车,启动时先后退了一点,然后再爬坡。

    弹跳曲线有2个可调整参数:Bounces(int类型)和Bounciness(double类型),前者表示弹跳次数,默认值为3,后者影响弹跳速度和幅度,值越大越慢,也会影响弹跳次数,默认值为2。可以用此曲线模拟自由落体运动。

    圆曲线可以用来模拟加速、减速运动。

    立方体曲线也可以用来模拟加速、减速运动,按3次方规律变化。

    振荡曲线有2个可调整参数Oscillations(int类型)和Springiness(double类型),前者表示振荡的次数,默认值为3,后者和物体的弹性有关,值小弹性好,默认值为3。可以模拟弹簧运动。

    指数曲线有1个可调整参数Exponent(double类型),也可以用来模拟加速、减速运动,按指数规律变化,默认值2。

    乘方曲线有1个可调整参数Power(double类型),也可以用来模拟加速、减速运动,按指数规律变化,默认值2,和指数曲线类似。

    平方曲线也可以用来模拟加速、减速运动,按2次方规律变化。

    四次方曲线也可以用来模拟加速、减速运动,按4次方规律变化。

    五次方曲线也可以用来模拟加速、减速运动,按5次方规律变化。

    正弦曲线使动画按正弦曲线规律变化。

33个曲线可以用于动画的模拟仿真设计,比如加速运动、减速运动、上抛运动、自由落体运动、振荡运功等等,使动画达到更真实自然的效果。下面利用缓动曲线设计了1个动画示例,可以看到模拟仿真效果。

    示例1:模拟小球自由落体运动的动画

缓动曲线

图2-128

1)首先在MainWindow.xaml【设计面板】中创建小球(命名ellipse),图2-128的小球从空中落到地面设定3秒。

2)选中小球,在故事板(Storyboard10秒处创建1个关键帧,鼠标单击3秒处,移动小球到地面(用键盘的箭头移动,或者在【属性】面板的“转换”栏的“转换”选项卡内改变Y坐标值),这时自动在3秒处建立关键帧。

3)选中3秒关键帧,在【属性】面板出现“缓动”栏,选择Bounce Out(弹跳曲线,在终点处弹跳),如图2-128右侧。故事板的RepeatBehavior默认1次。播放故事板,小球从空中落下速度越来越快,当小球到达地面后会弹跳3次后落地,比较形象的模拟了真实球体自由落体过程。其中参数Bounces可改变弹跳次数,Bounciness改变弹跳幅度。

4)选中小球,设计触发器“ellipse.MouseLeftButtonDown,引起“Storyboard1”再次“Begin”,这样当小球停止时,鼠标左键单击小球,自由落体过程会重复一次。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多