トランザムシステムってなに？

アニメ「機動戦士ガンダムOO」に登場する、機体の性能を向上させ、一定時間スペックの3倍以上に相当する出力を得ることができる仕組みのこと。

その際にコクピットに出る表示が印象的だったのですが、
CSSアニメーションを使ったローディング表示やスピナーを見て、
「実はCSSアニメーションだけで表現できるのでは...」と思い始めて3か月ぐらい経ちました。

キーになる技術

２つのプログレスバーを制御する

参考として挙げたQiita記事ではプログレスバーの作り方としてソースだけではなく考え方が書かれており、この処理を上下左右反転させればよいことがわかりました。

グラデーションを効果的に使う

今回は禍々しいグラフィックに特徴があるので、できるだけ真似るために

• プログレスバー
• 内円の中心
• 円の外側

にグラデーションを使用しています。

点滅(opacityの変更)を使う

時間制限の限界が近づいたことを知らせるために赤と通常色で交互に色を変えたり、opactiy(不透明度)を変えたりしています。

デモ

• GitHub Pages
• ソース

今後の展望

• 今回は小さいサイズで作成してしまったので全体的にサイズ調整する
• 粒子チャージに対応する
  • 一旦粒子を使い切ってしまった場合、再チャージの描写を入れる
    • これはたぶんjsなしでは無理だと思います。

参考

• CSSアニメーションで円形プログレスバーを作る方法
• 色々なパターンの点滅するCSSアニメーションサンプル