2019-09-09に投稿

CSSアニメーションでトランザム!

CSS

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

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

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

キーになる技術

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

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

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

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

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

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

点滅(opacityの変更)を使う

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

デモ

今後の展望

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

参考


ckoshien

個人開発4年目。普段はアプリケーションエンジニア。 ReactJS/NodeJS/ReactNative/Java

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント