カウントダウン時の残り時間をバーで視覚化する

カウントダウンの表示に追加要素として進み具合をバーで視覚化できるようにしてみた。

ミリ秒を表示していない理由

SyncTimerではミリ秒の表示をしておらず、カウントダウンの表示をするときに進み具合がわかりにくい。

ミリ秒を表示しないのは理由があって、そもそもSyncTimerで表示されている値は「ミリ秒を表示していない」のではなく「0秒を表示するときの挙動」をわかりやすくするためのものだ。

具体的にミリ秒まで含めるとタイマーがどんな値を表示するのか考えてみると良い。例えばちょうど1秒ずつ進んだとすると、こんな表示になるはずだ。

-00:00:01.234
-00:00:00.234
 00:00:00.766
 00:00:01.766

この表示から単純にミリ秒を削ると、マイナス0秒が発生していることがわかる。

-00:00:01
-00:00:00
 00:00:00
 00:00:01

こうなってしまうと、視覚的には 3, 2, 1, 0 のタイミングで再生開始したいように見えるのに、-3, -2, -1, -0, 0, 1, 2 となってタイミングが曖昧になってしまう。 （人間がミリ秒の高速カウントダウンを読めるならそれでもいいけど多分読めないので、おそらく秒の表示の方を参考にしてしまうだろう）

そこで、タイマーは次のように「実際の値を超えない最大の秒」を計算して表示している。

-00:00:01.234 => -00:00:02
-00:00:00.234 => -00:00:01
 00:00:00.766 =>  00:00:00
 00:00:01.766 =>  00:00:01

これであれば、00:00:00 を表示したタイミングが実際の0秒と一致している。

リリースして反応を見よう

そんなわけで適切に0秒を表示するためやむを得ずミリ秒を表示していないのだが、やはり視覚的にわかりにくい気がしたので残り時間を表示できるようにしてみた。

反応があるかどうか、改善案が出てくるかどうかはわからないが、ひとまずリリースして反応を見てみることにする。