在动画效果领域,Flash和Dojo等工具已经长期占据主导地位。然而,随着MicrosoftSilverlight的加入,实现复杂的动画效果不再是难题。本文将深入探讨在Silverlight中编码此类效果的几何学细节。
读者需要对Silverlight编程和基本的三维几何学有一定的了解,并且熟悉Storyboard的概念。
应用程序由一个主页组成,主页上有一个旋转的缩略图旋转木马。当用户将鼠标悬停在旋转的缩略图上时,动画会停止,并将当前缩略图设置为应用程序的背景。应用程序提供了滑块,可以加快或减慢缩略图的旋转速度,改变旋转轴,以及使旋转的缩略图更接近或远离观察者。应用程序的右侧有一个缩略图,有助于深入理解效果。
在Silverlight中,每个从UIElement派生的类的对象都有一个重要的属性,称为Projection。在本文中,Projection被分配给一个PlaneProjection对象,该对象负责所有的透视3D渲染。对于目的,将处理CenterOfRotationZ、RotationX、RotationY、RotationZ属性。将从尝试理解CenterOfRotationZ属性开始。
从图2中可以明显看出这意味着什么,即图像与XYZ轴中心的距离。一旦分配了CenterOfRotationZ,就应该想象一个如图2所示的鼓,鼓的半径是CenterOfRotationZ。
现在想象一下,握住Y轴并像握住螺丝刀一样旋转它(曲线Y)。这样做会使鼓围绕Y轴旋转,附着在鼓的圆柱表面上的图像也会随之旋转。如果握住X轴并旋转(曲线X),旋转方式类似于旋转自行车的加速器以加速自行车。最后,对于曲线Z的描述也是如此。
注意:图像与Z轴的交点是图像的中心。曲线Y(见图2)的旋转动作对应于改变图像的RotationY属性,曲线X(见图2)的旋转动作对应于改变图像的RotationX属性。
注意:这些值是以度为单位的角度。
让用一个例子来解释。为此,使用了图3中的图像和应用程序右侧提供的滑块,如下所示:
移动CZ滑块对应于移动CenterOfRotationZ。移动RX滑块对应于RotationX。移动RY滑块对应于RotationY。移动RZ滑块对应于RotationZ。
稍微移动CZ滑块,这将使图像在Z轴上移动一定量,比如'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;
int 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)旋转。完成Carousel效果所需的一切就是:
stBoard.Begin();