在实际前端开发项目中，经常会遇到这样的交互需求：当用户鼠标移入时，实现淡入效果（透明度从0渐变到1），当鼠标移出时，则要实现淡出效果（透明度从1渐变回0），这种视觉效果能很好地提升用户体验。
**效果**
**「运行」**「编辑」
**过程**
整体分为两部分，移入时淡入（透明度从0渐变到1）；移出时淡出（透明度从1渐变回0）。 **淡入**操作如下：「步骤1」拖入图片按钮
设置“图片按钮”的外观与属性。
「步骤2」移入开启定时器
设置“定时器”的周期间隔，图片的移入事件触发“定时器”的开启。
「步骤3」设置淡入速度
“透明传递”的输入（组）设为10，勾选“输出合并非覆盖”，“定时器”的开启触发函数的执行。
「步骤4」数值变为小数
设置“基本数学计算”的相关属性，“透明传递”在“基本数学计算”的输入（组）基础上累计增加，通过公式变成小数位数。
「步骤5」判断值是否到1
通过连线把“基本数学计算”的输出传递给“值是否相等”的输入，判断值是否等于目标值1。
「步骤6」执行透明传递
值到达1时，执行“透明传递”输出0。
「步骤7」关闭定时器
“透明传递”的输出0使“定时器”关闭。
「步骤8」显示小数值（可省略）
“基本数学计算”的输出传递给“输入框”显示（可省略）。
「步骤9」图片按钮渐变（淡入）
“输入框”的值内容传递给“图片按钮”的透明度，使其渐变显示。
「步骤10」移出停止增加
移出事件执行“透明传递”输出0，从而关闭“定时器”，进而停止透明度增加。
淡出操作如下：（与上面逻辑相反）
「步骤11」移出开启定时器
设置“定时器”的周期间隔，图片的移出事件触发“定时器”的开启。
「步骤12」设置淡出速度
先设置“透明传递”的输入（组）为-10，勾选“输出合并非覆盖”，“定时器”的开启触发函数的执行。
「步骤13」数值变为小数
设置“基本数学函数”的相关属性，“透明传递”在“基本数学计算”的“输入（组）”基础上累计减少，通过公式变成小数位数。
「步骤14」判断值是否到0.01
通过连线把“基本数学计算”的输出传递给“值是否相等”的输入，判断值是否等于目标值0.01。
「步骤15」执行透明传递
值到达1时，执行“透明传递”输出0。
「步骤16」关闭定时器
“透明传递”的输出0使“定时器”关闭。
「步骤17」移入停止减少
移入事件执行“透明传递”输出0，从而关闭“定时器”，进而停止透明度减少。
「步骤18」设置初始值
设置“图片按钮”的透明度初始值为0.01，设置完毕。
最终效果
UIOTOS是一款“神奇”的前端工具，支持无代码搭建后台管理、上位机HMI、大屏组态等各类IoT应用。
- UIOTOS 集成 物联中台 = IoT平台上层应用（SCADA、CRUD）
- UIOTOS 集成 NodeRed = 工控设备上位机（GUI / HMI）
- UIOTOS 集成 APIJSON = 中后台业务管理（CRUD）
