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

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

XAML Code:

<UserControl x:Class="FallingBall.Page"      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"       Width="400" Height="300">      <!--小球动画轨迹-->      <UserControl.Resources>          <!--创建Storyborad-->          <Storyboard x:Name="fallDown" Storyboard.TargetName="ellipseFall">              <!--水平移动轨迹-->              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)">                  <!--下落水平移动-->                  <SplineDoubleKeyFrame KeyTime="0:0:5" Value="50"/>                  <!--弹起水平移动-->                  <SplineDoubleKeyFrame KeyTime="0:0:9" Value="100"/>              </DoubleAnimationUsingKeyFrames>              <!--垂直移动轨迹-->              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)">                  <!--下落垂直移动-->                  <SplineDoubleKeyFrame KeyTime="0:0:5" Value="250"/>                  <!--落地变形移动-->                  <SplineDoubleKeyFrame KeyTime="0:0:6" Value="255"/>                  <!--反弹变形移动-->                  <SplineDoubleKeyFrame KeyTime="0:0:7" Value="250"/>                  <!--反弹垂直移动-->                  <SplineDoubleKeyFrame KeyTime="0:0:9" Value="150"/>              </DoubleAnimationUsingKeyFrames>              <!--小球垂直变形-->              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height">                  <!--下落无变形-->                  <SplineDoubleKeyFrame KeyTime="0:0:5" Value="50"/>                  <!--压缩垂直变形-->                  <SplineDoubleKeyFrame KeyTime="0:0:6" Value="45"/>                  <!--反弹垂直变形-->                  <SplineDoubleKeyFrame KeyTime="0:0:7" Value="50"/>              </DoubleAnimationUsingKeyFrames>              <!--小球水平变形-->              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width">                  <!--下落无变形-->                  <SplineDoubleKeyFrame KeyTime="0:0:5" Value="50"/>                  <!--压缩水平变形-->                  <SplineDoubleKeyFrame KeyTime="0:0:6" Value="55"/>                  <!--反弹水平变形-->                  <SplineDoubleKeyFrame KeyTime="0:0:7" Value="50"/>              </DoubleAnimationUsingKeyFrames>              <!--光点移动轨迹-->              <PointAnimationUsingKeyFrames Storyboard.TargetName="ellipseBrush"                                             Storyboard.TargetProperty="GradientOrigin">                  <!--落地光点移动-->                  <LinearPointKeyFrame KeyTime="0:0:5" Value="0.6,0.1"></LinearPointKeyFrame>                  <!--反弹光点移动-->                  <LinearPointKeyFrame KeyTime="0:0:9" Value="0.3,0.1"></LinearPointKeyFrame>              </PointAnimationUsingKeyFrames>          </Storyboard>      </UserControl.Resources>        <Grid x:Name="LayoutRoot" Background="White">          <Canvas>              <!--创建小球-->              <Ellipse x:Name="ellipseFall" Width="50" Height="50">                  <Ellipse.Fill>                      <!--创建渐变产生光点效果-->                      <RadialGradientBrush x:Name="ellipseBrush" RadiusX="1" RadiusY="1" GradientOrigin="1,0.5">                          <GradientStop Color="White" Offset="0"></GradientStop>                          <GradientStop Color="Blue" Offset="1"></GradientStop>                      </RadialGradientBrush>                  </Ellipse.Fill>              </Ellipse>              <!--创建地平线-->              <Path stroke="Black" 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 下次要搞一个汽车人变形动画～～