教程：创建高斯模糊效果¶

在本教程中，您将学习如何应用高斯模糊效果以及如何在满足条件时应用该效果。

视频显示教程的结果。

本教程假定您了解使用 Kanzi Studio 的基础知识。熟悉 Kanzi Studio 的最佳入门点是：

获取教程¶

要获取本教程，请在 Kanzi Studio 的 Quick Start 窗口中点击 Examples。在 Blur 教程旁点击。

Kanzi Studio 会将教程下载到 <KanziWorkspace>/Tutorials 目录。您可以找到：

教程起点工程位于 <KanziWorkspace>/Tutorials/Blur/Start 目录中。
完成的教程位于 <KanziWorkspace>/Tutorials/Blur/Completed 目录中。

起始项目的内容¶

起点工程包含您完成本教程所需的内容：

Button 预设是 Factory Content Button 的自定义版本。
UpdateContent 预设提供弹出通知的内容。
PopupBackground 纹理为弹出通知提供背景。

创建模糊效果¶

在本节中，您将创建模糊效果。

要创建模糊效果：

在 Kanzi Studio 的 Quick Start 窗口中点击 Examples。在 Blur 教程旁点击 Open 并选择 Start project。

在 Activity Browser 中，Root 并行活动主机包含显示的 CarScreen 活动：
- 显示3D汽车模型的 Car 节点。
- 您在本教程中用于显示弹出通知的 ProfileButton。
小技巧

如果您无法在 Preview 中看到全部内容，可以在 Preview 的右上角调整 Preview 缩放级别。
在 Library 中，按 Alt 并右键单击 Effects 并选择 Blur Effect 2D。

Blur Effect 2D 效果对 2D 节点的内容应用高斯模糊。
从 Library 中，将 Blur Effect 2D 效果拖到 Prefabs 上，并将其放在 CarScreen > Car 节点上。

通过这种方式，您在 Car 节点中将 Effect Prefab 属性设置为 Blur Effect 2D。

Blur Effect 2D 效果默认情况下应用于 2D 节点，其中相互混合的像素圆形区域的半径为 8 像素的模糊。
控制模糊量：
1. 在 Library > Effects 中，选择 Blur Effect 2D 效果。在 Properties 中，在 Blur Radius 属性旁边，单击。在 Publish Property 对话框中，单击 OK。
  
  Kanzi Studio 从 Blur Radius 属性创建一个自定义属性，并在 Blur Effect 2D 中创建一个到该属性的 ##Template 绑定。
2. 在 Prefabs 中，选择 CarScreen > Car 节点。在 Properties 中，添加 Blur.BlurEffect2D.Radius 属性。
  
  Kanzi Studio 向 Car 节点添加了一个 To Source 绑定，该绑定将 Blur.BlurEffect2D.Radius 属性的值推送到通过节点的 Node2D.Effect 属性提供的 Blur Effect 2D 实例。
您现在可以通过调整该节点中 Blur.BlurEffect2D.Radius 属性的值来控制 Car 节点中的模糊量。

使用状态管理器控制模糊效果。¶

在本节中，您将创建一个状态管理器，用于控制 Car 节点中的模糊效果。您使用状态管理器来为正常渲染和模糊状态之间的过渡设置动画。在接下来的部分中，您将创建一个弹出通知，并使用状态管理器在显示该通知时模糊 Car 节点的内容。

要使用状态管理器控制模糊效果：

在 Prefabs 中，选择 CarScreen > Car 节点。在 State Tools 中，点击 Create State Manager。

Kanzi Studio 创建一个状态管理器并将其分配给 Car 节点。
双击 Create State 以创建两个状态，并将它们命名为 Default 和 Blur。

使用 Default 状态来定义应用程序在渲染 Car 节点时未应用模糊的状态，使用 Blur 状态来定义节点被模糊时的状态。
单击 <No Controller Property>，选择 + Create Property Type，并设置：
- Name 到 Blur.BlurScreen
- Type 到 Boolean
在状态管理器中，您选择为 Controller Property 的属性值定义了状态组中每个状态何时处于活动状态的条件。
在 Blur 状态下，将 Blur.BlurScreen 控制器属性的值设置为 True。
在 State Tools 中，选择 Default 状态，并在 Properties 中，将 Blur.BlurEffect2D.Radius 属性设置为 0。在 Default 状态的 State Tools 中，单击 Set 以将 Blur.BlurEffect2D.Radius 属性的值保存到该状态。

通过这种方式，您将 Default 状态设置为渲染 Car，而不应用模糊。
在 Properties 中，将 Blur.BlurEffect2D.Radius 属性设置为 40。在 Blur 状态中的 State Tools 中，点击 Set。

通过这种方式，您将 Blur 状态设置为将模糊应用于 Car。
在 State Tools 中，点击 Any -> Any。在 State Transition Settings 中，将 Duration 设置为 500，然后点击 Save。

通过这种方式，您将 Default 和 Blur 状态之间的过渡长度设置为500毫秒。
单击 Edit State Manager 以停用状态工具。
在 Prefabs 中，选择 CarScreen > Car 节点。在 Properties 中，移除 Blur.BlurEffect2D.Radius 属性。

移除此属性是因为使用状态管理器来控制此属性的值。
在 Properties 中，添加 Controller Properties > Blur.BlurScreen 属性。

当 Blur.BlurScreen 属性被禁用时，Kanzi 渲染 Car 节点而不应用模糊效果。在接下来的部分中，您将创建一个弹出通知，并使用 Blur.BlurScreen 属性在显示该通知时模糊 Car。

控制弹出通知和模糊效果。¶

在本节中，您将设置模糊效果和弹出通知，以便当显示通知时，通知后面的 Car 节点的内容会被模糊。

要控制弹出通知和模糊效果：

显示通知：
1. 在 Prefabs 中，选择 CarScreen > ProfileButton 节点。在 Node Components 中，按 Alt 并右键单击 Button: Click 触发器并选择 Dispatch Message Action > Activity Host > Activate Activity。
  
  您使用 ProfileButton 来激活显示弹出通知的活动。
2. 在 Activate Activity 操作中，将 Activity Activation Path 设置为 UpdateNotification。
  
  您在 Activity Activation Path 属性中设置的活动路径是相对于您在 Target Item 属性中设置的活动主机节点的。
  
  通过这种方式，您将 Button: Click 触发器设置为执行激活 UpdateNotification 活动的 Activate Activity 操作。
  
  现在，当在 Preview 中点击配置文件按钮时，会弹出通知。
关闭通知：
1. 在 Prefabs 中，选择 UpdateNotification > InstallButton 节点。在 Node Components 中，按 Alt 并右键单击 Triggers 并选择 Message Trigger > Button > Click。
2. 在 Button: Click 触发器中，按 Alt 并右键单击 Actions 并选择 Dispatch Message Action > Activity Host > Deactivate Activity。在操作中，将 Activity Activation Path 设置为 UpdateNotification。
  
  通过这种方式，您将 Button: Click 触发器设置为执行 Deactivate Activity 操作，以停用 UpdateNotification 活动。
  
  现在，当在 Preview 中单击“立即安装”按钮时，弹出窗口会关闭。
模糊通知后面的 CarScreen 的内容：
1. 在 Prefabs 中，选择 CarScreen 活动。在 Node Components 中，按 Alt 并右键单击 Triggers，选择 Data Trigger，并将其命名为 Popup Blur。
  
  数据触发器会在其条件表达式满足的情况下，保持应用该数据触发器中的操作。
2. 在 Popup Blur 数据触发器中，将 Expression 设置为
```
{../UpdateNotification/ActivityConcept.Status} == 0
```
  单击 Apply。
  
  您将此 Data Trigger 设置为仅在 UpdateNotification 活动中，并且 Activity Status 属性为 Active （枚举值 0）时，才应用该数据触发器中的操作，也就是说，该活动是活跃的。
3. 在 Node Components 中，按 Alt 并右键单击的 Popup Blur 数据触发器中，选择 Apply Property Action，并在应用属性操作中设置：
  - Target Item 到 Prefab Placeholder 2Ds > Prefabs/CarScreen/CarScreen/Car
  - Target Property 到 Blur.BlurScreen
  - 将 Fixed Value 设置为 enabled。
  通过这种方式，您可以将 Popup Blur 数据触发器设置为在 UpdateNotification 活动处于活动状态时保持 Car 节点中的 Blur.BlurScreen 属性启用。