Haben Sie sich wirklich um den Fortschrittsbalken des Installationspakets gekümmert? Wissen Sie, wie man einen schönen Fortschrittsbalken konfiguriert? Wissen Sie, wie Sie eine spezielle Fortschrittsbalkenanforderung implementieren?
Bei der Verschönerung des Installationspakets gibt es ein wichtigeres Detail, nämlich den Darstellungsstil des Fortschrittsbalkens!
Ob die Präsentation natürlich ist, ob sie schön genug ist, ob es Lichtblicke gibt, das sind oft Punkte, denen Kunden nachgehen.
In der Verschönerungslösung des Installationspakets von nsNiuniuSkin+Nsis haben wir mehrere Optionen, um die UI-Präsentation des Fortschrittsbalkens zu konfigurieren, um die Anforderungen verschiedener Szenarien zu erfüllen. Natürlich ist unser Fortschrittsbalken derzeit relativ traditionell und gehört immer noch zu einer Fortschrittsdarstellung von links nach rechts. In Zukunft werden wir weitere Formen von Fortschrittsmustern bereitstellen, um den Anforderungen verschiedener Kunden gerecht zu werden.
Werfen wir einen Blick auf die Konfigurationsmethoden:
1. Durch die Slider-Steuerung, kombiniert mit dem Hintergrundbild und dem Vordergrundbild zu erreichen
Dies ist das Standardschema für die Duilib-Fortschrittsbalkenkonfiguration. Das Hintergrundbild wird zuerst gezeichnet und deckt den gesamten Slider-Bereich ab, während das Vordergrundbild später gezeichnet wird und das Vordergrundbild nur dort gezeichnet wird, wo der Fortschritt hingeht, so wie zur Unterscheidung Aktuellen Fortschritt anzeigen. Das Konfigurationsskript lautet wie folgt:
<Slider name="slrProgress" padding="20,53,20,0" height="24" value="20" min="0" max="100" mouse="false" foreimage="file='images\progress_fore.png' corner='5,5,5,5'" bkimage="file='images\progress_bk.png' corner='5,5,5,5'" />Die Wirkung ist wie folgt:
An dieser Stelle sei angemerkt, dass wir den Fortschrittsbalken auch als Bild mit abgerundeten Ecken gestalten können und gleichzeitig mit dem Corner-Attribut im XML-Skript die beiden Enden fixieren und die Mitte strecken, also eine variable Länge Fortschrittsbalkeneffekt kann erzielt werden; Das Vordergrundbild und das Hintergrundbild sind mit Verlaufsfarben gestaltet, sodass sie während des Streckvorgangs mehrschichtig erscheinen.
2. Entfernen Sie mit dem Schieberegler das Bild und führen Sie den Fortschrittsbalken vollständig durch das Bild
Es wird vollständig durch Farbe gesteuert; im Slider-Steuerelement können wir den Fortschritt nicht nur durch Bilder anzeigen, sondern auch durch Vorder- und Hintergrundfarben anzeigen; gleichzeitig haben wir eine Vordergrundfarbe mit Farbverlauf implementiert, und die spezifische Konfiguration ist wie folgt folgt:
<Slider name="slrProgress" padding="20,53,20,0" height="8" value="1" min="0" max="100" mouse="false" forecolor="0xFF44D7B6" forecolor2="0xFF2979FF" thumbsize="0,0" bkcolor="#FFE3E3E3" />Die Wirkung ist wie folgt:
In einigen Szenarien müssen wir die Größe des Installationspakets so weit wie möglich reduzieren und gleichzeitig die Eleganz des Fortschrittsbalkens beibehalten, dann ist dieses Konfigurationsschema besser geeignet.
3. Über das Slider-Steuerelement, kombiniert mit dem Daumenbild, um die Fortschrittsanzeige zu realisieren
Reicht es aus, die beiden oben genannten Effekte zu haben? In mehr als 90 % der Szenen sollte es ausreichen, einfach und bequem; aber wenn Sie immer noch einen perfekteren Effekt erzielen möchten, können Sie die folgende Lösung ausprobieren.
Zum Beispiel werden wir eine kleine Rakete an der Stelle präsentieren, an der der Fortschritt erreicht wurde, um anzuzeigen, dass die Installation hart daran arbeitet, voranzukommen.Wie sollen wir das machen?
Die Konfiguration ist wie folgt:
<Slider name="slrProgress" padding="20,53,20,0" height="24" value="20" min="0" max="100" mouse="false" thumbimage="file='images\rocket.png'" thumbsize="50,24" foreimage="file='images\progress_fore.png' corner='5,5,5,5'" bkimage="file='images\progress_bk.png' corner='5,5,5,5'" />Die Wirkung ist wie folgt:
Diese Lösung basiert eigentlich auf Lösung 1 und fügt ein Daumenbild hinzu, um den aktuellen Fortschritt anzuzeigen, der Effekt sollte als sehr gut bezeichnet werden!
Tatsächlich ist es hier nicht notwendig, thumbimage zu verwenden, es kann auch direkt über foreimage erfolgen, kombiniert mit dem Corner-Attribut; hier ist eine Spannung, denken Sie, wie Sie das Vordergrundbild gestalten und dann das Foreimage konfigurieren? Wenn Sie es wissen möchten, können Sie zu unserer Kommunikationsgruppe gehen, um sich zu beraten und zu diskutieren!
4. Der Fortschrittsbalken unterstützt gif und bewegt die Installation
Angenommen, wir möchten ein Installationspaket erstellen, das sich auf Wasser bezieht. Ich möchte, dass ein Fisch im Verlauf der Installation schwimmt. Wo auch immer der Fortschritt ist, er schwimmt dorthin. Was soll ich zu diesem Zeitpunkt tun?
Offensichtlich kann keine der drei oben genannten Lösungen realisiert werden.Zurzeit unterstützt unser nsNiuniuSkin-Plug-in keinen solchen Fortschrittsbalken, bedeutet dies, dass wir einen solchen Effekt nicht erzielen können?
Die Antwort ist nein. Das größte Merkmal der nsNiuniuSkin- und Nsis-Lösungen ist die Flexibilität. Wir stellen alle Schnittstellen zu Nsis bereit, die mit der Fähigkeit von Skripten kombiniert werden können, um diese Funktion zu realisieren. Das Konfigurationsschema ist wie folgt:
- Platzieren Sie ein schwebendes GifAnim-Steuerelement in XML, um schwimmende Fische zu präsentieren
- Im NSIS-Skript des Rückrufs des Installationsfortschritts können wir die Position des GifAnim-Steuerelements durch den berechneten Fortschritt steuern, um den entsprechenden Effekt zu erzielen (die im vorherigen Abschnitt erwähnte Rakete können wir tatsächlich auch über das Skript erreichen). )
Die XML-Konfiguration sieht wie folgt aus:
<Slider name="slrProgress" padding="20,53,20,0" height="24" value="20" min="0" max="100" mouse="false" foreimage="file='images\progress_fore.png' corner='5,5,5,5'" bkimage="file='images\progress_bk.png' corner='5,5,5,5'" /> <GifAnim float="true" name="slrProgress_float" bkimage="file='images\walk.gif'" pos = "20,276,47,320" visible="true"/>Das NSIS-Skript lautet wie folgt (fügen Sie das folgende Skript zur ExtractCallback-Funktion hinzu):
# 计算gif位置，计算X坐标，存入$R2-$R3
System::Int64Op $R6 * 500
Pop $R2
System::Int64Op $R2 / 100
Pop $R2 # left坐标
System::Int64Op $R2 + 20
Pop $R2 # left坐标
System::Int64Op $R2 + 27
Pop $R3 # right坐标
nsNiuniuSkin::SetControlAttribute $hInstallDlg "slrProgress_float" "pos" "$R2,286,$R3,310"Die Wirkung ist wie folgt:
Ist das nicht dynamischer?
Hier ist kein Vordergrundbild und kein Hintergrundbild erforderlich, das Schema der Verwendung von Vorder- und Hintergrundfarbe ist das gleiche und Sie können sie nach Ihren Bedürfnissen kombinieren!
Wenn Sie mehr Fortschrittsbalken-Konfigurationsschemata oder detailliertere und anspruchsvollere Fortschrittsanforderungen für Installationspakete haben, können Sie sich gerne an uns wenden!
Epilog
Während des Installationsvorgangs des Installationspakets kann die exquisite Benutzeroberfläche die Kunden oft noch mehr von den installierten Produkten beeindrucken und den Fokus und die Absicht des Softwaredienstanbieters auf die Benutzererfahrung besser widerspiegeln! Wir hoffen, dass unsere Bemühungen die Produktion von Installationspaketen einfacher und glücklicher machen können!
Möge es auf der Welt keine schwierigen Installationspakete geben!