Silverlight 中的轮播效果

• 下载演示项目和源代码 - 2.15 MB

引言

本文解释了如何在 Silverlight 中编写旋转木马动画效果。这种动画在 Flash 和 Dojo 等工具中已经存在了很长时间，但随着 Microsoft Silverlight 的出现，它不再是一个谜。本文深入探讨了编写这种效果所涉及的几何学的复杂性。

背景

读者应基本熟悉 Silverlight 编程、基础三维几何以及一些关于 Storyboard 的知识。

Using the Code

该应用程序由一个主页面组成，其中有一个旋转的缩略图旋转木马。当用户将鼠标悬停在任何旋转的缩略图上时，动画会停止，并将当前缩略图设置为应用程序的背景。提供了滑块，可以加快或减慢缩略图的旋转速度，更改旋转轴，并将旋转的缩略图拉近或推远查看者。应用程序的右侧有一个缩略图，有助于深入理解该效果。

一点三维几何知识

在 Silverlight 中，每个派生自 UIElement 的类对象都有一个名为 Projection 的重要属性。在本文中，projection 被赋值给一个 PlaneProjection 对象，该对象执行所有的透视 3D 渲染。出于我们的目的，我们将处理 CenterOfRotationZ、RotationX、RotationY、RotationZ 属性。我们将从尝试理解 CenterOfRotationZ 属性开始。

从图 2 可以清楚地看出这意味着什么，即图像到 XYZ 轴中心的距离。一旦赋值了 CenterOfRotationZ ，就应该想象一个如图 2 所示的圆筒，圆筒的半径为 CenterOfRotationZ。

现在想象一下，像握住螺丝刀一样握住 Y 轴并旋转它（曲线 Y）。这样做会围绕 Y 轴旋转圆筒，并且附着在圆筒圆柱表面上的图像会随着圆筒一起旋转。如果握住 X 轴并旋转它（曲线 X），也会发生同样的事情，这种旋转类似于自行车油门转动以加速自行车。最后，对于曲线 Z 也有同样的描述。

注意：图像与 Z 轴的交点是图像的中心。

图 2 中的曲线 Y 旋转动作对应于更改图像的 RotationY 属性，图 2 中的曲线 X 旋转动作对应于更改图像的 RotationX 属性。

注意：这些值是角度，以度为单位。

让我用一个例子来解释。为此，我使用了应用程序右侧提供的图像（图 3）和滑块，如下所示。

一些基本约定

• 移动 CZ 滑块相当于移动 CenterOfRotationZ
• 移动 RX 滑块相当于 RotationX
• 移动 RY 滑块相当于 RotationY
• 移动 RZ 滑块相当于 RotationZ
• 稍微移动一下 CZ 滑块，这将使图像在 Z 轴上移动一定的距离， say 'a'

现在需要想象一个如图 2 所示的圆筒。移动 RY 滑块将在圆筒表面上旋转图像。

将 RY 滑块重置回其起始位置。将 RX 滑块从其最左侧位置稍微移动一点。图 2 中的圆筒将向前倾斜朝向用户，即顶部圆面将朝向查看者，底部圆面将远离查看者。附着在圆筒圆柱表面上的图像将向前倾斜。移动 RY 滑块将在倾斜圆筒的（圆柱）表面周围旋转图像。这样就可以轻松看到图像为何会旋转。

主效果

本文中的主要效果是让 8 个图像处于同一位置，在设计时它们会重叠在一起。在运行时，每个图像都被分配一个单独的 PlaneProjection 对象，该对象具有相同的 CenterOfRotationZ (-250) 属性，并且为每个图像分配一个特定的 RotationY ，如下所示。

plProj.RotationY = j * (360.0 / dCount);

dCount 是图像的数量（=8）。

这会将所有缩略图以均匀间隔的方式显示在圆柱形圆筒表面上（请参见图 2）。现在我们可以开始动画了。动画只是永无止境地旋转圆筒。一个 DoubleAnimation 对象被分配给每个缩略图，它将目标设置为每个缩略图的 PlaneProjection.RotationYProperty 属性。

dlAni[j] = new DoubleAnimation();
dlAni[j].By = 360;
nSpeed = (int)sliderSpeed.Value;
dlAni[j].Duration = TimeSpan.FromMilliseconds(nSpeed);
dlAni[j].RepeatBehavior = RepeatBehavior.Forever;

Storyboard.SetTarget(dlAni[j], plProj);
Storyboard.SetTargetProperty(dlAni[j], 
    new PropertyPath(PlaneProjection.RotationYProperty));
stBoard.Children.Add(dlAni[j]);

因此，每个图像都设置为围绕 Y 轴旋转（图 2 中的曲线 Y）。要完成旋转木马效果，剩下的就是：

stBoard.Begin();

围绕 Y 轴的旋转速度由另一个滑块控制，该滑块更改分配给每个缩略图的 DoubleAnimation 对象的持续时间。

显示轴

提供“显示轴”按钮是为了让查看者在玩滑块时可以参考图 2。“显示轴”按钮用于一个 Storyboard 动画，该动画在图像（图 2）在所有 X、Y 和 Z 轴上旋转直到达到最终位置之前，会执行动画。同样，“隐藏轴”按钮也通过动画隐藏图像。