マウス位置で速さが変わる円運動
残像を残しながら回転する円の速度をマウス位置によって変えるというアニメーションです
解説はつづきから
新規ファイル作成
ステージ設定はサイズを400×300、フレームレートを30に
まずは背景を作成
400×300の矩形を描き、#FFFFFFから#CCCCCCの色でグラデーション
新規レイヤーを追加し、35×35の円を描く
塗りは#00CCFF、線は1pxで色は#FFFFFF
シンボルに変換し、ActionScriptに書き出しにチェックを入れて、クラス名をCircleに
ステージにある円のインスタンス名をcircleに
新規レイヤーを追加し、ActionScriptを記述
var angle:Number = 0; //角度 var radius:int = 120; //周回半径 var speed:Number; //速度 //ステージの中心点 var centerX:int = stage.stageWidth / 2; var centerY:int = stage.stageHeight / 2; circle.addEventListener(Event.ENTER_FRAME, moveCircle); //circleの動き設定 function moveCircle(e:Event):void { //ステージの中心点を軸に半径radiusで円運動になるように //sin、cosを使ってcircle位置決定 circle.x = centerX + Math.cos(angle) * radius; circle.y = centerY + Math.sin(angle) * radius; //マウス位置から中心点までの距離 var dis = Math.sqrt((mouseX-centerX)*(mouseX-centerX)+(mouseY-centerY)*(mouseY-centerY)); //マウス位置によってspeed変化 speed = 20/dis+0.05; //一定値以上になったらspeed固定 if (speed>1.5) { speed = 1.5; } //速度を代入して角度を変えることによって円運動開始 angle += speed; } //円を追加するタイマー設定 var timer:Timer = new Timer(30); timer.addEventListener(TimerEvent.TIMER, createCircle); timer.start(); //円追加設定 function createCircle(e:Event):void { var trailCircle:Circle=new Circle(); trailCircle.x = circle.x; trailCircle.y = circle.y; trailCircle.alpha = 0.8; //追加された円の変化開始 trailCircle.addEventListener(Event.ENTER_FRAME,animateCircle); //circleより一つ下の位置に円追加 addChildAt(trailCircle,numChildren - 1); } //追加された円の変化設定 function animateCircle(e:Event):void { e.target.alpha -= 0.04; //透明度変化 //大きさ変化 e.target.scaleY -= 0.04; e.target.scaleX -= 0.04; //完全に透明になったら削除 if (e.target.alpha < 0) { e.target.removeEventListener(Event.ENTER_FRAME,animateCircle); removeChild((MovieClip)(e.target)); } }
これでムービープレビューすると、以下のようにマウス位置が中心に近づくほど速度が速くなる円運動が出来てるかと思います
以上、マウス位置で速さが変わる円運動の作り方でした