Math.sinを使った振り子運動を行う。一時停止や再開、現在角度の確認も可能。
・起点からの現在角度を数値で返す。
・null を返す。
対象Nodeの transform-origin はCSSで設定しておく。
回転動作のサンプル。
HTML :
<div id="sample1">
<mark id="mark_1">▲</mark>
</div>
Sass :
#sample1 {
width: 200px;
height: 200px;
background: #c6dbde;
border-radius: 100px;
& > #mark_1 {
width: 200px;
height: 200px;
text-align: center;
color: #fff;
background: none;
transform-origin: 50% 50%;
}
}
Javascript :
$aniPendulum($id('mark_1'),90,90,4,-90);
$pausePendulum($id('mark_1'));
$resumePendulum($id('mark_1'));
var angleStr=$getPendulum($id('mark_1'));
var stop1_timer;
function stop1() { //±4°になったら停止
clearTimeout(stop1_timer);
//現在の角度を確認して条件に当てはまれば停止する
var nowAngle=$getPendulum('mark_1');
if(nowAngle<=4 && nowAngle>=-4) {
$pausePendulum('mark_1');
} else {
stop1_timer=setTimeout(stop1,40);
}
}
振り子動作のサンプル。
HTML :
<div id="sample2">
<mark id="mark_2"><div></div></mark>
</div>
Sass :
#sample2 {
width: 200px;
height: 200px;
& > #mark_2 {
position: relative;
display: block;
width: 4px;
height: 200px;
margin-left: 98px;
background: #c6dbde;
transform-origin: 50% 0%;
& > div {
position: absolute;
top: 180px;
left: -8px;
width: 20px;
height: 20px;
background: #c6dbde;
border-radius: 10px;
}
}
}
Javascript :
$aniPendulum('mark_2',0,25,2.5,0);
$pausePendulum('mark_2');
$resumePendulum('mark_2');
var angleStr=$getPendulum('mark_2');
var stop2_timer;
function stop2() { //±1°になったら停止
clearTimeout(stop2_timer);
//現在の角度を確認して条件に当てはまれば停止する
var nowAngle=$getPendulum('mark_2');
if(nowAngle<=1 && nowAngle>=-1) {
$pausePendulum('mark_2');
} else {
stop2_timer=setTimeout(stop2,40);
}
}