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>

 

效果 一个上下跳动的椭圆

 

 

源码下载