Übung – Hinzufügen einer verbesserten Suchanimation

  • 12 Minuten

Die Contoso Pets-App hilft bei der Suche nach neuen Häusern für aufgegebene Haustiere. Ein Teil der Anforderung zur Verbesserung der Suchfunktion besteht darin, die animierte Simulation zu aktualisieren, die den Suchfortschritt angibt.

Suchanimationsspezifikation

In dieser zweiten Herausforderungsübung müssen Sie die Suchanimation so aktualisieren, dass sie einem Dreheffekt ähnelt, und einen Countdown hinzufügen (2, 1, 0).

Ändern der aktuellen Animationssymbole für „Suchen“

  • Aktualisieren der aktuellen „Symbole“ für die Animation string[] searchingIcons = {". ", ".. ", "..."};

  • Verwenden neuer Symbole, die das Drehen simulieren

  • Überprüfen Sie die animierte GIF-Datei, die für ein Beispiel folgt.

  • Sie können die „Suchen“-Animation so entwerfen, dass die Drehbewegung anders als im animierten Bild funktioniert.

  • Die "Suchen..."-Animation soll weiter überschrieben werden, sobald jede Animation abgeschlossen ist, sodass sie in derselben Zeile bleibt und nicht angezeigt wird, nachdem die Animation gestoppt wurde.

    Animierter Screenshot eines Beispiels für die Suche nach Hundebeschreibungen mit vier vom Benutzer übermittelten Begriffen.

Fügen Sie der Suchanimation einen Countdown hinzu

  • Überprüfen Sie das vorherige animierte Bild, und notieren Sie sich den Countdown in der Ausgabe.
    • „searching...retriever / 2“
    • Die vorherige Zahl "2" wird als "1" und schließlich als "0" angezeigt, nach unten gezählt.
  • Aktualisieren Sie die Schleife mit der Suchanimation, sodass die Schleife einen Countdown anzeigen kann.

Codekommentare

  • Nummerierte Codekommentare im Startcode bieten Vorschläge
  • Die Kommentare befinden sich in einer sequenziellen Reihenfolge, und nur die Kommentare, die mit #4 beginnen, und #5 gelten für diese Übung der Herausforderung.

So überprüfen Sie Ihre Arbeit

Führen Sie die Anweisungen aus, um zu überprüfen, ob Ihr Code die angegebenen Anforderungen erfüllt:

  1. Verwenden Sie Visual Studio Code, um Ihre App zu erstellen und auszuführen.

    Hinweis

    Sie können den Überprüfungstest vor dem Abschluss aller Überprüfungsschritte beenden, wenn ein Ergebnis angezeigt wird, das die Spezifikationsanforderungen nicht erfüllt. Um ein Beenden des ausgeführten Programms zu erzwingen, drücken Sie im Terminalbereich STRG-C. Nachdem Sie die ausgeführte App beendet haben, nehmen Sie die Bearbeitungen zum Beheben des aktuellen Problems vor, speichern Sie die Änderungen in der Datei „Program.cs“, erstellen Sie ihren Code erneut, und führen Sie ihn aus.

  2. Die Terminal-Eingabeaufforderung sollte als Ausgangspunkt für das Programm angezeigt werden.

  3. Geben Sie an der Eingabeaufforderung 2 ein:

    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. Geben Sie an der Eingabeaufforderung golden, groß ein und drücken Sie die EINGABETASTE, um die Suchstatusmeldungen mit Animation und Countdown zu testen.

  5. Stellen Sie sicher, dass die Konsolenanzeige mit temporären "Such"-Statusmeldungen aktualisiert wird, die den Codeausgabebeispielenähneln:

    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. Alle von der benutzenden Person eingegebenen Suchbegriffe sollten mit der Drehanimation „searching“ und dem Countdown für jeden Hund angezeigt werden, bei dem die Zeile „unseren Hund suchen...“ in der Ausgabe die vorherige Zeile überschreibt, um eine Animation zu erstellen.

  7. Weitere Beispiele für die Statusanimation "Suchen" mit Countdown entnehmen Sie dem vorherigen animierten Bild des laufenden Programms.

  8. Überprüfung, nachdem die Suche beendet wurde und die Animation „searching“ und der Countdown nicht mehr angezeigt werden

Hinweis

Wenn Ihr Code die Anforderungen erfüllt, sollten Sie jeden Schritt in der Reihenfolge ausführen und die erwarteten Ergebnisse in einem einzigen Testdurchlauf anzeigen können.

Wenn Sie diese Übung abgeschlossen haben: Herzlichen Glückwunsch!