Flash小玩意图案创作：跟随的齿轮和太极

    今天，我们会使用自己之前创建一些图案来进行一些小小实验。使用太极图和齿轮图创作一个拖动跟随的效果。这种拖动跟随的过程。

这个flash 用法很简单，采用过程也是很传统。首先创建对象，然后使用Event.ENTER_FRAME 事件来进行刷新画面。有趣的是，配合到缓冲公式创作，发现一个跟随的效果会呈现出来。

其原理

   对象.x=对象.x+(目标点.x-对象.x)*缓冲系数;

   对象.y=对象.y+(目标点.y-对象.y)*缓冲系数;

 可以实现跟随的效果。

这样就可以实现一个创建的过程。

当中我们首先导入

import org.summerTree.graphics.TaiJi;//导入太极图
import org.summerTree.graphics.GearWheel;//导入齿轮图

这两种图案。可以到我闪盘哪里进行下载。

或者自身替代这两种图案也可以。

 

package { import flash.display.Sprite; import flash.events.*; import org.summerTree.graphics.TaiJi;//导入太极图 import org.summerTree.graphics.GearWheel;//导入齿轮图 public class Main extends Sprite { private var list:Array=[]; private var pen:Sprite=new Sprite(); private var num:int=15; public function Main() { init(); } private function init():void { addChild(pen); pen.graphics.lineStyle(1); //创建多个太极图 for (var i:int=0; i<num; i++) { var taiji:TaiJi=new TaiJi(25); taiji.x=50+taiji.width*i; taiji.y=50; addChild(taiji); list.push(taiji); } addEventListener(Event.ENTER_FRAME,Run); } private function Run(event:Event):void { pen.graphics.clear(); for (var i:int=1; i<num; i++) { var dx:Number=list[i-1].x-list[i].x; var dy:Number=list[i-1].y-list[i].y; var angle:Number=Math.atan2(dy,dx); list[i].rotation=angle*180/Math.PI+90; //采用了缓冲的公式 list[i].x=list[i].x+dx/10; list[i].y=list[i].y+dy/10; } var dx2:Number=mouseX-list[0].x; var dy2:Number=mouseY-list[0].y; var angle2:Number=Math.atan2(dy2,dx2); list[0].rotation=angle2*180/Math.PI+90; list[0].x+=(mouseX-list[0].x)/10; list[0].y+=(mouseY-list[0].y)/10; //绘线 pen.graphics.lineStyle(1); pen.graphics.moveTo(mouseX,mouseY); pen.graphics.lineTo(list[0].x,list[0].y); } } }

更改这种图案

 var gear:GearWheel=new GearWheel();
  gear.CreatGearWheel(25,20,15);

同样可以实现拖动的效果。

同样，如果觉得测试的时候麻烦，同样可以更改每一个元件，这样也可以。

可以按这种方式

    var taiji:Sprite=new Sprite();
    taiji.graphics.lineStyle(1);
    taiji.graphics.drawCircle(0,0,25);

绘制一个圆。原理是一样的。

扩展，这种方式组合是可以随意的。或者使用齿轮和太极两种图案进行跟随。说不定会有 个不错的效果

看看。具体的可以自由的组合。好就写到这里。

package { import flash.display.Sprite; import flash.events.*; import org.summerTree.graphics.TaiJi; import org.summerTree.graphics.GearWheel; public class Main extends Sprite { private var list:Array=[]; private var pen:Sprite=new Sprite(); private var num:int=20; public function Main() { init(); } private function init():void { addChild(pen); pen.graphics.lineStyle(1); //创建太极图和齿轮图 for (var i:int=0; i<num; i++) { if (i%2==0) { var taiji:TaiJi=new TaiJi(25); taiji.x=50+taiji.width*i; taiji.y=50; addChild(taiji); list.push(taiji); } else { var gear:GearWheel=new GearWheel(); gear.CreatGearWheel(25,20,15); addChild(gear); list.push(gear); } } addEventListener(Event.ENTER_FRAME,Run); } private function Run(event:Event):void { pen.graphics.clear(); for (var i:int=1; i<num; i++) { var dx:Number=list[i-1].x-list[i].x; var dy:Number=list[i-1].y-list[i].y; var angle:Number=Math.atan2(dy,dx); list[i].rotation=angle*180/Math.PI+90; //采用了缓冲的公式 list[i].x=list[i].x+dx/10; list[i].y=list[i].y+dy/10; } var dx2:Number=mouseX-list[0].x; var dy2:Number=mouseY-list[0].y; var angle2:Number=Math.atan2(dy2,dx2); list[0].rotation=angle2*180/Math.PI+90; list[0].x+=(mouseX-list[0].x)/10; list[0].y+=(mouseY-list[0].y)/10; //绘线 pen.graphics.lineStyle(1); pen.graphics.moveTo(mouseX,mouseY); pen.graphics.lineTo(list[0].x,list[0].y); } } }