flash特效原理：螺旋效果 （3）

    最近对高数起了很大的兴趣，掏钱买了一本高等数学。发现里面的真是一份宝物，最近看了一个人的博客。关于高等数学的知识，对螺旋线的形态原来不仅仅是一种。过去尝试制作的图形也是一种的方式，现在提及这种螺旋线不是围绕着圆柱形状旋转，而是圆锥。对无错，圆锥体。又是让人觉得不爽的数学，不过细心发觉，这种形态看起来更加像自然界的龙卷风。看起来，很美。

 

我们之前所做的做法围绕着圆柱的形式旋转，因此螺旋点分布都是落在圆的轨迹上。而圆锥的螺旋形式，同样是落在圆的轨迹上，不过这个是圆是随着他的圆的半径变化而变化。 从这张图说明，螺旋点的分布会随着高度而收缩。最后落在顶端上。

好吧，你一定是高兴来不及尝试写一下这种的实现方式，而相对上一次的代码，仅仅改动的地方很少。

看看下面的效果如何：

 

 

image.x=Math.cos(anglePer*i)*(R-i*R/num);//改变半径的变化 image.z=Math.sin(anglePer*i)*(R-i*R/num);//改变半径

而我们所需要改变仅仅是他是半径。半径趋向应该是向圆锥顶点减少，向它的底增加，因此使用这种递减的方式进行模拟出这种效果。

 

image.x=Math.cos(anglePer*i)*(i*R/num);//改变半径的变化 image.z=Math.sin(anglePer*i)*(i*R/num);//改变半径

 

我们定义一个R，作为半径作为圆锥体的底圆。而这个是固定的大小的。随着他（i*R/num）变量变化，会趋向于R.接近R。或者（i*R/(num-1)）

而这种方式也会让效果发生改变，从图中可以看出，螺旋点分布会随着半径的增大而扩展分布。

 

 package { import flash.display.MovieClip; import flash.events.*; import flash.geom.PerspectiveProjection; import flash.geom.Matrix3D; import flash.geom.Vector3D; import flash.display.DisplayObject; public class Main extends MovieClip { private var num:int=50;//一共有多少个螺旋点 private var numOfRotations:int=3;//圈数 private var anglePer:Number = ((Math.PI*2) *numOfRotations) / num; private var R:int=400;//半径 private var h:int=0;//高度 private var contain:MovieClip=new MovieClip();//容器 private var list:Array=new Array(); public function Main() { init(); creat3D(); } private function init():void { root.transform.perspectiveProjection.fieldOfView=100;//初始化透视角度 addChild(contain); contain.x=stage.stageWidth/2; contain.y=stage.stageHeight/2-800; contain.z=600; } //创建螺旋效果 private function creat3D():void { for (var i:int=0; i<num; i++) { var image:photo=new photo(); list.push(image); contain.addChild(image); image.x=Math.cos(anglePer*i)*(i*R/(num-1));//改变半径的变化 image.z=Math.sin(anglePer*i)*(i*R/(num-1));//改变半径 //image.x=Math.cos(anglePer*i)*(R-i*R/num);//改变半径的变化 //image.z=Math.sin(anglePer*i)*(R-i*R/num);//改变半径 image.y=h+=30;//每一个螺旋点都递增30 image.rotationY = (-i*anglePer) * (180/Math.PI)+90;//偏移 image.addEventListener(Event.ENTER_FRAME,Run); } } private function Run(event:Event):void { contain.rotationY+=0.01; sortZ(); } private function sortZ():void { list.sort(depthSort); for (var i:int=0; i<list.length; i++) { var myimage:photo=list[i]; contain.setChildIndex(myimage,i); } } private function depthSort(objA:DisplayObject,objB:DisplayObject):int { var posA:Vector3D=objA.transform.matrix3D.position; posA=contain.transform.matrix3D.deltaTransformVector(posA); var posB:Vector3D=objB.transform.matrix3D.position; posB=contain.transform.matrix3D.deltaTransformVector(posB); return posB.z-posA.z; } } }

 

小结：

总得来讲改动的地方很少，涉及代码也很少，看到的效果很酷。但是会付出一点开销的代价，之前遇到了一个问题，那就是深度管理的问题，发现之前所做的一种做法有一些地方有错误，参考make thing move 作者的做法 对3d容器作了一点解析。但是对于自己还是不太理解深度管理如何处理会更加好。所以借用他的代码。对于日后理解了，再去讨论这些深度管理的问题。或者在cs5来到之前，他们adobe会意识到这个问题会进行改进。

 

 

附录：网上摘录

螺旋线的定义：

空间一个点M在圆锥面 x^2+y^2=z^2 上以角速度 w 绕 z 轴旋转，同时又以线速度 v 沿平行于 z 轴的正方向上升，这点M的轨迹就是一条螺旋线