TwinCAT 3 HMI平移动画开发求助：PLC变量绑定与JS实现问题

先解决「data未定义」错误 #

这个报错大概率是因为你直接引用了示例中的data对象但未自行定义，或是PLC变量未正确关联到HMI数据源。TwinCAT HMI中不需要依赖自定义data对象，直接通过HMIRuntime.Tags访问PLC变量即可，避免使用未声明的对象。

逐个解决你的核心难点 #

1. 获取控件位置 #

通过HMI控件的内置属性直接读取位置：

• 获取绿色方块当前位置：var greenLeft = HMIRuntime.UIResources.Items("GreenBox").Left;
• 获取目标橙色方块位置（假设橙色方块命名为OrangeBox_1至OrangeBox_10）：var targetLeft = HMIRuntime.UIResources.Items("OrangeBox_" + targetNum).Left;

注意：控件名称必须和HMI编辑器里的命名完全一致，包括大小写。

2. PLC变量绑定与读取 #

先在HMI的Tag Manager中添加PLC变量（比如MAIN.bMoveTrigger触发位、MAIN.nTargetPos目标编号），确保HMI与PLC连接正常，然后在脚本中直接访问：

// 读取触发位
var trigger = HMIRuntime.Tags("MAIN.bMoveTrigger").Value;
// 读取目标位置编号（1-10）
var targetNum = HMIRuntime.Tags("MAIN.nTargetPos").Value;

3. JavaScript函数声明与动画实现 #

在HMI的全局脚本或控件事件脚本中声明函数，用setInterval实现平滑移动，每次移动固定像素直到到达目标位置：

var moveTimer; // 用于控制动画定时器

function startMoveAnimation() {
    // 先停止之前的动画（防止叠加）
    if (moveTimer) clearInterval(moveTimer);

    // 读取PLC变量
    var trigger = HMIRuntime.Tags("MAIN.bMoveTrigger").Value;
    var targetNum = HMIRuntime.Tags("MAIN.nTargetPos").Value;

    // 校验目标编号范围
    if (targetNum < 1 || targetNum > 10) {
        HMIRuntime.Tags("MAIN.bMoveTrigger").Value = false; // 复位触发位
        return;
    }

    if (trigger) {
        var greenBox = HMIRuntime.UIResources.Items("GreenBox");
        var targetBox = HMIRuntime.UIResources.Items("OrangeBox_" + targetNum);
        var targetLeft = targetBox.Left;
        var currentLeft = greenBox.Left;
        var moveStep = 3; // 每次移动3像素，可调整速度
        var direction = currentLeft < targetLeft ? 1 : -1; // 移动方向

        // 启动动画定时器
        moveTimer = setInterval(function() {
            currentLeft += moveStep * direction;

            // 判断是否到达目标位置（误差范围内）
            if ((direction === 1 && currentLeft >= targetLeft) || (direction === -1 && currentLeft <= targetLeft)) {
                currentLeft = targetLeft;
                clearInterval(moveTimer);
                HMIRuntime.Tags("MAIN.bMoveTrigger").Value = false; // 移动完成后复位触发位
            }

            greenBox.Left = currentLeft; // 更新绿色方块位置
        }, 15); // 每15ms执行一次，控制动画帧率
    }
}

// 监听触发位变化，自动启动动画
HMIRuntime.Tags("MAIN.bMoveTrigger").Change = function() {
    startMoveAnimation();
};

关键注意事项 #

• 所有控件名称必须与脚本中的引用完全匹配
• 确保HMI的Tag Manager中已正确添加PLC变量，且实时视图能正常读取变量值
• 可通过调整moveStep（移动步长）和定时器间隔时间，控制动画的快慢和平滑度
• 如果需要垂直移动，将代码中的Left替换为Top即可

内容的提问来源于stack exchange，提问作者K1539