インストール パッケージの進行状況バーを気にしたことはありますか? 美しいプログレスバーを設定する方法を知っていますか? 特別な進行状況バーの要件を実装する方法を知っていますか?
インストール パッケージの美化プロセスで、より重要な詳細が 1 つあります。それは、プログレス バーの表示スタイルです。
プレゼンテーションが自然かどうか、十分に美しいかどうか、明るいスポットがあるかどうか、これらは多くの場合、お客様が追求するポイントです。
nsNiuniuSkin+Nsis のインストール パッケージのビューティフィケーション ソリューションには、さまざまなシナリオのニーズを満たすためにプログレス バーの UI 表示を構成するための複数のオプションがあります。もちろん、私たちのプログレスバーは現在比較的伝統的であり、左から右へのプログレスプレゼンテーションに属しています.将来的には、さまざまな顧客の要件を満たすために、より多くの形式のプログレスサンプルを提供します.
構成方法を見てみましょう。
1. Slider コントロールを使用して、背景画像と前景画像を組み合わせて実現します
これは最も標準的な duilib プログレス バー設定スキームです. 背景画像が最初に描画され, Slider 領域全体をカバーします.前景画像は後で描画されます.前景画像は進行状況にのみ描画されます.現在の進行状況を表示します。構成スクリプトは次のとおりです。
<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'" />効果は次のとおりです。
ここで、プログレス バーを角の丸い画像として設計し、同時に XML スクリプトで corner 属性を使用して両端を固定し、中央を伸ばすことができることに注意してください。このようにして、可変長プログレスバー効果を得ることができます; 前景画像と背景画像はグラデーションカラーで設計されているため、ストレッチプロセス中にレイヤーが表示されます.
2. スライダー コントロールを使用して画像を削除し、進行状況バーが画像全体に完全に表示されるようにします
それは完全に色によって制御されます; スライダー コントロールでは、画像を通して進行状況を示すことに加えて、前景色と背景色を通して進行状況を示すこともできます; 同時に、グラデーションの前景色を実装しており、具体的な構成は次のとおりです。次のとおりです。
<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" />効果は次のとおりです。
一部のシナリオでは、プログレス バーのエレガントさを維持しながら、インストール パッケージのサイズを可能な限り小さくする必要があります。その場合は、この構成スキームがより適しています。
3.スライダーコントロールを介して、サムイメージと組み合わせて進行状況のプレゼンテーションを実現します
上記の2つの効果だけで十分ですか？90%以上のシーンではこれで十分、シンプルで便利ですが、より完璧な効果を追求したい場合は、次の解決策を試してみてください。
例えば、進行状況に到達した場所に小さなロケットを提示して、インストールが前進しようと頑張っていることを示します。
構成は次のとおりです。
<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'" />効果は次のとおりです。
このソリューションは、実際にはソリューション 1 に基づいており、現在の進行状況を示すサムイメージを追加しています。効果は非常に優れていると言えます。
実際、ここでサムイメージを使用する必要はありません。コーナー属性と組み合わせて、フォアイメージを介して直接実行することもできます。知りたい場合は、私たちのコミュニケーショングループに相談して議論することができます!
4. プログレス バーは gif をサポートし、インストールをスムーズに進めます
水に関するインストールパッケージを作りたいのですが、インストールの途中で魚を泳がせたいのですが、どこに行っても魚が泳いでくれます。
明らかに、上記の 3 つの解決策のいずれも実現できません.現在、nsNiuniuSkin プラグインはそのようなプログレス バーをサポートしていません。
答えはノーです. nsNiuniuSkin および Nsis ソリューションの最大の特徴は柔軟性です. Nsis へのすべてのインターフェイスを提供します. これは、スクリプトの機能と組み合わせてこの機能を実現できます. 構成スキームは次のとおりです。
- フローティング GifAnim コントロールを xml に配置して、泳いでいる魚を表示します
- インストール進行状況のコールバックの NSIS スクリプトでは、計算された進行状況を介して GifAnim コントロールの位置を制御し、対応する効果を実現できます (前のセクションで説明したロケット、実際には、スクリプトを介して達成することもできます)。 )
XML 構成は次のとおりです。
<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"/>NSIS スクリプトは次のとおりです (次のスクリプトを ExtractCallback 関数に追加します)。
# 计算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"効果は次のとおりです。
これはより動的ではありませんか？
ここでは、前景画像と背景画像を用意する必要はありません.前景色と背景色を使用するスキームは同じであり、必要に応じてそれらを組み合わせることができます!
プログレス バーの構成スキームが他にもある場合、またはインストール パッケージの進行状況に関する詳細で要求の厳しい要件がある場合は、お気軽にお問い合わせください。
エピローグ
インストール パッケージのインストール プロセス中、洗練された UI により、インストールされた製品に対する顧客の印象が向上することが多く、ユーザー エクスペリエンスに対するソフトウェア サービス プロバイダーの焦点と意図をよりよく反映することができます。私たちの取り組みにより、インストール パッケージの作成がより簡単で楽しいものになることを願っています。
世の中に難しいインストールパッケージがなくなりますように！