> ## Content Index
> Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# 博途 HMI动画和事件简明教程
- URL: https://www.hubwiz.com/blog/a-concise-tutorial-on-tia-portal-hmi-animations-and-events/
- Published: 2026-08-29T13:12:16.000Z
- Updated: 2026-10-13T15:06:57.000Z
- Description: 在本教程中，您将学习如何通过构建一个简单的批量混合过程，在西门子TIA Portal中创建HMI动画和事件。
- Author: admin
- Tags: PHYSICAL AI, PLC, #Import 2026-10-14 14:41

动画用于可视化地表示过程及其当前状态。在本教程中，您将学习如何通过构建一个简单的批量混合过程，在西门子TIA Portal中创建HMI动画和事件。

在此过程中，您将学习如何：

- 从TIA Portal符号库中向HMI屏幕添加按钮和其他元素，如管道、电机。
- 配置点击和触摸动作。
- 更改不同元素的外观。

要跟随本教程，您需要安装[TIA Portal](https://www.youtube.com/watch?v=le9ExrCcpB0&t=51s&ab%5Fchannel=SolisPLC&ref=hubwiz.com)。本教程使用TIA Portal第15版。也就是说，您将学习的所有概念也适用于其他版本。本教程不需要PLC或HMI硬件。

## 1、了解批量混合过程

我们将在本教程中构建的示例是一个批量混合过程。我们有*液体1*和*液体2*通过单独的管道进入储罐，搅拌器在储罐中将它们混合，然后混合物通过底部排水管排出。

该系统设计有两种模式——*自动*和*手动*。当系统处于自动模式时，所有单独的控件消失，只有*系统启动*和*停止*按钮可见。当系统处于手动模式时，各个组件控件可见。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed03969ccc8781338_61f0221115c0b03131648781_U450ECj7ijIWc6BslVNJtzvEKrjXUIlMZnRd5QCeixLTQ_D4kfPOmwje2wHbtPPOsZ4CUCwaOA2MTJlalSe9N5OddTnVtLib4sct1jAHuIInfgbkRH6kiZPsbgkWNsHvT-4NZa-H.png)

图1.1 - 显示示例项目动画的截图，批量混合过程

创建HMI动画可以分为两个步骤：

- 向HMI屏幕添加元素
- 创建PLC代码和标签，并通过添加事件和动画来配置HMI组件。

## 2、在TIA Portal中向西门子HMI屏幕添加元素

### 2.1 在TIA Portal中创建项目

首先从开始菜单打开*TIA Portal*。

一旦TIA Portal程序在*Portal视图*中启动，选择*创建新项目*，输入项目的新名称，然后单击*创建新项目*。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed039694c9c781335_61f0221100546024e8031c32_coL7-2xjvpT3pgWh1orWow70wuEiEwCvARd8-YhGenlWPplntZISrnz-8rBmHvKDiLsCGG032A-yNvsX6zbglXrYVDspyqET1piLJfkOokQns7vTAIrcDvslh66wMJh7Zvn_5JtU.png)

图2.1 - TIAPortal Portal视图，创建新项目

### 2.2 添加PLC和HMI硬件

选择*添加新设备*并单击*控制器*。展开Simatic S7-1200并从列表中选择CPU 1215C AC/DC/Rly。然后单击*添加*。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed0396952cd781339_61f02211d589376e310386e2_dHWA0gJLN388aNiWoS2MV8qrmcuwz7-tUbRNe6YCLFEIg7X7tGuTrMjVOzYMfD5w_a5kQ03sUB5ACcwaZMA3i4yumkJWoK9cOEunF1YeJIqNY7V5ByvWD7icAAKhO9TALSxadwPw.png)

图3.1 - TIAPortal Portal视图，添加PLC硬件

添加PLC后，切换回*Portal视图*。这次选择*HMI*并选择7" TP700 Comfort面板型号，然后单击*添加*。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed039695ca878133b_61f022119b508d713be0537a_jTlcrXhVPXsB2vU1wnfjVRc-E6LRYptR4lCgrdKdjJAjD9AlIkUxfaUYr4jUJdedLIBKFAyY3aAg4pR0okIskWpZdNmgkx-3Hx7ZCZqG58xxGAzy8WDP2wf9dYiSQ_5LWdwGtFxV.png)

图3.2 - TIAPortal Portal视图，添加HMI硬件

### 2.3 向屏幕添加按钮和文本

成功添加PLC和HMI后，确认TIA Portal处于项目视图。从左侧的导航菜单展开*HMI\_1*。右键单击默认HMI屏幕名称并选择*打开*。默认屏幕打开后，选择窗口右侧的*工具箱*，然后单击*基本对象*。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed0396913d178133e_61f0221133a9d14b975bc81c_GTVV8sRcdT1xNnakAZ5DOo6U4N1WNgxv_89jWQxj1IufZuxHCzvzpsallaZScvMPVP2hZLEkCQvqxk9Ra0AJ9S7hXpYqsqB1OnJ48BFO6Mg4_cvgNLrkmD8OziDkyPJZRoBprVIU.png)

图4.1 - TIAPortal项目视图，打开HMI屏幕

从*基本对象*中选择文本项并将其拖到屏幕上。将其重命名为*Liquid 1*。

从元素部分选择第二个元素——下图中突出显示的按钮。

将鼠标悬停在元素上会显示元素的名称。将元素拖放到屏幕上。

在本教程的后面，我们将使用其他突出显示的元素——条形图和符号库，它们可以转换为不同的工业符号。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed03969c50278133a_61f0221192293f5ae6f63388_QuZ2K_qSKFoDaq-YzSiQvl-xulYwSKkISKkWy-CuX0LjAG52pTwMHItZ9zifWfCEEOUmY1iWU2EWmxwI-TNeYg_0HdMFjmmmV0Ms2Dpie2DMhVUgdDm2fj6F7PcDGGCqA2ovZJWq.png)

图4.2 - HMI工具箱和元素

将按钮拖到HMI屏幕上后，右键单击按钮并选择*属性*，然后单击*常规*。在*标签*部分下，将按钮标签更改为*Fill*。接下来，在左侧选择*外观*部分，并将按钮的颜色更改为绿色。

请务必浏览其他部分，以熟悉按钮元素可用的不同自定义选项。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed039692684781341_61f02211f612a45edc580c02_hWCaZp39cUp2MDSrx9bSj-cACuRlYcK4WScMgnPINehSifEZHD8RycdJDcQkpaxz-3Ujkg_0bYYn0TuoqyCwz0wnf8ocBjwzYE49vn0swgvO9xH_2WjAOroQFXT-fi4QiguiPo42.png)

图4.3 - HMI按钮属性

现在您可以重复此过程，添加更多文本框和按钮，以创建与下面所示类似的屏幕。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed0396978ae781336_61f02211005460c449031c33_0TdcVxI6hy-tWEShTOUnszMItQnFWLV6u36pBhvUPZVbvI06BsOYaL4IP7rjkC7oL_ZP-DoX5ZFl63FqQ-DxaRhEuO1ZIPU9APVNRj-lP3zdgROu59J4OvtICiCfBm3HrRyQ5G9S.png)

图4.4 - HMI按钮和文本字段示例

### 2.4 添加工业设备符号

添加按钮并对齐它们后，从右侧的*工具箱*选项卡和*元素*部分选择条形图项并将其拖到屏幕上。右键单击条形图并选择*属性*。更改元素的属性并调整其大小以匹配图1.1。接下来，转到右侧的*工具栏*，从*元素*部分选择*符号库*。将其拖放到屏幕上会显示一个泵对象。右键单击该对象并选择*属性*。在*属性*选项卡中，在*常规*部分下滚动类别以找到*管道*。从该区域选择一根管道并根据需要调整其大小。

复制并粘贴符号几次，并将其更改为不同形状的管道和搅拌器。搅拌器/混合器可以在*类别*下找到。

请注意，要在屏幕上复制元素，请按住*Ctrl*按钮，用鼠标选择对象并拖动。这与复制和粘贴相同，但速度快得多。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed039694a1b78133f_61f022123560465459b1625c_wo_mM-bdEnajFuWoZ81OdAOewUR3zcN6kjyHKEWe8EW5x_49GdQLClln7-BDtP58Nueh9SeIAu_vWSmIr2iviPmvjKgQBG_S5lU1ka6WFPnKd_mrulN1XK5Qgfo0ngJnUIChwGIl.png)

图5.1 - TIAPortal符号库，管道

添加所有必要的元素后，按照示例图片（图1.1）所示对齐它们。要对齐它们，请首先选择元素。然后从文件菜单中，转到*编辑*、*对齐*并选择其中一个选项。

请注意，当选择几个对象进行对齐时，第一个选定的对象用作参考点，其余对象根据它进行对齐。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed0396936d4781343_61f022129ae92d625961e0f5_Muvt01aZAav7BJKvRqJTLKssSPWzrngqKO5oZrJC4g4TPdVpTibw-GOeshARsKiNgKj10RpypiDl4XbqKIBMLDR7k1j0_BPx-2BDLyO7G-fhbydGuJrlVSe9jF2iAz54YIgvjY2r.png)

图5.2 - TIAPortal元素对齐

## 3、PLC编程 - 创建标签和系统/时钟位

### 3.1 激活系统位

将PLC硬件添加到项目后：

- 在*PLC\_1*下选择*设备配置*，然后双击它以打开*设备*视图
- 在*设备视图*中右键单击*PLC CPU*并选择*属性*
- 在*属性*的*常规*选项卡下，向下滚动到*系统*和*时钟存储器*‍
- 选中*系统*和*时钟*存储器位旁边的两个框

这些系统和时钟位现在作为标签出现在默认标签表中及其地址。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed039697c4a781345_61f022123cf9a0350bf0f17f_loDZD19uUh5sJEHnjqo30b7Mz1vg0rEFyJx-9odymgIyqEXj9ReQK_yzLACFeqANrtbNoGAJu1fEqXQhVpgJ9j-8wduD08BcfmPceCyagMp38BkZbUyD5VkucG3pbSvHZ-0QnNZJ.png)

图6.1 - 西门子PLC系统和时钟位

### 3.2 创建PLC标签

从左侧的导航菜单导航到*默认标签表*，然后双击它以打开标签。添加下面突出显示的PLC标签。其余的是系统标签，在启用*系统*和*时钟*位后会自动出现。

由于本教程不使用任何硬件，这些标签和PLC程序中的一些逻辑将有助于模拟变化的信号级别。有关完整代码和功能，请参阅本教程附带的PLC程序。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed03969699c781344_61f02212051dd129a8469e2d_ofHIb5KrscqmCvQhrofZOagfErSTtRhKeweYnl21ZsRmFSGk0HfLBdrE2KPbHxtzzsMZ9eKsTvg6ZX2FbJ6BIQZgqECc2-9sLUNFcl-3o802pPlm_9Bgg8y53gKLygAPj-sB3svL.png)

图7.1 - 要添加的PLC标签

### 3.3 创建HMI动画

添加所有必需的PLC标签后，切换回HMI屏幕并选择*Fill*按钮。右键单击该按钮并选择*属性*。切换到*动画*选项卡并在*显示*下创建*可见性*动画。单击省略号(...)并选择标签。通过选择适当的标签，对所有按钮、文本字段和其他符号重复此过程。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed039696dd5781342_61f022128cb8e9db17cf7328_zIEACMoM5rcnHpsdH4StSKckU6NgTfz5VCBKD_NsVibfFg3mIypQ9AxGxAof7ttFa81dVbMcYQCwuzFEG-wSTEMXwjFzk0fuuBBuBMM4UE7teUqqDkCUGNhMcd9WE7aokvtfSHqz.png)

图8.1 - Fill按钮的可见性动画

### 3.4 创建HMI事件

选择*Fill*按钮并右键单击以选择*属性*。然后切换到*事件*选项卡并选择第一个事件类型-*点击*。单击<*添加功能*\>并键入*SetBit*，然后如图所示选择标签。下一行出现新的*添加功能*，单击它并如图所示键入*ResetBit*。单击省略号(...)并如下所示选择标签。根据本教程附带的示例PLC程序文件，对其他按钮重复此过程。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed03969542f78133c_61f02212319fbc4623e3d418_PNN-OnaOKJnjHuSuE1ioJun3vsALGagv_-fZdLSkIWJGWCeTctty6u4DkCK0AQMNYxJkG7PxP5m38KLGxsNepxogntgoVxVtG-gZhxRU-CRvGqHu2j9ma2GkkpB6M2Pp7jtu9daE.png)

图9.1 - 为Fill按钮配置*点击*事件

### 3.5 模拟PLC和HMI

完成PLC代码并配置HMI元素后，模拟PLC和HMI以测试动画。从屏幕左侧的*设备*列表中选择*PLC\_1*，然后单击*启动模拟*按钮以模拟PLC。

请注意，PLC的FW版本需要为4.0或更高版本才能对其进行模拟。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed03969000d781340_61f02212a26162c9ad11bafd_OxBeO4L1skoJeH0CvMdHQIljcCYggDDJofLQBlVLqPoy3RFFevzWGjZdpk8wkSD_1kDdWdVAywpMDTCdrnS-DqkbJTD_k4vvTvbOE8_Pq4Ls0hlrVn4DmdYLN6979gWl-uv_ohyp.png)

图10.1 - 显示PLC和HMI硬件的TIAPortal项目视图

选择*启动模拟*按钮后，等待此窗口出现，然后单击*加载*。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed03969607f78133d_61f02213f65be5b31eeffa12_WfJd1jlNz1qQJwLAH0jgNAboZ-eI88wDcDs6t0hGMg1ky7JQsl87OjSP4UCxBPwgM12Gfe0QuXmB4tB0O7yvh49NBPTeuPOoCXEOeny81UUhU3VDaH8ntFts3LKaIamR8W-D1i7h.png)

图10.2 - 在TIAPortal中模拟PLC

在下一个屏幕上，从下拉列表中选择*启动模块*，然后单击*完成*。

![](https://www.hubwiz.com/blog/content/images/2026/08/6415d9eed03969156e781337_61f02213a26162bc7211bafe_l8WwPZ7uF8LaczdHKxlDFZ5INpvjugj_esOCzUzuqL1z4vpo8L90y1vS-uo38qY5kFyKnMWZQFzx0YyApdPUbpRTnDL0ky2N-NBEhTlituUKD4esvF6N5_ycsXq3XyueClzrRxso.png)

图10.3 - 在TIAPortal中模拟和启动PLC

PLC模拟启动后，从左侧的*设备列表*中选择*HMI\_1*，然后选择启动模拟按钮。这将编译HMI，如果没有错误，HMI模拟将开始。单击不同的按钮，并注意为每个按钮定义的*事件*如何设置（=1）和重置（=0）PLC的某些位。*可见性*动画决定对象在运行时是否可见或隐藏。*外观*动画决定对象在运行时的颜色和其他方面。

最后，*事件*决定单击、按下、释放按钮时会发生什么。有几种不同类型的*事件*，包括设置和重置位、更改屏幕和清除报警缓冲区。

## 4、结束语

事件和动画是编程HMI时的强大功能。在本教程中，我们学习了如何添加各种HMI元素和工业符号，如按钮、鼓风机、搅拌器和车辆。我们还介绍了如何更改元素的外观，添加动画和事件以更改其运行时行为。最后，正如我们在本示例中看到的，系统和时钟位是非常有用的内置位，其中一个示例是*首次扫描*位，可用于启动配置。

作为后续，您可以尝试不同的动画组合，例如*可见性*、*外观*、*事件*和*移动*。如果您刚开始使用西门子PLC编程，请务必查看[这个免费课程](https://www.solisplc.com/courses/siemens-plc-training-getting-started-with-siemens-tia-portal-programming?ref=hubwiz.com)。

---

原文链接：[How to Create HMI Animations and Events in Siemens TIA Portal](https://www.solisplc.com/tutorials/hmi-animations-and-events-in-siemens-tia-portal?ref=hubwiz.com)

汇智网翻译整理，转载请标明出处

> **这是「AI × 工业 / PLC」专题的一部分。**完整地图见：[AI × 工业 / PLC 完全指南](https://www.hubwiz.com/blog/ai-industrial-stack/)