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的轨迹就是一条螺旋线