アニメーション:

イージングの数値を算出 ②

引数として、開始時点の数値、終了時点の数値、速度、カウントを渡して、指定カウント時点でのイージングの値を返す。
$aniEasing1() よりも動きに緩急がある。

Number1
開始時点の数値を渡す
Number2
終了時点の数値を渡す
Number3
変化スピードを1.1以上の少数値で指定 大きい程速い
Number4
カウントを数値で指定 0から1ずつ増えるカウントとして定義
●必須引数 ●オプション引数(省略可能)

記述例

$aniEasing2(0, 500, 2.5, 10)
$aniEasing2(200, 1000, 5, 8)

戻り値

○動きのステータスを配列で返す

配列[0]:指定したカウント時点が移動中なら 1 、中間点なら 2 、移動完了なら 0 を格納

配列[1]:指定したカウント時点の数値を格納

動作サンプル

それぞれの円をクリックすると、指定した数値に従って動く。(終了後に自動リセット)

HTML : <div id="sample1"> <div id="circle1" onclick="anieasing2_circle1()"></div> <div id="circle2" onclick="anieasing2_circle2()"></div> </div>
Sass : #sample1 { position: relative; width: 700px; height: 160px; & > div { position: absolute; width: 50px; height: 50px; border-radius: 25px; &#circle1 { top: 20px; left: 0; } &#circle2 { top: 90px; left: 650px; } } }
Javascript : var c1_count=0; function anieasing2_circle1() { c1_count++; //カウントを増やす var aniAry=$aniEasing2(0,650,1.4,c1_count); //カウント時点での動きのステータスを取得 if(aniAry[0]>0) { $id('circle1').style.left=aniAry[1]+'px'; //算出した位置に移動 setTimeout(anieasing2_circle1,40); } else { $id('circle1').style.left="650px"; //終了点に移動 c1_count=0; } } var c2_count=0; function anieasing2_circle2() { c2_count++; //カウントを増やす var aniAry=$aniEasing2(650,0,1.8,c2_count); //カウント時点での動きのステータスを取得 if(aniAry[0]>0) { $id('circle2').style.left=aniAry[1]+'px'; //算出した位置に移動 setTimeout(anieasing2_circle2,40); } else { $id('circle2').style.left="0"; //終了点に移動 c2_count=0; } }
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。