2015年の年賀サイトに載せている、スロット型のおみくじ、
スロットのようなことを以前JS(jQuery)でやろうとした際、画像をつかい、上下にアニメーションでループするサンプルなどがネットを探しても見つからなかったので諦めていたのですが、いい状態にうまくできたので掲載しました。
今回のスロットは
・ループをどのようにして実現するのか、
・開始、停止をどのようにしてスムーズに導くか、
・リアルな動きの再現方法は？
というところに着目して作っています。
ループをどのようにして実現するのか
Webという特性上、3Dの円柱を横回転させるようなアニメーションを再現するのはとてもコストがかかってしまうので、表示するエリアのパターンを並べ、それを反復させることで無限ループのような錯覚を起こし、再現するようにしています。
開始、停止をどのようにしてスムーズに導くか
スタートした際にすでにストップするまでの時間が決まっている場合は１パターンのアニメーションを用意するだけで解決するのですが、ユーザーがスタートとストップのタイミングを決めるものなので、スタートからループまでのアニメーション、ループ時のアニメーション、ループからストップまでのアニメーションと３パターン用意して実装しています。
リアルな動きの再現方法は？
実際に無限ループ、回転しているように見せるために背景にグラデーションを入れるとともに、ループ中にストロボ現象をアルファの制御で引き起こすことで逆回転のように見える錯覚を再現しています。また、ストップの際に１つ先まで進んでから戻るようなアニメーションにしています。
今回のスロットをjQueryのプラグインのようにできればいいのですが、実装するサイズや内容の数でレイアウトや幅が変わってしまうので今のところはプラグインにはしておりません。