Silverlight开发历程—关键帧动画

概述每一个关键帧都支持三种不同的补间类型，分别为 Linear（线性）、Discrete（离散）、Spliend（多键），如下图： DoubleAnimationUsingKeyFrames动画 关键帧有两个重要的属性，分别是Value和KeyTime，他们的作用是在KeyTime指定的某个时间点对Value进行控制。如下例子： <UserControl.Resources> <Sto

每一个关键帧都支持三种不同的补间类型，分别为 linear（线性）、discrete（离散）、SplIEnd（多键），如下图：

DoubleAnimationUsingKeyFrames动画

关键帧有两个重要的属性，分别是Value和KeyTime，他们的作用是在KeyTime指定的某个时间点对Value进行控制。如下例子：

<UserControl.Resources>        <Storyboard x:name="linearStoryboard">            <!--声明关键帧动画作用为Translatetransform的 X属性-->            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0"  Storyboard.Targetname="ellipse1" Storyboard.TargetProperty="(UIElement.Rendertransform).(transformGroup.Children)[0].(Translatetransform.X)">                <!--线形补间-->                <linearDoubleKeyFrame Value="500" KeyTime="0:0:02" />            </DoubleAnimationUsingKeyFrames>        </Storyboard>        <Storyboard x:name="discreteStoryboard">            <!--声明关键帧动画作用为Translatetransform的 X属性-->            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0"  Storyboard.Targetname="ellipse2" Storyboard.TargetProperty="(UIElement.Rendertransform).(transformGroup.Children)[0].(Translatetransform.X)">                <!--离散补间-->                <discreteDoubleKeyFrame Value="500" KeyTime="0:0:2.5"  />            </DoubleAnimationUsingKeyFrames>        </Storyboard>        <Storyboard x:name="Splinestoryboard">            <!--声明关键帧动画作用为Translatetransform的 X属性-->            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0"  Storyboard.Targetname="ellipse3" Storyboard.TargetProperty="(UIElement.Rendertransform).(transformGroup.Children)[0].(Translatetransform.X)">                <!--多键补间-->                <SplineDoubleKeyFrame Value="500" KeyTime="0:0:4.5" KeySpline="0.6,0.0 0.9,0.0" />            </DoubleAnimationUsingKeyFrames>        </Storyboard>    </UserControl.Resources>    <Canvas x:name="LayoutRoot" Background="White">        <!--第一个圆-->        <Ellipse x:name="ellipse1" WIDth="70" Height="70" Canvas.left="0" Canvas.top="24">            <Ellipse.Fill>                <RadialGradIEntBrush Center="0.5,0.5">                    <GradIEntStop Offset="0" color="#FFECFfdb" />                    <GradIEntStop Offset="1.0" color="#FF252825" />                    <GradIEntStop Offset="0.5" color="#FF4D6D25" />                </RadialGradIEntBrush>            </Ellipse.Fill>            <Ellipse.Rendertransform>                <transformGroup>                    <Translatetransform />                </transformGroup>            </Ellipse.Rendertransform>        </Ellipse>        <!--第二个圆-->        <Ellipse x:name="ellipse2" WIDth="70" Height="70" Canvas.left="1" Canvas.top="118">            <Ellipse.Fill>                <RadialGradIEntBrush Center="0.5,0.5">                    <GradIEntStop Offset="0" color="#FFECFfdb" />                    <GradIEntStop Offset="1.0" color="#FF252825" />                    <GradIEntStop Offset="0.5" color="#FF4D6D25" />                </RadialGradIEntBrush>            </Ellipse.Fill>            <Ellipse.Rendertransform>                <transformGroup>                    <Translatetransform />                </transformGroup>            </Ellipse.Rendertransform>        </Ellipse>        <!--第三个圆-->        <Ellipse x:name="ellipse3" WIDth="70" Height="70" Canvas.left="2" Canvas.top="210">            <Ellipse.Fill>                <RadialGradIEntBrush Center="0.5,0.5">                    <GradIEntStop Offset="0" color="#FFECFfdb" />                    <GradIEntStop Offset="1.0" color="#FF252825" />                    <GradIEntStop Offset="0.5" color="#FF4D6D25" />                </RadialGradIEntBrush>            </Ellipse.Fill>            <Ellipse.Rendertransform>                <transformGroup>                    <Translatetransform  />                </transformGroup>            </Ellipse.Rendertransform>        </Ellipse>        <button Canvas.left="80" Canvas.top="348" Content="播放" Height="23" name="btn_player" Click="btn_player_Click"  WIDth="75" />    </Canvas>

运行结果：

在上面的例子中用到了三种不同的帧补间类形，下图分别是三种不同类型补间的运动轨迹：

例子中分别使用了线性、离散、多键 三种不同的补间，很显然线性补间产生了一个最基本的水平运动，运动的过程速度是均匀的。离散补间直接从起始点跳 到了结束点，中间没有任何动画效果 。而多键补间是在由起始到结束的位置然后产生了一个加 速的动画。

colorAnimationUsingKeyFrames 动画

colorAnimationUsingKeyFrames关键帧是 *** 作color属性的变化，下面例子是对color的值进行变化的：

<StackPanel Background="White" x:name="myStackPanel"            Loaded="Start_Animation">    <StackPanel.Resources>        <Storyboard x:name="colorStoryboard">            <colorAnimationUsingKeyFrames BeginTime="00:00:00"             Storyboard.Targetname="myStackPanel"             Storyboard.TargetProperty="(Panel.Background).(SolIDcolorBrush.color)">                <linearcolorKeyFrame Value="Red" KeyTime="00:00:02" />                <discretecolorKeyFrame Value="Yellow" KeyTime="00:00:2.5" />                <SplinecolorKeyFrame Value="Green" KeyTime="00:00:4.5" KeySpline="0.6,0.00" />            </colorAnimationUsingKeyFrames>        </Storyboard>    </StackPanel.Resources></StackPanel>

PointAnimationUsingKeyFrames动画
下面例子是控制EllipesGeometry的Center属性来让小球在三个点之间来回跳动。如下代码：

 <UserControl.Resources>        <Storyboard x:name="storyboard1"  autoReverse="True" RepeatBehavior="Forever">            <PointAnimationUsingKeyFrames  Storyboard.Targetname="ellipseGeometry1" Storyboard.TargetProperty="EllipseGeometry.Center" BeginTime="0:0:0">                <linearPointKeyFrame Value="75,93" KeyTime="0:0:0" ></linearPointKeyFrame>                <SplinePointKeyFrame Value="295,260" KeyTime="0:0:2" />                <linearPointKeyFrame Value="525,92" KeyTime="0:0:3" ></linearPointKeyFrame>            </PointAnimationUsingKeyFrames>        </Storyboard>    </UserControl.Resources>    <Canvas x:name="LayoutRoot" Background="White">        <TextBlock Text="A" FontSize="40" FontFamily="Arial Black" Canvas.left="58" Canvas.top="22" Height="44" WIDth="32" />        <TextBlock Text="B" FontSize="40" FontFamily="Arial Black" Canvas.left="275" Canvas.top="277" Height="44" WIDth="30" />        <TextBlock Text="C" FontSize="40" FontFamily="Arial Black" Canvas.left="499" Canvas.top="22" Height="44" WIDth="32" />        <Rectangle WIDth="75" Height="10" Fill="Green" Canvas.left="39" Canvas.top="64"></Rectangle>        <Rectangle WIDth="75" Height="10" Fill="Green" Canvas.left="255" Canvas.top="277"></Rectangle>        <Rectangle WIDth="75" Height="10" Fill="Green" Canvas.left="482" Canvas.top="64"></Rectangle>        <!--第一个圆-->        <Path>            <Path.Data>                <EllipseGeometry x:name="ellipseGeometry1" Center="75,93" RadiusX="20" RadiusY="20">                </EllipseGeometry>            </Path.Data>            <Path.Fill>                <RadialGradIEntBrush Center="0.5,0.5">                    <GradIEntStop Offset="0" color="#FFECFfdb" />                    <GradIEntStop Offset="1.0" color="#FF252825" />                    <GradIEntStop Offset="0.5" color="#FF4D6D25" />                </RadialGradIEntBrush>            </Path.Fill>        </Path>        <button Canvas.left="255" Canvas.top="348" Content="运动" Height="23" name="btn_Run" Click="btn_Run_Click" WIDth="75" />    </Canvas>

运行结果：

总结

以上是内存溢出为你收集整理的Silverlight开发历程—关键帧动画全部内容，希望文章能够帮你解决Silverlight开发历程—关键帧动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。