jRumbleで要素を揺らしてみた備忘

jRumble使ってみた備忘

2019年のサイボウズデイのkintoneの発表の中で
jRumbleが使用されているのを拝見して使ってみたいなと思ったのがきっかけです。

必要なもの

jquery(https://code.jquery.com/)
※3.4.1で実施しました。

（補足メモ）
uncompressed・・・コメントあり。開発時に使用を想定。
minifield・・・コメントなど除外した軽量版。稼働時に使用を想定。
slim・・・ajax,effectsを省いたコメントありのバージョン
slim minifield・・・ajax,effectsを省いてコメントなどを除外した軽量版。

jRumble(https://jackrugile.com/jrumble/)

やったこと

ドットインストールの「JavaScriptでストップウォッチを作ろう」を元にして、
Stopボタンを押下された時にStartボタン押下時からStopボタン押下時までの差分のミリ秒が3で割り切れる数字の場合は、
timer要素（ストップウォッチの秒が表示されている要素）をjRumbleで揺らす。
Startボタンがクリックされると揺れを停止する。

トリガーを設定
◆今回は、「Stop」ボタンをクリックされた時のイベントリスナーに以下を追加
※ elapsedTimeは、「Start」ボタン押下時と「Stop」ボタン押下時のミリ差分を保持

if(elapsedTime%3 === 0){
    $('#timer').trigger('startRumble');
}

◆「Start」ボタンをクリックされた時のイベントリスナーに以下を追加

$('#timer').trigger('stopRumble');

揺れ幅の設定（クリックされた時の挙動）

$('#timer').jrumble({
    x: 10,
    y: 10,
    rotation: 4
});

実演/感想

＊反省点gifうまく作れなかった。
＊意外と３で割り切れるとこでStopできない。
＊面白い。。。IT関係ない部署の方が見たらバグか何かと勘違いしかねない気もした。

参考

https://code.jquery.com/
https://jackrugile.com/jrumble/