# Chasing paths animation

**URL:** <https://forum.inductiveautomation.com/t/chasing-paths-animation/6237>\
**Category:** Ignition\
**Created:** [April 16, 2013, 12:39pm UTC](https://forum.inductiveautomation.com/t/chasing-paths-animation/6237 "2013-04-16T12:39:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![AJBerera](https://avatars.discourse-cdn.com/v4/letter/a/9fc29f/32.png) [@AJBerera](https://forum.inductiveautomation.com/u/AJBerera)\
**Post date:** [April 16, 2013, 12:39pm UTC](https://forum.inductiveautomation.com/t/chasing-paths-animation/6237/1 "2013-04-16T12:39:15Z")

</div>

I have a path that twists and turns around the screen.  
I would like to have an image follow the path around the screen if it is known to be activated.  
As far as I know, I can’t program an object to follow inside another object…But I know I can move it from one set point to another.  
Am I correct in assuming that the best way I could create this effect would be as a product of many different animations in succession?

---

<div class="post-metadata">

**Author:** ![Step7](https://avatars.discourse-cdn.com/v4/letter/s/45deac/32.png) [@Step7](https://forum.inductiveautomation.com/u/Step7)\
**Post date:** [April 16, 2013, 1:33pm UTC](https://forum.inductiveautomation.com/t/chasing-paths-animation/6237/2 "2013-04-16T13:33:10Z")

</div>

I don’t know what you mean by many different animations, but you could put something like this in a timer script to bind a position of one object to the position of another. You would have to add more code to make it do things like go around in a circle or something.

```auto
x=event.source.parent.getComponent('Button 1').getX()
y=event.source.parent.getComponent('Button 1').getY()
system.gui.moveComponent(event.source.parent.getComponent('Button'),x+100, y)
```

I you don’t have another component to follow, just use the time value or whatever to make it move by incrementing the x and y programatically.

code]  
system.gui.moveComponent(event.source.parent.getComponent(‘Button’),event.source.value\*5, y)  
[/code]

---

<div class="post-metadata">

**Author:** ![chi](https://avatars.discourse-cdn.com/v4/letter/c/0ea827/32.png) [@chi](https://forum.inductiveautomation.com/u/chi)\
**Post date:** [April 16, 2013, 2:13pm UTC](https://forum.inductiveautomation.com/t/chasing-paths-animation/6237/3 "2013-04-16T14:13:06Z")

</div>

I’m not sure that this is what you mean, but i used a little trick to animate objects on a conveyor.

I have an additional invisible path (created with the line tool) that i want to follow with the animated object. This line (named ‘Path’ in the example) has two custom properties, Path (dataset) and lastPoint (integer).

In the internalFrameOpened event, i extract the points from the path and write them to the dataset:

```auto
from java.lang import Double
import jarray

shapeComp = system.gui.getParentWindow(event).getComponentForPath('Root Container.Path')
shape=shapeComp.getShape()
pathIterator = shape.getPathIterator(None);
segment = jarray.zeros(6,'d')
path = []
# Iterate over all path segments
while not pathIterator.isDone():
	pathType=pathIterator.currentSegment(segment)
	print pathType
	if pathType==0 or pathType==1:
		path.append([segment[0], segment[1]])
	pathIterator.next()
print path
headers=['x','y']

# Set the custom property Path (has to be a dataset)
shapeComp.Path=system.dataset.toDataSet(headers, path)
```

The i use a timer to let another component (names ‘Circle’ here) follow the path from the dataset:

```auto
# Offsets from upper left -> center of the moving component
offsetX = 10
offsetY = 10

path = event.source.parent.getComponent('Path').Path
lastPoint = event.source.parent.getComponent('Path').lastPoint
if lastPoint < path.rowCount-1:
	lastPoint = lastPoint + 1
else:
	lastPoint = 0
event.source.parent.getComponent('Path').lastPoint = lastPoint
system.gui.moveComponent(event.source.parent.getComponent('Circle'), \
	int(path.getValueAt(lastPoint,'x'))-offsetX, int(path.getValueAt(lastPoint,'y'))-offsetY)
```

Depending on your layout it might be necessary to calculate the offsets to animated object’s center dynamically or recalculate the path dataset on window resize.

I like this solution, because it’s easy to add additional animation points or alter the animation path.

---

<div class="post-metadata">

**Author:** ![Pat](https://avatars.discourse-cdn.com/v4/letter/p/8491ac/32.png) [@Pat](https://forum.inductiveautomation.com/u/Pat)\
**Post date:** [April 16, 2013, 2:51pm UTC](https://forum.inductiveautomation.com/t/chasing-paths-animation/6237/4 "2013-04-16T14:51:45Z")

</div>

[quote=“chi”]I’m not sure that this is what you mean, but i used a little trick to animate objects on a conveyor.[/quote]That’s pretty cool ![:thumb_left:](https://us1.discourse-cdn.com/inductiveautomation/original/1X/e26afb081ddde6df016df6ee49159cf56aaca688.gif ":thumb\_left:")

---

<div class="post-metadata">

**Author:** ![AJBerera](https://avatars.discourse-cdn.com/v4/letter/a/9fc29f/32.png) [@AJBerera](https://forum.inductiveautomation.com/u/AJBerera)\
**Post date:** [April 17, 2013, 3:32pm UTC](https://forum.inductiveautomation.com/t/chasing-paths-animation/6237/5 "2013-04-17T15:32:05Z")

</div>

very cool indeed. That was exactly what I was looking for. Thanks!