最近看了cloudgramer的图片空间展示,来写点特效的心思便又开始活动起来了,平常写JAVA挺枯燥的,总是想弄点好玩的来刺激一下神经,呵呵,有点不务正业的味道。虽然目前JS,Flash没有出3D的API,但是我们还是可以利用它们坐出很多类似3D效果的,好了,不多废话,先看一个效果:
旋转3D展示厅展品1(雅典娜的黄金圣斗士)
程序说明:
这个程序可以大致分为两部分来看,一个是黄金圣衣的3D环绕效果,一个是雅典娜的图片立体旋转效果。
程序原理:
椭圆环绕效果的第一步当然是加载图片,让其按一个椭圆形状排列。为了演示方便,我将图片嵌入到swf文件中。这一步所需要的参数有:
private var cx:Number;//椭圆中心点x坐标
private var cy:Number;//椭圆中心点y坐标
private var disx:Number;//椭圆在x 轴上的截距
private var disy:Number;//椭圆在y 轴上的截距
private var angle:Number;//椭圆曲线上的点到中心点的直线与X轴的角度
按照椭圆的公式:
x = cx+ disx*cos (angle)
y = cy + disy* sin (angle)
我们可以很容易的实现椭圆排列效果。实现代码如下:
angle = 360 / numImage;//把360平分
for (var i:uint = 0; i < numImage; i++ ) {
var sprite:Sprite = imageContainer.getChildAt(i) as Sprite;
sprite.x = cosD(speed + angle*i) * disx;
sprite.y = sinD(speed + angle * i) * disy;
//trace("x:" + sprite.x + " y:" + sprite.y);
}
接下来就是让图片随着圆圈移动了,这个更简单,不断的增长angle的值就好了。
如果图片就这样按着椭圆轨迹移动,虽然可以看,但是效果远没有那么真实。这时我们就需要对元件进行一些透视处理了。
透视处理的技巧有很多,这里我们只关注两点,就是大小与不透明度。
当物体远离时很变小,会变得模糊,当物体离近时会变大,很变得清晰。
显然,我们是要改变一下元件的scaleX,scaleY与alpah属性了,改变多少呢,我们在这里可以做一下简单的处理。
假设物体移动的距离范围为0~2*disy,也就是椭圆的短轴长度,那么物体的实际位置距离应该是sprite.y+disy了。那么我们可以把(sprite.y+disy)/(2*disy) 当作物体的scale与alpha占实际大小的比率。
但这样一来还会产生问题,也就是当物体移动或者接近到-sprite.y的时候,那么scale与alpha值就为0或者接近为0了,这时候物体就看不见了。我们希望看到的是物体在远端的效果,也希望看到物体很靠近我们时要变得比实际来的大,这里就需要两个参数,一个是muchscale,就是用来设定物体显示出来时的基本倍数,一个是lowest,就是用来规定物体到最小应该为多大,不透明度应该为多少(当然,是按比例来算)。于是我们可以得到下面的控制物体变化的公式:
var scale:Number = (sprite.y + disy) / (2 * disy);
sprite[prop] = scale * muchscale + lowest;
完成这一步以后,黄金圣衣的3D环绕效果就成了。看着像是在Z轴上移动,其实我们只是调整了物体在平面上的x,y,scale与alpha值。
接下来做雅典娜的图片旋转效果
如图所示,我们把图片分为两个三角形0,1,2与1,3,2。所谓的图片的3D旋转效果其实就是两个三角形的位置偏移而形成的。在 ActionScript 中,可以使用 Graphics.drawTriangles()
方法执行位图转换,因为 3D 模型是通过空间中的一组三角形来表示的。
图片的偏移效果1:
图片的偏移效果2:
好了,以上就是全部效果的实现过程。接下来会向大家展示更多的3D旋转效果的。
程序源代码:
技术参考:http://help.adobe.com/zh_CN/ActionScript/3.0_ProgrammingAS3/WS509D19BB-239B-4489-B965-844DDA611AE7.html