Silverlight中的旋转木马效果实现

动画效果领域,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();
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485