これは削除アニメーションです。選択したコンテンツがブラック ホールに吸い込まれ、それに応じて周囲のコンテンツが曲がります。 「元に戻す」をクリックして元に戻します。これは、C# で書かれた Avalonia コントロールです。
TKCode.Arc 1.0.0 が本日正式にリリースされました。これは私が作成した Avalonia 12 コンポーネント ライブラリのセットです。MIT ライセンスです。この記事では感情については説明しませんが、主にデザイン トークン、スプリング アニメーション、パフォーマンス ルール、およびクロード コードを使用してこのような大規模なプロジェクトを作成する際の実際の費用など、それがどのようにまとめられたかについて説明します。
最初に明確にしておきますが、ビジュアル言語とアニメーション効果は Arc (uiarc.dev) から提供されています。その 112 個の無料コンポーネントを Avalonia ネイティブ コントロールに移植しました。これは私の個人的なプロジェクトであり、Arc の公式製品ではありません。ブラック ホールやホログラフィック カードなどの特殊効果コンポーネントはオリジナル デザインで、インタラクションとアニメーション効果は Arc Pro を参照しています。
まずは走り始める
.NET 10 SDKが必要です。これら 3 つのコマンドは、会話リストとストリーミング応答を備えた AI チャット デスクトップ アプリケーションを生成します。
dotnet new install TKCode.Arc.Templates
dotnet new tkcode-arc-ai-chat -n Assistant
dotnet run --project Assistant
デフォルトの応答は、事前に設定されたサンプルコンテンツです。独自のモデルクライアントに置き換えると、実際のモデルにアクセスできるようになります。テンプレート名を次のように置き換えます。 tkcode-arc-admin 経営背景です、と置き換えてください。 tkcode-arc-devtool IDE開発ツールです。tkcode-arc-lib これを使用して独自のコントロール ライブラリを構築します。
既存のプロジェクトにパッケージを直接追加することもできます。Application クラスと App.axaml 変更する必要はありません:
AppBuilder.Configure()
.UsePlatformDetect()
.WithInterFont()
.WithArcFonts()
.UseArc(arc => arc
.UseArcControls()
.WithTheme(t => t.Appearance(ArcAppearance.System)
.Accent(ArcAccentPreset.Neutral)));
中には何があるのか
| バッグ | コンテンツ |
|---|---|
TKCode.Arc |
112 個の Arc コンポーネント、レイアウト パネル、 Markdown、PropertyGrid、Cascader、TransferBox およびその他の拡張コントロール |
TKCode.Arc.Blocks |
ページレベルのポートフォリオ: AI の会話、価格設定とチェックアウト、請求、ダッシュボード、チーム管理 |
TKCode.Arc.AdvancedCharts |
DataGrid、SankeyFlow、Sunburst、RaceBarChart 待って |
TKCode.Arc.Special |
特殊効果コンポーネント: サーフェス、ローディング、音声、ポインター効果 |
TKCode.Arc.Workflow / .Dock / .Terminal |
ワークフロー キャンバス、IDE スタイルのドッキング レイアウト、libghostty-vt ベースのターミナル |
TKCode.Arc.Pdf / .Audio |
PDF ビューア (デスクトップ PDFium、ブラウザ pdf.js)、オーディオ再生 |
TKCode.Arc.Foundation |
トークン、テーマ、言語、パッケージ登録ランタイムは Avalonia のみに依存します |
合計 21 の NuGet パッケージが同じバージョンで一緒にリリースされます。 net8.0、net10.0 そして net11.0(ターミナル パッケージには後者の 2 つだけがあります)、Avalonia 12.1.4 に基づいています。オンライン例と自動生成された API テーブルを含む 300 以上のドキュメント ページ。
デザイン トークン: コントロールは色をハードコーディングしません。
色、丸い角、影、フォントはすべてグローバル トークンから取得され、次のようにテーマ ファイルから取得されます。
単一コントロールの幾何学的パラメータはコントロール トークンに配置され、コントロールと一緒に配置されます。
[ControlDesignToken]
internal sealed class ButtonToken : AbstractControlDesignToken
{
public Thickness InlinePaddingMD { get; set; }
public double HoverOpacity { get; set; }
public override void CalculateTokenValues(bool isDarkMode)
{
base.CalculateTokenValues(isDarkMode);
InlinePaddingMD = new Thickness(16, 0);
HoverOpacity = 0.91;
}
}
テーマへの入り口は 1 つだけあり、各トークンは外観とアクセント カラーに従って再計算され、変更された値のみが書き込まれ、コントロールが適切に更新されます。
ArcTheme.Apply(t => t.Appearance(ArcAppearance.Dark));
ここに落とし穴があります。ArcThemeManager.ApplyAsync 公開ステップは UI スレッドに戻る必要があります。 UIスレッド上で .Wait() または .Result デッドロックしてしまいます。待つか電話するか Apply。
ルールはソース ジェネレーターによってバックアップされます。たとえば、各パブリック コントロールには対応するトークン クラスが必要であり、トークン属性のタイプは制限されています。同じ ControlTheme キーは 1 つのファイルでのみ定義できます。違反は直接報告されます。 ARCF 最初の診断は、実行するまで検出する必要はありません。テーマ ファイルもジェネレーターによって読み込まれるため、手動でマージする必要はありません。 *Themes.axaml。
アニメーション効果: コードではなくテーマで記述されます。
ほとんどのアニメーション宣言は ControlTheme ここではアニメーションレベルごとに分けています:
ArcMotion.Tracks ロード後にコントロールがこれら 2 つの疑似クラスを取得できるようにすることで、最初のフレームではアニメーションが再生されなくなります。アニメのレベルは Full、Reduced、Off 3 番目のレベルは、継承可能な追加属性です。Off 次の 2 つの疑似クラスは存在しません。
スプリングはプレゼンテーションの継続時間とリバウンドに応じて定義され、物理定数などを手動で調整する必要はありません。 Snappy タイムは0.26秒、リバウンドは0.12です。宣言的スプリングは、中断されると速度ゼロの現在値から再開します。速度と手動アニメーションを保持する必要がある場合は、このコードを使用します。
_progress ??= new MotionValue(this, 0, MotionVectors.Double);
_progress.Changed += _ => InvalidateVisual();
await _progress.AnimateTo(1, MotionSpec.Spring(ArcSpring.Snappy));
AnimateTo 戻る Taskターゲットに到達する場合は true、中断される場合は false。フレームは統合スケジューラを介して渡されます TopLevel.RequestAnimationFrame ドライバーはアイドル状態ではフレームを要求しません。
パフォーマンス: いくつかの段階的なルール
アニメーション コンポーネントが多すぎると、パフォーマンスの問題が非常に特殊になります。これらはプロジェクトの実装ルールに書き込まれます。
- フレームごとに描画されるテキスト キャッシュ
TextLayoutキャッシュしないでくださいFormattedText。 アバロニア 12 のFormattedText.Draw再分岐と再形成のたびに、プロジェクトによって記録されるオーバーヘッドは、ラテン語の場合は約 3 KB / 0.3 ミリ秒、中国語の場合は約 22 KB です。TextLayout配置された行を保持し、描画時にグリフのみを出力します。 - 列挙ステータスには疑似クラスを使用し、属性セレクターは使用しません。
^[Variant=Primary]各インスタンスはアクティベータを作成し、プロパティとボックス比較をサブスクライブします。列挙を次のようにマッピングします:primary再利用^:primaryボタンやリスト項目などの繰り返しコントロールを最初に変更する必要があります。 - 使用頻度の低いコンポーネントはオンデマンドで作成されます。 各テンプレート ノードは約 5 ～ 10 KB をマウントしますが、非表示ノードも引き続き課金されます。フォーカス リング、ローディング スピナー、ホバー バブルはすべて、初めて必要になったときに作成されます。
- 重複したアイテムは自己描画され、アニメーションはレイアウトをトリガーしません。 チャートのポイントとグリッドはコントロールを使用します
Render描画とアニメーションでは、変形、透明度、自己描画状態のみが変更されます。 - ループアニメーションには境界が必要です。 ビューポート内で表示され、マウントされ、アニメーション レベルが許可されている場合にのみ実行されます。
効果の例:GanttTimeline タスクを 60 個に拡大すると、フレームあたりの割り当ては約 1.8 MB から約 100 KB に減少し、ビューの外側の線、バー、矢印は描画されなくなります。
AOT とオンデマンドのコンパイル
このライブラリはリフレクションを使用せず、クリッピングおよび NativeAOT と互換性があるように構築されています。
dotnet publish -c Release -p:PublishAot=true
AOT 公開に .NET 11 SDK を使用する場合は、その最適化された公開により、Avalonia 12.1 のコンパイルされた XAML と起動時間が破棄されることに注意してください。 No precompiled XAML found。プロジェクトファイルに追加
Lucide アイコンをすべてパッケージに詰め込む必要はありません。ソース ジェネレーターは C# と XAML をスキャンし、使用されるアイコンのみをコンパイルします。実行時に決定されるアイコンは、プロジェクト ファイルで宣言されます。
列挙型セレクター EnumSelector これも同じ考えです。メンバーと表示テキストは、リフレクションではなくジェネレーターによって生成されます。
本格的な仕事もできる
PdfViewer サムネイル、目次、検索、テキスト選択、リンクがあります。バックエンドがない場合、ドキュメントはエラーを報告してプロンプトを表示し、偽のページは表示されません。
DataGrid 領域選択、インライン編集、フィルハンドル、クリップボード、グループ化、エクスポートをサポートします。ワークフロー キャンバスはパン、ズーム、自動配置、元に戻す機能をサポートしており、ドッキング レイアウトは JSON として保存できます。
このセットの値段はいくらでしたか？
最初の提出から 1.0 が完成するまで 19 日かかり、282 件の提出があり、そのうち 263 件はクロードによって共同署名されました。 Claude のサブスクリプションと API の料金は 20,000 元近くで、自分の時間を除き、私が自分で支払いました。
ローカルのクロード コード セッション レコードをスキャンしました。このプロジェクトにはおよそ次のような時間がかかりました。
- リクエスト数：約90,000回
- トークン総額：約243億
- うちキャッシュリード：約237億件、97.6％を占める
- モデルの実生産数：約9,300万
プロジェクトの制約は、マシンによってチェックできるものとして記述する必要があります。AGENTS.md 厳格なルール、ジェネレーターの診断、ドキュメント ページが欠落している場合に失敗するテスト、トークンとプリセットのベースライン スナップショットがあります。現在、倉庫には 10,000 を超えるテスト方法があります。
使えるかどうかはご自身の判断でお願いします。コードと提出記録は公開されており、各バージョンで修正されたバグは CHANGELOG にリストされます。
まだ終わっていない
- モバイル コンポーネントはデスクトップ上の携帯電話フレームでのみプレビューされており、実際の Android および iOS デバイスでは使用されていません。
- ビデオ コンポーネントはまだウェアハウスにあり、NuGet に公開されていません。
- PDF ビューアは、タッチ スクリーン上でのテキストのドラッグをサポートしていません。中国語、日本語、韓国語のフォントが埋め込まれていない文書は、表示効果がマシンのフォントに依存します。
1.0 からはセマンティック バージョニングが採用され、API の重大な変更は新しいメジャー バージョンにのみ表示されます。 11 のパッケージの API を以前のプレビュー バージョンと比較しましたが、重大な変更は見つかりませんでした。ただし、通常は表示されない多くのコンポーネントはテンプレートから削除されています。カスタマイズすれば ControlTheme またはこれらを見つけるためのコード PART_ 名前が存在しない場合に対処するため。
住所
ご質問がある場合は、問題を送信してください。 Avalonia を使用している場合、最初に聞きたいのは、どのコントロールが使いにくいかということです。
