教程：使用客户端动画

该示例显示了具有三个屏幕的可视化。菜单控制屏幕的导航。菜单在通过汉堡按钮进入视图之前是隐藏的。在移动过程中，菜单的透明度会发生变化。选择屏幕后，菜单移回视野之外。动画完全在目标系统上计算。这 CODESYS 可视化仅定义目标值（位置、透明度）。

准备

创建一个新的标准项目 CODESYS Control Win 控制器。
添加一个可视化应用程序下方的对象。选择名字 Visu_Main。
在编辑器中打开可视化管理器并选择支持客户端动画和原生元素叠加选项。

有关更多信息，请参阅：设置

程序 `PLC_PRG` 创建

程序检查是否已按下菜单按钮。如果菜单栏不可见（位置 –300），则将位置移动到可见区域 (0)。如果菜单栏已经可见（位置 0），则将位置移动到隐藏区域。

打开 PLC_PRG 编辑器中的程序。

在声明编辑器中输入以下代码：

PROGRAM PLC_PRG
VAR
    iSelection : INT; // to switch the referenced visualization page
    xVisible: BOOL; // auxiliary variable to toggle the menu bar
    iMenuPos : INT := -300; // position of the menu bar
    xToggle: BOOL; // button variable to toggle the menu bar
END_VAR

在实现中输入以下代码：

IF xToggle THEN
    xToggle := FALSE;
    IF xVisible THEN
        xVisible := FALSE;
        iMenuPos := -300;
    ELSE
        xVisible := TRUE;
        iMenuPos := 0;
    END_IF
END_IF

创建菜单栏

菜单栏有三个菜单项。单击相应的菜单项可显示可视化屏幕。

插入一个 Visu_Menu 应用程序下方的可视化。
打开对象属性。可视化选项卡，设置可视化大小到 a 宽度 300 和 a 身高 180 个。
在编辑器中打开可视化。
选择先进的中的选项特性看法。
在左上角，添加一个按钮宽度 300个和一个高度 60。
将按钮标记为“Visu 1”。将字体大小设置为 24。
打开房产输入配置 → OnMouseClick 。
选择执行 ST 代码行动。

输入以下 ST 代码：

PLC_PRG.iSelection := 0;
PLC_PRG.xToggle := TRUE;

设置按钮状态变量 → 数字变量财产 PLC_PRG.iSelection=0.
再添加两个按钮 Visu 2 和 Visu 3 添加。
调整按钮的属性 Visu2 (PLC_PRG.iSelection = 1) 和 Visu3 （PLC_PRG.iSelection = 2) 开启。
结果：

创建更多可视化页面

在应用程序下方添加可视化效果 Visu1 一个。
打开对象属性。可视化选项卡，设置可视化大小到 a 宽度 800 和 a 身高 600 个。
更改屏幕的背景颜色（例如，浅灰色）。
插入标签对象进入可视化屏幕并命名该元素（例如 Visu 1）。
在应用程序下方再添加两个可视化效果 Visu2 和 Visu3 一个。将属性调整为 Visu1 上。

创建主可视化页面

在此屏幕上，您可以看到菜单栏和用于显示或隐藏菜单栏的按钮。不同的可视化屏幕在框架可视化元素。

打开的属性 Visu_Main 可视化。可视化选项卡，设置可视化大小到 a 宽度 800 和 a 身高 600 个。
在编辑器中打开可视化。
插入一个框架元素到可视化中。
这个帧配置对话框打开。
添加可视化效果 Visu1 （索引 0）， Visu2 （索引 1）和 Visu3 （索引 2）已添加。
设置属性值位置如下： X = 0, 是 = 0, 宽度 = 800，和高度 = 600.
设置属性的值移位变量 → 变量上 PLC_PRG.iSelection。
添加一件商品按钮进入可视化。
设置属性值位置如下： X = 0, 是 = 0, 宽度 = 800，和高度 = 600.
设置属性的值文本 → 文本上 =。
设置属性的值文本属性 → 字体上 Arial; 36。
打开房产输入配置 → OnMouseClick 。
选择执行 ST 代码行动。
输入以下 ST 代码：
```
PLC_PRG.xToggle := TRUE;
```
设置属性的值按钮状态变量 → 数字变量上 PLC_PRG.xVisible。
插入 Visu_Menu 可视化元素当前的项目类别进入可视化。
设置属性值位置如下： X = 0, 是 = 0, 宽度 = 300，和高度 = 180.
设置属性的值绝对运动 → 运动 → X 上 PLC_PRG.iMenuPos。
设置属性的值状态变量 → 隐身上 not(PLC_PRG.xVisible)。
设置属性值动画时长到 2000.
结果：

将项目下载到控制器并启动 WebVisu

构建项目并将其下载到 PLC。
启动项目。
在浏览器中，连接到可视化（http://localhost:8080）。
WebVisu 连接到控制器并打开可视化。
在可视化中，单击菜单按钮。
菜单进入视图。
选择一个菜单项。
可视化屏幕被选中，菜单移回视野之外。

本节内容如下: