Silverlight学习之线性插值动画

Silverlight动画分为线性插值动画和关键帧动画

线性动画包括DoubleAnimation.ColorAnimation和PointAnimation三种

通用属性

TargetName-目标名称
TargetProperty-目标属性
From-开始值
To-结束值
Duration-间隔时间
BeginTime-动画开始时间
RepeatBehavior-重复次数
重复次数:格式-次数+X.如1X,2X表示重复次数
一个时间段:格式-时:分:秒，如一个动画的Duration为2.5秒，将动画的RepeatBehavior属性设置为0：0：5,动画
将会重复两次
Forever：无限循环
FillBehavior-可以是动画播放结束后保持到当前位置(HoldEnd)，或者结束时恢复到起始位置（Stop）。默认为HoldEnd
SpeedRatio:播放动画的速度,默认为1，可以增加或减少
AutoReverse:播放完成后是否继续向后播放,如果设置为True,将回到动画开始播放的位置，False，停留到动画播放完的位置。默认为false

DoubleAnimation用于值为Double类型的属性,如图形的长宽等

<Ellipse Width="150" Height="50" Fill="Orange" x:Name="DoubleAnimation">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard x:Name="DoubleStoryboard">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="DoubleAnimation" Storyboard.TargetProperty="Height"
From="100" To="150" RepeatBehavior="0:0:2" Duration="0:0:1" SpeedRatio="2" FillBehavior="Stop" >
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>

</Ellipse>

效果 椭圆的高度从100到150



ColorAnimation用于值为Color类型的属性，如图形的Fill属性等

<Ellipse Width="150" Height="50" Fill="Orange" x:Name="ColorAnimation">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard x:Name="ColorStoryboard">
<Storyboard>
<ColorAnimation Storyboard.TargetName="ColorAnimation" Storyboard.TargetProperty="(Ellispe.Fill).(SolidBrush.Color)"
From="Black" To="Blue" Duration="0:0:2" BeginTime="0:0:0"
RepeatBehavior="2X" SpeedRatio="1" FillBehavior="HoldEnd">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>

效果 椭圆的填充颜色从黑色变为蓝色



PointAnimation 使用值为Point类型的如几何图形的Center属性等

<Path Fill="Blue" Margin="5">
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard x:Name="PointTestAnimation">
<Storyboard>
<PointAnimation Storyboard.TargetName="PointAnimation" Storyboard.TargetProperty="Center"
Duration="0:0:2" From="0,0" To="100,100" RepeatBehavior="2X" FillBehavior="Stop"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
<Path.Data>
<EllipseGeometry RadiusX="50" RadiusY="50" Center="150,150" x:Name="PointAnimation">
</EllipseGeometry>
</Path.Data>
</Path>

效果 一个上下跳动的椭圆



源码下载