投稿日：
アニメーション風ローディング画面をCLIで作ったので紹介します！
今作り終わったのは６パターンですが、アイディアはたくさんあってウェーブとかふわふわ浮いてる演出とか考えていましたが、きりがないので今度また作ろうと思います。Pythonの方でライブラリ化するかもしれません！（検討中）
タイプライター出力
こちらは一文字ずつ出力していくシンプルな演出です。これはすごい簡単でfor文で回して出力文字を一文字ずつ増やしていくだけです。なぜかgifでは…が白く表示されてますがターミナルではちゃんと紫で表示されています。このコードは最後の方で載せています！
上下交互出力
こちらは一文字ずつジグザグに出力していく演出です。これはANSI制御が結構複雑だったので作るのに一番時間がかかりました。ループするごとにちょっとずつ上に移動してしまったり、Gが消えずに出力されたままだったりと・・・。ちなみに最初は一文字出力したら消えるようにしてたんですが、文字が読みにくいと感じたのでこのようになりました。
点滅出力
こちらはテキストを出力してから点滅する演出です。最初の出力では少し暗めの色を使って点滅時に明るく出力させてみました。点滅の間隔調整が意外と大変で、何度も調整していい感じにできました！
横移動出力
こちらは左から右にループ移動していく演出です。スペースの数を増やしていくだけなので、タイプライター出力と一緒で簡単に作れます。
グラデーション出力
こちらはグラデーション演出です。色の配列を使って順番に色を変化させ、最後の色まで行ったら逆順に戻るようにしています。これを二重for文で繰り返しています。実は文字別のグラデーションも作ったのですがなんか微妙だったので消しました（笑）
バウンス出力
こちらは壁に当たって跳ね返るという演出です。こちらもテキストが増殖されたり、ものすごい位置に移動したりといろいろありましたが、座標を指定しうまく制御することができました。ただこれは完ぺきではなくて、現在のカーソル位置から少し下に下がってから処理が開始されてしまっています。時間があったら修正する予定。
タイプライター出力コード
let load = "L O A D I N G ...";
for i in 0..=load.len() {
print!("\r{}", style(&load[..i]).color256(201).bold());
io::stdout().flush().unwrap();
thread::sleep(Duration::from_millis(100));
}
print!("\r\x1b[K");
タイプライター出力のコードです！consoleクレートを使って色を付けました。同じ位置から出力を開始するためにANSI制御の”\r”を使っています。ここで大事なのがflushとsleepです！これがないと処理スピードが速すぎるため、何も演出されずに終わります。flushを使うことによって即出力させ、sleepで処理スピードを下げて１つずつ出力されるようになっています。最後のANSIコードは現在の行を上書きで全消しするものです。
他の出力のコードはpythonでライブラリ化（未定）するときにgithubで公開すると思います！
実はANSIコードはつい昨日知ったんですが、すごい便利で驚きました！ブロック壊しゲームとか作れそうだし。とりあえず使ったANSIコードは７種類だけでよく使うコードは、
- 出力リセット（最初のカーソル位置に戻る） → ”\r\x1b[K”
- 一段下がる → ”\x1b[1B”
- 一段上がる → ”\x1b[1A”
これさえ覚えればシンプルなアニメーションはすぐ作れると思います。必ず出力の最初に”\r”を書いとくことが大事です。（カーソルを先頭に戻すため）
制作期間は１日で、初めて使った割には思ったより早く作れて自分でもびっくりしています。
さっそく開発中のアプリに取り入れたいと思います！
最後まで読んでいただきありがとうございます！
コメント