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

  • 12 分

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

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

この 2 番目の課題の演習では、検索アニメーションを更新してスピンするようにし、カウントダウン (2、1、0) を追加する必要があります。

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

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

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

  • 例として表示されるアニメーション gif を確認します

  • "searching" アニメーションをデザインして、アニメーション化された画像に表示されたのとは動作が異なるように "スピン" を表示できます

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

    ユーザーが入力した 4 つの用語で犬の説明を検索するアプリケーションの例のアニメーション付きスクリーンショット。

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

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

コード コメント

  • スターター コード内の番号付きコード コメントは提案を示す
  • コメントは順番に並べられていて、#4、#5 で始まるコメントのみがこの課題の演習に適用される

作業をチェックする方法

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

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

    Note

    結果が仕様の要件を満たさない場合は、すべての検証手順を完了する前に検証テストを終了できます。 実行中のプログラムから強制的に終了するには、ターミナル パネルで 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. コマンド プロンプトで「golden, big」と入力し、Enter キーを押して、アニメーションとカウントダウンを使用して検索状態メッセージをテストします

  5. コンソール パネルが、コード出力サンプルと "同様" に、一時的に "searching" 状態メッセージが表示されて更新されることを確認してください。

    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" の回るアニメーションと各犬のカウントダウンとともに表示されます。出力内の "searching our dog... (犬を探しています)" の行が前の行を上書きしてアニメーションを作成します

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

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

Note

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

この演習課題に成功したら完了です。