TwinCAT HMI

在对应的场景CSS文件当中：

加上以下的代码：

.rotoImgPos {

    animation: rotoPositiveImg 5s linear infinite;

    width: 200px;

    height: 400px;

}

@keyframes rotoPositiveImg {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

其中，5s代表旋转一圈的时间，这个可以根据自己的需求进行更改。360deg代表顺时针，逆时针的话，改成-360即可。

应用案例：

JavaScript脚本当中，需要进行CSS类的调用：

左边括号内需要填写对应控件图片的ID：

右边括号内需要填写之前编辑CSS文件当中对应正转反转的类名称。

该案例当中的逻辑是当轴停止的时候，移除两个正转和反转的类。当轴启动且正转的时候，添加正转，移除反转。轴启动且反转的时候，添加反转，移除正转。

余洋 2024.9.5 编辑