flash 与动画:轮盘旋转

    这段时间都很懒惰，并不知道该去写一些什么才能更好突破，总是发觉不是缺这样就是那样，除了看书做一些事情不能让自己停止下来。这段时间总觉得自己很颓废，暂时记录一下最近看到一个轮盘旋转的做法，感觉还是挺好的。

 

先写下第一篇，后面慢慢改进。希望想到更好的主题可以进行写一下。

 

          首先来讲轮盘旋转，很多想第一时间会想到抽奖，其实这个正是抽奖的其中一个常见案例。我们不管他是如何实现，把核心的说一下大概会让人明白当中的核心东西。

 

         要旋转会想到速度，想到rotation 这些属性，而这些属性正是我们所需要的。因此在制作的时候，我们让rotation 不断加上一个变量让其产生旋转运动，这样就可以实现到一个轮盘旋转的效果。

 

 

 基本步骤：

        首先建立初速度var speed：Number=10;

        我们演示的时候会通过一个图形，如shape类型，进行绘制一个指针，这样利用这个图形来进行旋转操作；

 

       如：shape.rotation+=speed;//让轮盘旋转，可以看到它的旋转

       如果想让指针缓慢停止可以让速度每一帧进行递减：speed-=0.2;这样的话 轮盘旋转的时候就会慢慢递减下来。

       当条件触发：  if(speed<=0)  我们停止运动；

        

      注意到：trace(shape.rotation)有可能是正也有可能是负值。并不是我们想象那样是从0-360度那样。

 

     

 

 

 

//建立一个箭头类：

package { //箭头类 import flash.display.Sprite; public class Arrow extends Sprite { public function Arrow() { this.graphics.lineStyle(2,0xff0000); this.graphics.drawCircle(0,0,5); this.graphics.moveTo(0,0); this.graphics.lineTo(0,-90); this.graphics.moveTo(0,-90); this.graphics.lineTo(Math.cos(Math.PI/3)*8,-90+Math.sin(Math.PI/3)*8); this.graphics.moveTo(0,-90); this.graphics.lineTo(Math.cos(Math.PI-Math.PI/3)*8,-90+Math.sin(Math.PI-Math.PI/3)*8); } } }

 

 

//建立一个圆盘

package { //圆盘 import flash.display.Sprite; public class Disk extends Sprite { public function Disk(num:int,radius:Number) { if(num==0) return; this.graphics.lineStyle(0); this.graphics.drawCircle(0,0,radius); var perAngle:Number=360/num; for (var i:int=0; i

 

 

//建立一个简单按钮：

 

package { import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.filters.GlowFilter; //测试按钮 public class CButton extends Sprite { public function CButton(label:String) { var btn_label:TextField=new TextField(); btn_label.text=label; btn_label.selectable=false; btn_label.autoSize=TextFieldAutoSize.CENTER; btn_label.mouseEnabled=false; btn_label.x=10; addChild(btn_label); this.graphics.beginFill(0xffffff); this.graphics.drawRect(0,0,50,20); this.graphics.endFill(); this.filters=[new GlowFilter(0x333333,0.3,3,3)]; this.buttonMode=true; } } }

 

 

初步的开始：

 

package { import flash.display.MovieClip; import flash.events.*; import flash.display.Shape; public class Main extends MovieClip { private var arrow:Arrow=new Arrow(); private var speed:Number;//速度 private var istart:Boolean = false;//是否开始 public function Main() { init(); } private function init():void { //轮盘 var disk:Disk=new Disk(10,150); addChild(disk); disk.x = stage.stageWidth / 2; disk.y = stage.stageHeight / 2; addChild(arrow); arrow.x = disk.x; arrow.y = disk.y; //创建按钮 var start_btn:CButton=new CButton("start"); start_btn.x=450; start_btn.y=20; var stop_btn:CButton=new CButton("stop"); stop_btn.x=450; stop_btn.y=45; addChild(start_btn); addChild(stop_btn); start_btn.addEventListener(MouseEvent.CLICK,onClick); stop_btn.addEventListener(MouseEvent.CLICK,onStopClick); } private function onClick(event:MouseEvent):void { startGame(); } private function onStopClick(event:MouseEvent):void { if (! istart) { return; } stopMove(); } private function startGame():void { if ( istart) return; istart = true; speed=10; addEventListener(Event.ENTER_FRAME,Run); } private function Run(event:Event):void { if (istart) { move(); } else { stopMove(); } } //运动 private function move():void { arrow.rotation += speed;//加上一个初始速度然后进行递减 speed-=0.05; if(speed<0)stopMove(); } //停止运行 private function stopMove():void { istart=false; removeEventListener(Event.ENTER_FRAME,Run); } } }

 

 

 

当你构建完毕之后，其实这个只是一个很少很少的过程。因为这个简单旋转并不能满足我们的需求。更多的还是会留在后面。

 

为了改进这个。还是需要增加指定旋转圈数，可以随意定制命中局域，可以指定初始速度。

 

这些都是比较有趣，而且有意思的。

 

 

第二步进行改造：

 

   下面进行一个测试。在期间设置 圈数，目标角度，初始角度，等几个参数。当中一个算等差项参考了一个flash 作者的计算方法。采用的办法是等差的公式。 前n项的和Sn=（首项+末项）×项数÷2 (sn=(a1+an)*n/2;)　
                           公差 d=(an-a1)÷（n-1）

 

可以知道的事情是，指针在旋转的总的角度 是等于递减的时候的速度变化总和。

 

 

设置参数：

 

//设置初始化参数 private function setParameters():void { rounds=2; //设置圈数 speed=10;//设置初始化速度 currentAngle=arrow.rotation;//当前角度 targetAngle=36;//目标角度 totalAngle=(360*rounds)+(targetAngle-currentAngle);//算出总的角度 trace("开始总角度"+totalAngle); //计算项数Sn=(a1+an)*n/2 //等差数列，算出n列次数 //算出项数 totalTime =((2 * totalAngle) / speed); //d=(an-a1)÷（n-1） //算出公差 perSpeed = (speed / (totalTime -1 )); }

 

 

拥有这个计算办法后可以解决一些问题。

 

 

package { import flash.display.MovieClip; import flash.events.*; import flash.display.Shape; import com.bit101.components.ComboBox; import com.bit101.components.Label; public class Main extends MovieClip { private var arrow:Arrow=new Arrow(); private var speed:Number=20;//速度 private var istart:Boolean = false;//是否开始 private var rounds:int=2;//圈数 private var totalAngle :Number;//总的角度 private var currentAngle:Number;//当前角度 private var targetAngle:Number=36;//目标角度 private var totalTime:Number;//总的次数 private var perSpeed:Number;//每一次的递减的加速度 private var circle_combox:ComboBox; private var angle_combox:ComboBox; public function Main() { init(); } private function init():void { //轮盘 var disk:Disk=new Disk(10,150); addChild(disk); disk.x = stage.stageWidth / 2; disk.y = stage.stageHeight / 2; addChild(arrow); arrow.x = disk.x; arrow.y = disk.y; //创建按钮 var start_btn:CButton=new CButton("start"); start_btn.x=450; start_btn.y=20; var stop_btn:CButton=new CButton("stop"); stop_btn.x=450; stop_btn.y=45; addChild(start_btn); addChild(stop_btn); start_btn.addEventListener(MouseEvent.CLICK,onClick); stop_btn.addEventListener(MouseEvent.CLICK,onStopClick); //设置选择圈数 new Label(this,420,70,"Circle:"); var items:Array=["1","2","3","4","5","6","7","8","9"]; circle_combox=new ComboBox(this,450,70,items[1],items); circle_combox.addEventListener(Event.SELECT,onComboxChange); new Label(this,420,90,"Angle:"); var angles:Array=["0","36","72","108","144","180","216","252","288","324"]; angle_combox=new ComboBox(this,450,90,angles[1],angles); angle_combox.addEventListener(Event.SELECT,onComboxChangeAngle); setParameters(); } //设置初始化参数 private function setParameters():void { currentAngle=arrow.rotation;//当前角度 speed=20; totalAngle=(360*rounds)+(targetAngle-currentAngle);//算出总的角度 trace("开始总角度"+totalAngle); //计算项数Sn=(a1+an)*n/2 //等差数列，算出n列次数 //算出项数 totalTime =((2 * totalAngle) / speed); //d=(an-a1)÷（n-1） //算出公差 perSpeed = (speed / (totalTime -1 )); } private function onClick(event:MouseEvent):void { startGame(); } private function onStopClick(event:MouseEvent):void { if (! istart) { return; } stopMove(); } private function onComboxChange(event:Event):void { rounds=int(circle_combox.selectedItem); } private function onComboxChangeAngle(event:Event):void { targetAngle=int(angle_combox.selectedItem); } private function startGame():void { if ( istart) return; istart = true; setParameters() addEventListener(Event.ENTER_FRAME,Run); } private function Run(event:Event):void { if (istart) { move(); } else { stopMove(); } } //运动 private function move():void { arrow.rotation += speed;//加上一个初始速度然后进行递减 speed-=perSpeed; if(speed<=0)stopMove(); } //停止运行 private function stopMove():void { istart=false; removeEventListener(Event.ENTER_FRAME,Run); } } }

 

 

 

 

 加上一个背景去，然后恰当修改一部分内容。这样一个简单轮盘旋转就可以实现了。