演習 - 改善された検索アニメーションを追加する

完了

Contoso Pets アプリは、捨てられたペットの新しい家を見つけるのに役立ちます。 検索機能の改善要求の一部は、検索の進行状況を示すアニメーションシミュレーションを更新することです。

検索アニメーションの仕様

この 2 番目のチャレンジ演習では、検索アニメーションを回転に似た状態に更新し、カウントダウン (2、1、0) を追加する必要があります。

現在の "検索" アニメーション アイコンを変更する

• 現在のアニメーションの "アイコン" を更新する string[] searchingIcons = {". ", ".. ", "..."};

• スピンをシミュレートする新しいアイコンを使用する

• 次のアニメーション GIF の例を確認します

• "検索" アニメーションをデザインして、アニメーション画像に表示されるのとは異なる動作をするように "回転" を表示できます

• "search..."アニメーションは、各アニメーションが完了した後も引き続き上書きされ、同じ行に残り、アニメーションが停止した後も表示されないようにする必要があります。

  

"検索" アニメーションにカウントダウンを追加する

• 前のアニメーション画像を確認する - 出力のカウントダウンを書き留めます
  • searching...retriever / 2
  • 前の数値 "2" は "1" として表示され、最後に "0" と表示され、カウントダウンされます
• ループがカウントダウンを表示できるように、"検索" アニメーションを含むループを更新します

コード コメント

• サンプルコードに含まれる番号付きのコードコメントは、提案を提供します。
• コメントは順番に並べられ、#4 以降のコメントのみが適用されます。この課題の演習には #5 が適用されます。

作業を確認する方法

コードが指定された要件を満たしていることを検証するには、次の手順を実行します。

1. Visual Studio Code を使ってアプリをビルドして実行します。

   注

   結果が仕様の要件を満たさない場合は、すべての検証手順を完了する前に検証テストを終了できます。 実行中のプログラムから強制的に終了するには、ターミナル パネルで Ctrl キーを押しながら C キーを押します。 実行中のアプリを終了した後、作業中の問題に対処できると思われる編集を完了し、更新内容を Program.cs ファイルに保存してから、コードをビルドし直して実行します。

2. ターミナル コマンド プロンプトがプログラムの開始点として表示されます

3. コマンド プロンプトで、「 2 」メニューを入力します。

   Welcome to the Contoso PetFriends app. Your main menu options are:
    1. List all of our current pet information
    2. Display all dogs with a specified characteristic
   
   Enter your selection number (or type Exit to exit the program)
   2
   
   Enter dog characteristics to search for separated by commas
   

4. コマンド プロンプトで、 ゴールデン、ビッグを 入力し、Enter キーを押して、アニメーションとカウントダウンで検索ステータス メッセージをテストします

5. コンソール パネルが、コード出力サンプルと同様の一時的な "検索" ステータス メッセージで更新されることを確認します。

   Enter dog characteristics to search for separated by commas
   golden, big
   
   searching our dog Nickname: lola for big / 2
   

   searching our dog Nickname: lola for big -- 1
   

   searching our dog Nickname: lola for golden \ 1
   

   searching our dog Nickname: lola for golden * 0
   

6. ユーザーが入力したすべての検索語句は、各犬ごとに表示され、その際に "searching" スピンアニメーションとカウントダウンが含まれます。出力の"犬を検索中..."という行は、前の行を上書きしてアニメーションを形成します。

7. カウントダウン付きの "検索" 状態アニメーションの例については、実行中のプログラムの前のアニメーション画像を参照してください

8. 検索が停止した後に検証すると、"searching" アニメーションとカウントダウンが表示されなくなります

注

コードが要件を満たしている場合は、各手順を順番に完了し、期待される結果を 1 つのテスト パスで確認できる必要があります。

この演習の課題に成功した場合は、おめでとうございます。