Silverlight2 边学边练 之三 小球自由落体

终于看到动画章节了，本篇主要针对物体移动、变形和渐变移动进行练习。
完成小球自由落体慢镜实例，请大家多多拍砖，废话少说快快操练。

XAML Code:

<UserControl @H_874_29@x:@H_874_29@Class="fallingBall.Page"      @H_874_29@xmlns="http://scheR_507_11845@as.microsoft.com/winfx/2006/xaml/presentation"       @H_874_29@xmlns:@H_874_29@x="http://scheR_507_11845@as.microsoft.com/winfx/2006/xaml"       @H_874_29@Width="400" @H_874_29@Height="300">      <!--小球动画轨迹-->      <UserControl.resources>          <!--创建Storyborad-->          <Storyboard @H_874_29@x:@H_874_29@Name="fallDown" @H_874_29@Storyboard.TargetName="ellipsefall">              <!--水平移动轨迹-->              <DoubleAnimationUsingKeyFrames @H_874_29@Storyboard.TargetProperty="(Canvas.Left)">                  <!--下落水平移动-->                  <SplineDoubleKeyFrame @H_874_29@KeyTime="0:0:5" @H_874_29@Value="50"/>                  <!--弹起水平移动-->                  <SplineDoubleKeyFrame @H_874_29@KeyTime="0:0:9" @H_874_29@Value="100"/>              </DoubleAnimationUsingKeyFrames>              <!--垂直移动轨迹-->              <DoubleAnimationUsingKeyFrames @H_874_29@Storyboard.TargetProperty="(Canvas.Top)">                  <!--下落垂直移动-->                  <SplineDoubleKeyFrame @H_874_29@KeyTime="0:0:5" @H_874_29@Value="250"/>                  <!--落地变形移动-->                  <SplineDoubleKeyFrame @H_874_29@KeyTime="0:0:6" @H_874_29@Value="255"/>                  <!--反弹变形移动-->                  <SplineDoubleKeyFrame @H_874_29@KeyTime="0:0:7" @H_874_29@Value="250"/>                  <!--反弹垂直移动-->                  <SplineDoubleKeyFrame @H_874_29@KeyTime="0:0:9" @H_874_29@Value="150"/>              </DoubleAnimationUsingKeyFrames>              <!--小球垂直变形-->              <DoubleAnimationUsingKeyFrames @H_874_29@Storyboard.TargetProperty="Height">                  <!--下落无变形-->                  <SplineDoubleKeyFrame @H_874_29@KeyTime="0:0:5" @H_874_29@Value="50"/>                  <!--压缩垂直变形-->                  <SplineDoubleKeyFrame @H_874_29@KeyTime="0:0:6" @H_874_29@Value="45"/>                  <!--反弹垂直变形-->                  <SplineDoubleKeyFrame @H_874_29@KeyTime="0:0:7" @H_874_29@Value="50"/>              </DoubleAnimationUsingKeyFrames>              <!--小球水平变形-->              <DoubleAnimationUsingKeyFrames @H_874_29@Storyboard.TargetProperty="Width">                  <!--下落无变形-->                  <SplineDoubleKeyFrame @H_874_29@KeyTime="0:0:5" @H_874_29@Value="50"/>                  <!--压缩水平变形-->                  <SplineDoubleKeyFrame @H_874_29@KeyTime="0:0:6" @H_874_29@Value="55"/>                  <!--反弹水平变形-->                  <SplineDoubleKeyFrame @H_874_29@KeyTime="0:0:7" @H_874_29@Value="50"/>              </DoubleAnimationUsingKeyFrames>              <!--光点移动轨迹-->              <PointAnimationUsingKeyFrames @H_874_29@Storyboard.TargetName="ellipseBrush"                                             @H_874_29@Storyboard.TargetProperty="GradientOrigin">                  <!--落地光点移动-->                  <LinearPointKeyFrame @H_874_29@KeyTime="0:0:5" @H_874_29@Value="0.6,0.1"></LinearPointKeyFrame>                  <!--反弹光点移动-->                  <LinearPointKeyFrame @H_874_29@KeyTime="0:0:9" @H_874_29@Value="0.3,0.1"></LinearPointKeyFrame>              </PointAnimationUsingKeyFrames>          </Storyboard>      </UserControl.resources>        <Grid @H_874_29@x:@H_874_29@Name="LayoutRoot" @H_874_29@BACkground="White">          <Canvas>              <!--创建小球-->              <Ellipse @H_874_29@x:@H_874_29@Name="ellipsefall" @H_874_29@Width="50" @H_874_29@Height="50">                  <Ellipse.Fill>                      <!--创建渐变产生光点效果-->                      <RadialGradientBrush @H_874_29@x:@H_874_29@Name="ellipseBrush" @H_874_29@RadiusX="1" @H_874_29@RadiusY="1" @H_874_29@GradientOrigin="1,0.5">                          <GradientStop @H_874_29@Color="White" @H_874_29@Offset="0"></GradientStop>                          <GradientStop @H_874_29@Color="Blue" @H_874_29@Offset="1"></GradientStop>                      </RadialGradientBrush>                  </Ellipse.Fill>              </Ellipse>              <!--创建地平线-->              <Path @H_874_29@stroke="Black" @H_874_29@Data="M0,300 L400,300 Z"/>          </Canvas>      </Grid>    </UserControl>

C# Code：

namespace fallingBall  {      public partial class Page : UserControl      {          public Page()          {              InitializeComponent();              //开始动画              fallDown.begin();          }      }  }

效果图：

参考自《Pro Silverlight2 in C# 2008》CHAPTER 9 ■ ANIMATION 下次要搞一个汽车人变形动画～～