アニメーション:

イーズイン・イーズアウトの数値を算出

引数として、動きのタイプ、開始時点の数値、終了時点の数値、速度、カウントを渡して、指定カウント時点での値を返す。

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

記述例

$aniEaseInOut('in', 0, 500, 2.5, 10)
$aniEaseInOut('OUT', 500, 0, 2.5, 10)

戻り値

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

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

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

動作サンプル

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

HTML : <div id="sample1"> <div id="circle1" onclick="anieaseinout_circle1()"></div> <div id="circle2" onclick="anieaseinout_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 anieaseinout_circle1() { c1_count++; //カウントを増やす var aniAry=$aniEaseInOut('in',0,650,1.4,c1_count); //カウント時点での動きのステータスを取得 if(aniAry[0]>0) { $id('circle1').style.left=aniAry[1]+'px'; //算出した位置に移動 setTimeout(anieaseinout_circle1,40); } else { $id('circle1').style.left="650px"; //終了点に移動 c1_count=0; } } var c2_count=0; function anieaseinout_circle2() { c2_count++; //カウントを増やす var aniAry=$aniEaseInOut('IN',650,0,2.0,c2_count); //カウント時点での動きのステータスを取得 if(aniAry[0]>0) { $id('circle2').style.left=aniAry[1]+'px'; //算出した位置に移動 setTimeout(anieaseinout_circle2,40); } else { $id('circle2').style.left="0"; //終了点に移動 c2_count=0; } }

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

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