对于开发人员来说,他们每天面对的都是一串一串无聊的代码行。而且程序出来后实现的效果也是比较单一的。但是应用上SilverLight后,其效果就会发生很大的变化。在这里我们就会为大家详细分析一下有关SilverLight动画缓冲的相关概念。#t#
SilverLight动画缓冲设计的目的是可以让你创建和使用多种特殊的动画效果,包括以下会介绍的反弹或叫做“跳跃”效果(bouncing or "spring" effects)。Silverlight 3.0在命名空间System.Windows.Media.Animation namespace下内置了许多缓冲功能。
使用动画缓冲功能可以让你很容易地让对象产生很真实的动画效果而不用你自己去研究物理学。
举个例子,如果你想让你的动画产生一个很真实的“弹跳”,你或者可以自己研究一下物理学然后为它写个程序,或者使用内置的弹跳缓冲(bounce easing)功能,你可以通过使用animation标签的的新的子标签EasingFunction来实现它。
考虑一下这么一个情况。在Silverlight中,如果你想让一个椭圆产生从屏幕顶部到底部的动画,你需要使用一个< Storyboard>对象,里面包含一个< DoubleAnimation>指向椭圆的"Top"属性。要是想给这个动画增加缓冲,你只需要简单地往里添加SilverLight动画缓冲功能的定义,如下所示:
- < Canvas x:Name="LayoutRoot"
Background="White">- < Canvas.Resources>
- < Storyboard x:Name="bounce">
- < DoubleAnimation From="0" To="300"
Duration="0:0:10"- Storyboard.TargetName="myCircle"
- Storyboard.TargetProperty="(Canvas.Top)">
- < DoubleAnimation.EasingFunction>
- < BounceEase Bounces="10"
EasingMode="EaseOut" Bounciness="2">- < /BounceEase>
- < /DoubleAnimation.EasingFunction>
- < /DoubleAnimation>
- < /Storyboard>
- < /Canvas.Resources>
- < Ellipse x:Name="myCircle" Width="40"
Height="40" Fill="Red" Canvas.Top="0"
Canvas.Left="50">< /Ellipse>- < /Canvas>
加粗的EasingFunction的定义包含了你想要使用的缓冲的类型,不同的类型有不同的参数来定义缓冲。举个例子,要模拟一个物体落下时的反弹,你只要指定开始和结束时的位置(Top从'From'0到'To'300),然后使用缓冲来定义弹跳的行为。在这个例子中是被设置成弹跳10次,而且是在动画结束的时候开始弹跳(缓冲模式'EasingMode'被设置成'EaseOut')。
注意使用SilverLight动画缓冲可以有3种方式:EaseIn,在这种模式下会在动画结束的时候开始缓冲;EaseOut,动画开始的时候开始缓冲;EaseInOut,两种情况下都会发生。
所以如果你想象一个弹跳效果就像我们之前看到的在一个值上使用动画让它从0变到100,并使用弹跳缓冲,会发生以下的情况:
EaseIn:值从0开始向100移动,在到达100之前返回到0,再向100移动,再返回,每次都更接近100,直到到达100.
EaseOut:值从0开始向100移动,到达100后往0的方向移动,到达0之前返回100,再反弹,每次都离0更远,直到停止在100上。
EaseInOut:是前2个的奇怪组合,在值超过一半之前按EaseIn的方式弹跳,超过一半后按EaseOut的方式弹跳。
你可以看到在我们之前的例子里我们使用了EaseOut的模式,因为它模拟球落下时的弹跳有更自然地效果。
所有内置的SilverLight动画缓冲都可以在System.Windows.Media.Animation命名空间下找到。以下的描述是基于EaseIn的模式。但是你可以从它推知EaseOut和EaseInOut中的效果。虽然下面有对这些功能的简单的介绍,但是每个缓冲模式之间的区别可能是非常细微的。最好能够试验一下来体会。