{"id":19111950,"url":"https://github.com/devkanro/compositionhelper","last_synced_at":"2025-08-17T07:08:20.121Z","repository":{"id":86773094,"uuid":"46171818","full_name":"devkanro/CompositionHelper","owner":"devkanro","description":"CompositionHelper for UWP Composition API.","archived":false,"fork":false,"pushed_at":"2016-08-16T02:09:30.000Z","size":231,"stargazers_count":33,"open_issues_count":1,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-01T08:53:57.129Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devkanro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-11-14T11:20:55.000Z","updated_at":"2022-03-28T19:33:41.000Z","dependencies_parsed_at":"2023-06-03T02:30:36.431Z","dependency_job_id":null,"html_url":"https://github.com/devkanro/CompositionHelper","commit_stats":null,"previous_names":["higankanshi/compositionhelper"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/devkanro/CompositionHelper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devkanro%2FCompositionHelper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devkanro%2FCompositionHelper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devkanro%2FCompositionHelper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devkanro%2FCompositionHelper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devkanro","download_url":"https://codeload.github.com/devkanro/CompositionHelper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devkanro%2FCompositionHelper/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270817245,"owners_count":24650960,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-17T02:00:09.016Z","response_time":129,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T04:30:45.619Z","updated_at":"2025-08-17T07:08:20.095Z","avatar_url":"https://github.com/devkanro.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CompositionHelper\nHelper for UWP Composition API.    \nYou can use Composition API by a easy way.  \n\n为 UWP 的 Composition API 提供助手。  \nCompositionHelper 提供更为简单的使用 Composition API 的方式。  \n\n## Nuget Package\nInstall [CompositionHelper](https://www.nuget.org/packages/CompositionHelper/)\n```PowerShell\nPM\u003e Install-Package CompositionHelper \n```\n\n## Features\n### Animation\nNow we support all animation of Composition API.   \n现在我们支持所有的 Composition API 的动画 API。  \n\nYou can use it by classic way(XAML).   \n你可以通过经典的 XAML 来创建 Composition 的动画。  \n```XAML\n\u003canime:Storyboard x:Key=\"Storyboard\" xmlns:anime=\"using:CompositionHelper.Animation\"\u003e\n    \u003canime:ScalarAnimationUseKeyFrame TargetName=\"TargetRect\" Duration=\"0:0:1\" TargetProperty=\"Opacity\"\u003e\n        \u003canime:ScalarKeyFrame Progress=\"0.0\" Value=\"1.0\" /\u003e\n        \u003canime:ScalarKeyFrame Progress=\"1.0\" Value=\"0.0\" /\u003e\n    \u003c/anime:ScalarAnimationUseKeyFrame\u003e\n\n    \u003canime:Vector3AnimationUseKeyFrame TargetName=\"TargetRect\" Duration=\"0:0:1\" TargetProperty=\"Offset\"\u003e\n        \u003canime:Vector3KeyFrame Progress=\"0.0\" Value=\"0,0,0\" /\u003e\n        \u003canime:Vector3KeyFrame Progress=\"1.0\" Value=\"100,100,100\"\u003e\n            \u003canime:Vector3KeyFrame.EasingFunction\u003e\n                \u003canime:CubicBezierEasingFunction ControlPoint1=\"0,0\" ControlPoint2=\"0.5,1.0\"\u003e\u003c/anime:CubicBezierEasingFunction\u003e\n            \u003c/anime:Vector3KeyFrame.EasingFunction\u003e\n        \u003c/anime:Vector3KeyFrame\u003e\n    \u003c/anime:Vector3AnimationUseKeyFrame\u003e\n\u003c/anime:Storyboard\u003e\n```\n\n### Fluent interface of animation  \nYou can build composition animations by fluent interface.  \n你可以通过流式接口来构建 Composition API 的动画。\n\nFluent interface can make your code easier to read.  \n流式接口可以让你的代码更加的易于理解。  \n\n01.Use the extension method `StartBuildAnimation` to create a storyborad context.  \n01.使用针对 Visual 的拓展方法 `StartBuildAnimation` 来创建一个故事版上下文。\n```CSharp\nRectangle.GetVisual().StartBuildAnimation();\n```\n\n02.`Animate` can build simple \"From-To\" animation, `AnimateWithKeyFrame` can build keyframe animation, `AnimateWithExpression` can build expression animation.  \n02.`Animate` 可以创建简单的 \"From-To\" 动画，`AnimateWithKeyFrame` 可以创建关键帧动画，`AnimateWithExpression` 则可以创建表达式动画。\n```CSharp\nRectangle.GetVisual().StartBuildAnimation()\n    .Animate(AnimateProperties.Offset.Y)\n    .ToExpression(\"this.target.Offset.y + 100\")\n    .Spend(TimeSpan.FromSeconds(0.5))\n```\n\n03.Use `Over` method to go back to storyboard context.  \n03.使用 `Over` 结束动画的创建，返回到故事版上下文。\n```CSharp\nRectangle.GetVisual().StartBuildAnimation()\n    .Animate(AnimateProperties.Offset.Y)\n    .ToExpression(\"this.target.Offset.y + 100\")\n    .Spend(TimeSpan.FromSeconds(0.5))\n    .Over();\n```\n\n04.`Start` and `Wait` the storyboard.  \n04.使用 `Start` 开始故事版，并用 `Wait` 等待动画结束。\n```CSharp\nawait Rectangle.GetVisual().StartBuildAnimation()\n    .Animate(AnimateProperties.Offset.Y)\n    .ToExpression(\"this.target.Offset.y + 100\")\n    .Spend(TimeSpan.FromSeconds(0.5))\n    .Over()\n\t.Start().Wait();\n```\n\n### Composition Properties warpper\nYou can use XAML to set UIElement's Visual composition properties.  \n你能使用 XAML 来设置 UIElement 的在 Composition API 表现的呈现相关的属性。 \n\nEasyCompositionProperties can help you set it by String in XAML.  \nEasyCompositionProperties 能帮助你在 XAML 中使用字符串设置各种不同属性。\n```XAML\n\u003cRectangle xmlns:helper=\"using:CompositionHelper\" \n           x:Name=\"TargetRect\" Fill=\"#FF008BFF\" Width=\"100\" Height=\"100\"\n           \n           helper:EasyCompositionProperties.Opacity=\"0.5\" \n           helper:EasyCompositionProperties.Offset=\"50,50,0\"\n           helper:EasyCompositionProperties.RotationAngle=\"50\"\n           helper:EasyCompositionProperties.CenterPoint=\"0.5,0.5,0.5\"/\u003e\n```\n\nCompositionProperties can help you set it in C#.  \nCompositionProperties 能帮助你通过对象设置属性。  \n```CSharp\nvar v3 = new Vector3(1, 2, 3);\nvar m4x4 = new Matrix4x4(11, 12, 13, 14, 21, 22, 23, 24, 31, 32,33, 34, 41, 42, 43, 44);\n\nCompositionProperties.SetOffset(TargetRect,v3);\nCompositionProperties.SetTransformMatrix(TargetRect,m4x4);\n```\n\nAlso you can use it with Extension Method.  \n你也可以使用提供的拓展方法。\n```CSharp\nvar v3 = new Vector3(1, 2, 3);\nvar m4x4 = new Matrix4x4(11, 12, 13, 14, 21, 22, 23, 24, 31, 32,33, 34, 41, 42, 43, 44);\n\nTargetRect.SetOffset(v3);\nTargetRect.SetTransformMatrix(m4x4);\n```\n\n### Effects\nWe found there are some Airspace issue between Composition API visual tree and XAML visual tree, so we remove shadow effect, but you can still find those codes in early Commit.  \n我们发现在 Composition API 的视觉树与 XAML 的视觉树之间有空域问题，所以我们移除了阴影特效，你仍然可以在之前的 Commit 上找到这些代码。\n\n## Update Log \n\n### 16/08/07\nAdd fluent animation APIs.\n\n添加了流式动画接口 API。\n\n### 16/01/11\nRemove ShadowEffect and Clear up APIs.\n- Remove `ShadowEffect` class.\n- Remove `Microsoft.UI.Composition.Toolkit` library.\n- Clear up some APIs.\n\n移除阴影特效，清理一些 API。\n- 移除 `ShadowEffect` 类。\n- 移除 `Microsoft.UI.Composition.Toolkit` 库。\n- 清理一些 API 的代码。\n\n### 15/12/15\nAdd ShadowEffect.\n- Add `ShadowEffect` class.\n- Add `Microsoft.UI.Composition.Toolkit` library.\n\n添加阴影特效。\n- 添加 `ShadowEffect` 类。\n- 添加 `Microsoft.UI.Composition.Toolkit` 库。\n\n### 15/12/14\nAdd ExpressionAnimation and ReferenceParameter support.\n- Perfect the `ExpressionAnimation` and `ReferenceParameter` class.\n- Add `Completed` event for `Storyboard` class.\n\n添加 ExpressionAnimation 与 ReferenceParameter 支持。\n- 完善 `ExpressionAnimation` 与 `ReferenceParameter` 类，现在可更方便的使用表达式动画，与添加引用参数。\n- 为 `Storyboard` 类添加 `Completed` 事件。\n\n### 15/12/13\nAdd Composition Properties warpper.\n- Add `EasyCompositionProperties` class.\n- Add `CompositionProperties` class.\n\n添加 Composition 呈现属性封装。\n- 添加 `EasyCompositionProperties` 类。\n- 添加 `CompositionProperties` 类。\n\n### 15/12/12\nUpdate helper to base SDK 10586.  \n- Add `ColorKeyFrame` and `ColorAnimationUseKeyFrame`.  \n- Add `QuaternionKeyFrame` and `QuaternionAnimationUseKeyFrame`.  \n- Add `QuaternionParameter`.  \n- Remove `StoryBoard.Pause()` method.  \n\n更新助手基于 SDK 10586。\n- 添加 `ColorKeyFrame` 和 `ColorAnimationUseKeyFrame`。\n- 添加 `QuaternionKeyFrame` 和 `QuaternionAnimationUseKeyFrame`。\n- 添加 `QuaternionParameter`。\n- 移除 `StoryBoard.Pause()` 方法。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevkanro%2Fcompositionhelper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevkanro%2Fcompositionhelper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevkanro%2Fcompositionhelper/lists"}