Ignition Perspective Pipe line water flow animation

Hi i want to animate Perspective Pipe lines look like water flowing, based on Boolean and Int tags. Please share your ideas Thanks.

What exactly are you looking for? Something like this,

2 Likes

Yes Exactly like this, In ignition perspective. can you share the procedure.

Iā€™m not the best to ask on this, perhaps @victordcq has a better approach. But here is an example (not quite like the one above), paste this into a View.

[
  {
    "type": "ia.shapes.svg",
    "version": 0,
    "props": {
      "viewBox": "0 0 149.36 96.872",
      "elements": [
        {
          "elements": [
            {
              "d": "m21.458 92.737v93.996l48.249 0.3574v-57.542h44.675v30.736c51.823 0.3574 51.466 0 51.466 0",
              "fill": {
                "paint": "#C0C0C000"
              },
              "name": "path1193",
              "stroke": {
                "paint": "#4ECD57",
                "width": 5
              },
              "type": "path"
            }
          ],
          "name": "layer1",
          "transform": "translate(-18.958 -92.737)",
          "type": "group"
        }
      ],
      "style": {
        "classes": "lineMove"
      }
    },
    "meta": {
      "name": "Line_1"
    },
    "position": {
      "x": 140,
      "y": 436,
      "height": 220,
      "width": 386
    },
    "custom": {}
  }
]

Here is the CSS

.psc-lineMove {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  animation: dash 20s linear infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 1000;
  }
}

@jlandwerlen Thanks for your support, Could please give me the brief idea about this.

Seems good, i dont really do much with animations, but this is probably the way to go.