アニメーション:

振り子運動

Math.sinを使った振り子運動を行う。一時停止や再開、現在角度の確認も可能。

Node
Nodeを指定 id値を文字列で指定してもよい
Number1
動作の起点角度を指定 上を0°とする (例) -90°〜90°の動作なら「0」
Number2
動作の角度幅を指定 動作の半分の角度を指定 (例) -90°〜90°の動作なら「90」
Number3
動作速度を指定 0.1以上の数値 / 大きいほど速い
Number4
動作開始の角度を指定 起点からの角度 / 省略した場合は 0 となる
●必須引数 ●オプション引数(省略可能)

記述例

$aniPendulum($id('aNode'), 0, 30, 2.5)
$aniPendulum('aNode', 0, 90, 10, -90)
◆ 関連関数
$pausePendulum(Node):一時停止する
$resumePendulum(Node):動作を再開する
$getPendulum(Node):現在の角度を取得して返す

戻り値

○$getPendulum():指定Nodeが登録されている場合

・起点からの現在角度を数値で返す。

○$getPendulum():指定Nodeが登録されていない場合

・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); } }
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。