今週も 頭が悪い クズだった (川柳)

やったこと

なでしこで、「クズ」の大きさを変えるアニメーションをする。

プログラム

大きさが変わるクズ (プログラム貯蔵庫)

ポイント

パラメータを設定する

表示文字列は「クズ」。
最大サイズは1000。# %
周期は2000。# ミリ秒

プログラムを実行する上で用いるパラメータを用意する。
表示する文字列・表示する最大サイズ・大きさを変える周期を設定できる。

ラベルを用意する

DOM親要素の「行揃え」に「中央」をDOMスタイル設定。
枠は「DIV」のDOM部品作成。
それにDOM親要素設定。
それに{
  "ボックス表示": "inline-grid",
  "place-items": "中央",
}をDOMスタイル一括設定。
サイズ基準ラベルは表示文字列のラベル作成。
それに{
  "grid-row": "1",
  "grid-column": "1",
  "文字サイズ": 「{最大サイズ}%」,
  "visibility": "hidden",
}をDOMスタイル一括設定。
表示ラベルは表示文字列のラベル作成。
それに{
  "grid-row": "1",
  "grid-column": "1",
}をDOMスタイル一括設定。

文字列を表示するためのラベルと、それの位置を決めるための部品を用意する。
具体的には、

• サイズの基準と表示を重ねるため、グリッドに設定した親要素「枠」

• 大きさは最大で固定して非表示にし、サイズの基準となる「サイズ基準ラベル」

• 実際に画面に文字列を表示させる「表示ラベル」

を用意する。
「サイズ基準ラベル」によって「枠」の大きさが決まり、「表示ラベル」を「枠」の中央に配置させることで、文字列の中心部を中心とするサイズ変更を実現する。

時間経過に合わせてサイズを変える

開始時刻はシステム時間ミリ秒。
●サイズ更新とは
  定数の経過時間は(システム時間ミリ秒から開始時刻を引く)。
  定数の角度は経過時間を周期で割った余りを周期で割って360を掛けてラジアン変換。
  定数の倍率は角度のSINに1を足して2で割る。
  表示ラベルの「文字サイズ」に「{最大サイズ×倍率}%」をDOMスタイル設定。
  {関数}サイズ更新を画面更新時実行。
ここまで。
{関数}サイズ更新を画面更新時実行。

まず、「システム時間ミリ秒」実行を開始した時刻を取得する。

文字列を表示するサイズを更新する関数「サイズ更新」を定義し、「画面更新時実行」で実行する。
この関数での実行は1回しか行われないようなので、「サイズ更新」の処理終了時に再び「画面更新時実行」を用いて実行する。

「サイズ更新」では、以下のようにして表示するサイズを計算する。

1. 現在時刻から実行開始時刻を引き、実行開始からの時間を得る

2. 実行開始からの時間を周期で割った余りを求める。(0から(周期-1)になる)

3. それを周期で割る。(0から1の実数になる) (正確には1未満)

4. それに360を掛けて、さらにこれを度数としてラジアンに変換する

5. それの正弦 (sin) を求める (-1から1の実数になる)

6. それに1を足して、2で割る (0から1の実数になる)

7. それに最大サイズを掛ける

そして、計算したサイズを文字列表示用のラベルに反映させる。

おわりに

クズ。