なでしこさんで減速するプログレスバーの実験 (加速もあるよ)

Qiita が大量の記事を書くことを要求してきて……という割には、今週1本しか記事を書けていないぞ。
にもかかわらず、note に書きたいことを今週も書けなかった。
私はこれまでいったい何を……！？

まあ、とにかく記事を書けていないことは確かなので、いつも通り雑プログラムで繋ぐか……

今回やったこと

動画広告の中には、再生中の位置をプログレスバー形式で示してくれるものがある。
しかし、そのプログレスバー状のもの、終盤になると進みが遅くなってくる気がする。
というわけで、実際に終盤の進みを遅くしてみよう。
等速で動かす設定も作り、比較しよう。

おまけとして、逆に終盤加速するパターンも用意した。

プログラム

減速するプログレスバーの実験 (加速もあるよ) (プログラム貯蔵庫)

ポイント

画面の用意

定数の加速は「加速 (2乗)」。
定数の等速は「等速」。
定数の減速は「減速 (平方根)」。
種類セレクトは[加速, 等速, 減速]のセレクトボックス作成。
それに等速をテキスト設定。
改行作成。

プログレスバーは「progress」のDOM部品作成。
それの「width」に「20em」をDOMスタイル設定。
それ$valueは0。
開始ボタンは「再生開始」のボタン作成。

モードセレクタ・プログレスバー・開始ボタンを配置する。
モードセレクタに表示する文字列は、後で比較しやすいよう定数を用いた。
プログレスバーは progress 要素を用いて作成した。

プログレスバーのデモ再生

定数の再生時間は30000。
再生開始時刻とは変数。

再生にかける時間 (ミリ秒) を設定する。
今回は、動画広告でよくありそうな 30 秒にした。
さらに、再生を開始した時刻を保存する変数も用意する。

開始ボタンをクリックした時には
  開始ボタンに「再生中」をテキスト設定。
  開始ボタンにオフをDOM有効設定。
  種類セレクトにオフをDOM有効設定。
  再生開始時刻は時間ミリ秒取得。
  {関数}表示更新を画面更新時実行。
ここまで。

開始ボタンが押されたら、再生を開始する。
すなわち、以下の操作を行う。

• 操作を無効化する

• 再生開始時刻を記録する

• 表示の更新を行う関数を呼び出す

●表示更新とは
  定数の再生位置は(時間ミリ秒取得－再生開始時刻)を再生時間で割る。
  もし、それが1以上ならば
    プログレスバー$valueは1。
    開始ボタンに「再生開始」をテキスト設定。
    開始ボタンにオンをDOM有効設定。
    種類セレクトにオンをDOM有効設定。
  違えば
    種類セレクトのテキスト取得。
    それで条件分岐
      加速ならば、プログレスバー$valueは再生位置×再生位置💧
      等速ならば、プログレスバー$valueは再生位置💧
      減速ならば、プログレスバー$valueは再生位置の平方根💧
      違えば、プログレスバーの「removeAttribute」を["value"]でJSメソッド実行💧
    ここまで。
    {関数}表示更新を画面更新時実行。
  ここまで。
ここまで。

現在時刻と再生開始時刻の差から経過時間を割り出し、さらにそれを再生位置 (0～1) に変換する。
再生位置が 1 以上になったら、再生を停止して操作を有効化する。
再生位置が 1 未満なら、設定に応じてプログレスバーの表示を更新し、次のフレームでの表示の更新を指示する。

やってみて

今回の設定では、「減速」モードではバーの中盤から目に見えた減速が始まり、これは思ったよりも早かった。
実際の動画広告では、終盤でのプログレスバーの進みをわざと遅くするなんていう小細工はしておらず、単に終了が近づいて期待が高まった結果時間が長く感じるなどの錯覚かもしれない。

とはいえ、今回試した再生位置からプログレスバーの位置を決める関数はたったの 3 種類である。
もっと様々な関数を試すことで、もしかしたら中盤までは普通に動き、終盤ではほどほどに遅くなるような関数を発見や作成できる可能性も考えられる。