アニメーション:

回転運動の数値を算出

引数として、中心点、半径、速度、カウントを渡して、回転位置の値を返す。

Number1
回転の中心点 X座標
Number2
回転の中心点 Y座標
Number3
回転運動の半径
Number4
速度と回転方向を数値で指定 プラス値 = 時計回り ・ マイナス値 = 反時計回り / 小さい程速い
Number5
カウントを指定 0から1ずつ増えるカウント
●必須引数 ●オプション引数(省略可能)

記述例

$aniRotation(100, 100, 50, 2.5, 10)
$aniRotation(100, 100, 50, -3, 0)

戻り値

渡したカウント時の動きのステータスを連想配列で返す。

result.X:X座標 (整数)

result.Y:Y座標 (整数)

動作サンプル

異なる設定で3色の点を回転させるサンプル。

HTML : <div id="sample1"> <mark id="mark_blue"></mark> <mark id="mark_red"></mark> <mark id="mark_gold"></mark> </div>
Javascript : var count_blue=0; var timer_blue; function anirotation_blue() { //ブルーを動かす clearTimeout(timer_blue); //カウント時の位置を算出 var resultDic=$aniRotation(200,200,100,15,count_blue); count_blue++; //マークを移動:マークの半径分を調整 $id('mark_blue').style.left=resultDic.X-5+"px"; $id('mark_blue').style.top=resultDic.Y-5+"px"; //ループ timer_blue=setTimeout(anirotation_blue,40); } var count_red=0; var timer_red; function anirotation_red() { //レッドを動かす clearTimeout(timer_red); //カウント時の位置を算出 var resultDic=$aniRotation(200,200,150,-30,count_red); count_red++; //マークを移動:マークの半径分を調整 $id('mark_red').style.left=resultDic.X-5+"px"; $id('mark_red').style.top=resultDic.Y-5+"px"; //ループ timer_red=setTimeout(anirotation_red,40); } var count_gold=0; var timer_gold; var gold_radius=60; var gold_vector=0.5; function anirotation_gold() { //ゴールドを動かす clearTimeout(timer_gold); //少しずつ半径を拡大縮小する if(gold_radius>60 && gold_radius<200) { gold_radius+=gold_vector; } else if(gold_radius==60) { gold_vector=0.5; gold_radius+=gold_vector; } else if(gold_radius==200) { gold_vector=-0.5; gold_radius+=gold_vector; } //カウント時の位置を算出 var resultDic=$aniRotation(200,200,gold_radius,8,count_gold); count_gold++; //マークを移動:マークの半径分を調整 $id('mark_gold').style.left=resultDic.X-5+"px"; $id('mark_gold').style.top=resultDic.Y-5+"px"; //ループ timer_gold=setTimeout(anirotation_gold,40); }
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。