引数として、開始時点の数値、終了時点の数値、速度、カウントを渡して、指定カウント時点でのイージングの値を返す。
$aniEasing1() よりも動きに緩急がある。
配列[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;
}
}