Silverlight之动画（8）

Silverlight动画

源代码下载

1. 简介

动画是相对于静止而言的。能够让视觉感觉在动的东西。

Silverl中只能对对值类型为 Double、Color或 Point 的属性执行简单的动画处理。

2. 使 rectangle1矩形逐渐进入视野并从视野中逐渐消失

1） 定义矩形Rectangle

rectangle1矩形定义

<Rectangle Height="100" Name="rectangle1" Stroke="Black" StrokeThickness="1" Width="200" Fill="Blue"/>

2） 定义动画Storyboard

<!--使 rectangle1矩形逐渐进入视野并从视野中逐渐消失-->

<Storyboard x:Name="str1">

<DoubleAnimation Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1"/>

</Storyboard>

3） 用DoubleAnimation对矩形属性Opacity进行动画处理。

4） 启动动画

str1.Begin();

3. 开始、停止、暂停和继续动画播放

Storyboard 提供多种方法，这些方法允许您控制Storyboard动画的播放，

Begin开始、Stop停止、Pause暂停和Resume继续。

4. 控制动画的开始时间

顾名思义，使用BeginTime属性可以指定动画对象活动开始点的时间。

5. 动画类型

Silverlight 提供两大类动画类型，From/To/By 动画和关键帧动画。下表说明这些动画类别及其

属性类型	对应的基本 (From/To/By) 动画	对应的关键帧动画
Color	ColorAnimation	ColorAnimationUsingKeyFrames
Double	DoubleAnimation	DoubleAnimationUsingKeyFrames
Point	PointAnimation	PointAnimationUsingKeyFrames
Object	无	ObjectAnimationUsingKeyFrames

Duration、AutoReverse和RepeatBehavior是三个常用的计时属性。

Duration完成动画的时间格式{0：0：1}时：分：秒

AutoReverse属性指定时间线在到达其Duration的终点后是否倒退。如果将此动画属性设置为true，则动画在到达其Duration的终点后将倒退，即从其终止值向其起始值反向播放。默认情况下，该属性为false。

RepeatBehavior重复播放次数。

举例关键关键帧动画：

<Storyboard x:Name="str5">

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="Fill" AutoReverse="True" Duration="0:0:6" RepeatBehavior="forever">

<DiscreteObjectKeyFrame KeyTime="0:0:3">

<DiscreteObjectKeyFrame.Value>

<LinearGradientBrush>

<GradientStop Color="Red" Offset="0"></GradientStop>

<GradientStop Color="Blue" Offset="1"></GradientStop>

</LinearGradientBrush>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

<DiscreteObjectKeyFrame KeyTime="0:0:4">

<DiscreteObjectKeyFrame.Value>

<LinearGradientBrush>

<GradientStop Color="Blue" Offset="0"></GradientStop>

<GradientStop Color="Black" Offset="1"></GradientStop>

</LinearGradientBrush>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

<DiscreteObjectKeyFrame KeyTime="0:0:5">

<DiscreteObjectKeyFrame.Value>

<LinearGradientBrush>

<GradientStop Color="Yellow" Offset="0"></GradientStop>

<GradientStop Color="Black" Offset="1"></GradientStop>

</LinearGradientBrush>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

6. 对属性应用动画

1） 定义椭圆

<Ellipse Height="52" Name="ellipse1" Stroke="Black" StrokeThickness="1" Width="109">

<Ellipse.Fill>

<SolidColorBrush x:Name="scb1" Color="Red"></SolidColorBrush>

</Ellipse.Fill>

</Ellipse>

2） 定义动画对Color属性

<!--对属性进行动画处理-->

<Storyboard x:Name="str3">

<ColorAnimation Storyboard.TargetName="scb1" Storyboard.TargetProperty="Color" From="Red" To="Black" Duration="0:0:1" AutoReverse="True" RepeatBehavior="forever"></ColorAnimation>

</Storyboard>

3） 播放动画

str3.Begin();

7. 对变换应用动画

1） 定义矩形

<Ellipse Height="52" Name="ellipse1" Stroke="Black" StrokeThickness="1" Width="109">

<Ellipse.RenderTransform>

<RotateTransform x:Name="rtf1" CenterX="20"CenterY="20" Angle="10"></RotateTransform>

</Ellipse.RenderTransform>

</Ellipse>

2） 定义动画

<!--对变换进行动画处理-->

<Storyboard x:Name="str4">

<DoubleAnimation Storyboard.TargetName="rtf1" Storyboard.TargetProperty="Angle" AutoReverse="True" From="90" To="180" RepeatBehavior="forever"></DoubleAnimation>

</Storyboard>

3） 播放动画

Str4.Begin();

8. 动画完成事件

str1.Completed += new EventHandler(str1_Completed);

void str1_Completed(objectsender, EventArgs e)

{

MessageBox.Show("动画1完成");

}

9. 缓动函数

1） 定义椭圆

<Ellipse Height="39" Name="ellipse3" Stroke="Black" StrokeThickness="1" Fill="Blue" Width="132"/>

2） 定义动画

<!--动画函数用法-->

<Storyboard x:Name="str6">

<DoubleAnimation Storyboard.TargetName="ellipse3" Storyboard.TargetProperty="Height" From="30" To="200" AutoReverse="True" RepeatBehavior="forever">

<DoubleAnimation.EasingFunction>

<!--<BounceEaseBounces="2" EasingMode="EaseOut"

Bounciness="2" />-->

<CircleEaseEasingMode="EaseOut" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

3） 播放动画

str6.Begin();

说明：

除了通过从 EasingFunctionBase 继承来创建您自己的自定义缓动函数外，您还可以使用运行时提供的若干缓动函数之一来创建常见效果。

• BackEase：在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动。

• BounceEase：创建弹回效果。

• CircleEase：创建使用循环函数加速和/或减速的动画。

• CubicEase：创建使用公式 f(t) = t3 加速和/或减速的动画。

• ElasticEase：创建表示弹簧在停止前来回振荡的动画。

• ExponentialEase：创建使用指数公式加速和/或减速的动画。

• PowerEase：创建使用公式 f(t) = tp（其中，p 等于 Power 属性）加速和/或减速的动画。

• QuadraticEase：创建使用公式 f(t) = t2 加速和/或减速的动画。

• QuarticEase：创建使用公式 f(t) = t4 加速和/或减速的动画。

• QuinticEase：创建使用公式 f(t) = t5 加速和/或减速的动画。

• SineEase：创建使用正弦公式加速和/或减速的动画。

使用EasingMode属性更改缓动函数的行为方式
•EaseIn：内插遵循与缓动函数相关联的算术公式。
•EaseOut：内插遵循 100% 内插减去与缓动函数相关联的公式输出。
•EaseInOut：内插将 EaseIn 用于动画的前半部分，将 EaseOut 用于动画的后半部分。

源代码下载