flash 与动画 轮盘旋转

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

               

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

 

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

 

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

 

         要旋转会想到速度，想到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<num; i++)   {    this.graphics.moveTo(0,0);    this.graphics.lineTo(Math.cos(i*perAngle*Math.PI/180)*radius,Math.sin(i*perAngle*Math.PI/180)*radius);        }  }   } }

 

 

//建立一个简单按钮：

 

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);  } }}

 

 

 

 

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

 

 

 

           

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow