Silverlight 教程：如何制作一个球被投掷和弹跳的动画

Mike Dobbles

3.75/5 (3投票s)

2008年7月23日

CPOL

4分钟阅读

62088

480

如何使用 Silverlight 创建一个球被投掷和弹跳的动画

下载源代码 - 18.07 KB

在本教程结束时，您将能够创建一个球被抛出并在地面上反弹的动画。您可以在此处查看示例。

引言

本教程将向您展示如何创建球在屏幕上被抛出、落地并反弹的动画。这有用吗？嗯，不如我之前在 The Code Project 上发布的导航栏文章有用，但我找到了在我的网站上使用它的方法，也许您也可以。我曾设想一个基于 Silverlight 的购物车，其中您选择的任何产品都会被抛到屏幕上，落入购物车，然后在其中弹跳，但那将留待另一篇文章！与此同时，如果您别无所图，您也可以使用本文来进一步了解 Silverlight 动画 Storyboard 的内部工作原理。

分步教程

在 Expression Blend 中创建一个新项目。
绘制一个椭圆并将其命名为“ball”。
创建弹跳效果的关键在于认识到，在物理学中，运动中的球的垂直运动与水平运动完全无关。我们将为这些独立的运动分别创建两个 storyboard，然后进入 XAML 将它们合并成一个 storyboard。
创建一个名为“Bounce”的新 storyboard。
在时间 0 处为球记录一个 keyframe 以捕获当前位置。然后将时间轴条拖到 1 秒位置。
现在直接将红色球向上拖动。并记录一个关键帧。在 1 秒处。点击播放，您应该看到球以平稳的速率直接向上移动然后停止。
现在让我们添加一些重力。单击 storyboard 的第二个 keyframe 气泡。设置如下所示的缓动效果。这将使球在达到运动顶点时减慢速度。通过播放 storyboard 来确认这一点。确认后，关闭 storyboard。
创建一个名为 Horizontal 的 storyboard。在 0 秒处创建一个 keyframe，然后将时间轴设置为 2 秒。将球水平向右拖动，并在 2 秒处创建一个 keyframe。关闭 storyboard。
现在让我们看一下 Bounce storyboard 的 XAML。除非您完美地垂直拖动球，否则 storyboard 中将有两个部分，一个用于动画化 x 方向，一个用于动画化 y 方向。您可以通过查找以 TranslateTransform.Y 或 TranslateTransform.X 结尾的行来区分它们。删除处理 X 运动的部分。

现在让我们让球返回到其起始点。

这是之前的 XAML

   <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
	Storyboard.TargetName="ball" 
	Storyboard.TargetProperty=
	"(UIElement.RenderTransform).(TransformGroup.Children)
	[3].(TranslateTransform.Y)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-206">
     <SplineDoubleKeyFrame.KeySpline>
      <KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>
     </SplineDoubleKeyFrame.KeySpline>
    </SplineDoubleKeyFrame>
   </DoubleAnimationUsingKeyFrames>

请注意，它在 1 秒内将球从 0 的位置移动到 -206 的位置。ControlPoint1 的值为 0,1 表示我们将以全速开始并在运动结束时达到最低速度。为了让球向下返回，我们将复制第二个 keyframe，将 key 的时间更改为 2 秒，将动画的目标更改为 0，并反转 ControlPoint2 定义的缓动方向。结果如下

   <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
	Storyboard.TargetName="ball" 
	Storyboard.TargetProperty=
	"(UIElement.RenderTransform).(TransformGroup.Children)
	[3].(TranslateTransform.Y)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-206">
     <SplineDoubleKeyFrame.KeySpline>
      <KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>
     </SplineDoubleKeyFrame.KeySpline>
    </SplineDoubleKeyFrame>
    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0">
     <SplineDoubleKeyFrame.KeySpline>
      <KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
     </SplineDoubleKeyFrame.KeySpline>
    </SplineDoubleKeyFrame>
   </DoubleAnimationUsingKeyFrames>

选择 bounce storyboard 并点击播放。您应该看到球上下移动，就像被向上和向下抛掷一样。

现在让我们添加 X 运动。看看我们之前制作的第二个名为 horizontal 的 storyboard。复制以 TranslateTransform.X 结尾的 DoubleAnimationUsingKeyFrames 部分，并将其粘贴到 Bounce storyboard 中。从设计视图中打开 bounce storyboard 并点击播放。您应该看到球以平滑的弧线移动，就像被抛掷一样。

  <Storyboard RepeatBehavior="Forever" x:Name="Bounce">
   <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
	Storyboard.TargetName="ball" 
	Storyboard.TargetProperty=
	"(UIElement.RenderTransform).(TransformGroup.Children)
	[3].(TranslateTransform.X)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="297"/>
    <SplineDoubleKeyFrame KeyTime="00:00:03" Value="320"/>
   </DoubleAnimationUsingKeyFrames>
   <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
	Storyboard.TargetName="ball" 
	Storyboard.TargetProperty=
	"(UIElement.RenderTransform).(TransformGroup.Children)
	[3].(TranslateTransform.Y)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-206">
     <SplineDoubleKeyFrame.KeySpline>
      <KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>
     </SplineDoubleKeyFrame.KeySpline>
    </SplineDoubleKeyFrame>
    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0">
     <SplineDoubleKeyFrame.KeySpline>
      <KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
     </SplineDoubleKeyFrame.KeySpline>
    </SplineDoubleKeyFrame>
    <SplineDoubleKeyFrame KeyTime="00:00:02.5" Value="-20">
     <SplineDoubleKeyFrame.KeySpline>
      <KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>
     </SplineDoubleKeyFrame.KeySpline>
    </SplineDoubleKeyFrame>
    <SplineDoubleKeyFrame KeyTime="00:00:03" Value="0">
     <SplineDoubleKeyFrame.KeySpline>
      <KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
     </SplineDoubleKeyFrame.KeySpline>
    </SplineDoubleKeyFrame>
   </DoubleAnimationUsingKeyFrames>
  </Storyboard>

要添加弹跳，我们只需遵循相同的模式并添加其他关键帧。对于以 TranslateTransform.X 结尾的 DoubleAnimationUsingKeyFrames 部分，通过添加以下 XAML，在 3 秒处添加一个关键帧
```
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="320"/>
```
此 XAML 将球在第三秒结束时移动到的位置设置为 320，比前一个关键帧结束的位置向右移动了 22。对于弹跳的垂直部分，复制以 TranslateTransform.Y 结尾的 DoubleAnimationUsingKeyFrames 部分的最后两个关键帧。将弹跳顶点关键帧的时间设置为 2.5 秒，高度设置为 -20。在 3 秒时让弹跳返回到 0。这会添加以下 XAML
```
<SplineDoubleKeyFrame KeyTime="00:00:02.5" Value="-20">
<SplineDoubleKeyFrame.KeySpline>
<KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>
</SplineDoubleKeyFrame.KeySpline>
</SplineDoubleKeyFrame>
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="0">
<SplineDoubleKeyFrame.KeySpline>
<KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
</SplineDoubleKeyFrame.KeySpline>
```
要使抛掷反复进行，请向 Storyboard 添加一个 RepeatBehavior。
```
<Storyboard RepeatBehavior="Forever" x:Name="Bounce">
```

最后，让我们添加代码以在页面加载时开始抛掷。

public Page() 
{ 
// Required to initialize variables 
InitializeComponent(); 
Loaded += new RoutedEventHandler(PageLoaded); 
} 

void PageLoaded(object sender, RoutedEventArgs e) 
{ 
Bounce.Begin(); 
}
}

就是这样。按 F5，您应该会看到球被抛出并弹跳。

历史

2008 年 7 月 23 日：首次发布