You can animate groups as well as individual elements. To group elements together make the elements children of a g element. Then you also just make the animation tag a child of that same group element.
As a side note you’re on a recent enough version of OH that you don’t need to use the tag trick to get this svg tags to work. You can just use the tag name directly in the component line. For example:
Nice work. To get the arrows to turn the corner, you’ll need a second animation. In this case you’re not trying to move the animation, you’re trying to rotate it so instead of more animateMotion, you’ll need to use animateTransform:
The only extra tricky part here is that you are going to need to tweak the timing on the transform because you only want it to run for the short period where the group is actually going around the corner, so syncing it up to the motion transform will take a little trial and error.
edit:
Also, you don’t need both the animateMotion blocks that you have if instead of applying them to each element you just apply it to the whole group. That’s the point of using the group in the first place. So, instead of:
group
circle
animateMotion
text
animateMotion
you can just have
group
circle
text
animateMotion
For the animateTransform, you can also apply it to the group (because you won’t really see it when the circle rotates) or apply it directly to the text instead.
Hope your don’t mind me posting code each time - I just think it helps if anyone else stumbles on this thread and needs help. I have made lots of mistakes on the way and it helps to see working examples too
So I have been dong some reading and it has become apparent that I first need need to rotate the text 90 degrees so the arrows are initially pointing in the correct direction.
So from what I can see I need to use:
style:
transform: rotate(90deg)
I guess this would need to be applied to the text component:
I managed to get the rotation transform most working. It works on teh first run but then gets out of sync.
I think the problem is that I need the rotation transform to begin 2s after the motion starts. Then its runs for 2s and shoudkl then only run when the motions starts at the beginning again (or wait 2s).
One issue I did run into was that I had to swap the order of the rotation and motion to get them to work.
I have tried combinations of begin and end. But end always seems to break the animation.
Also looking for advice on using different directions of animation. Is it best to setup two animations and just use the visible expression to show which one is shown?
This is why I said this timing was going to be the tricky part. There’s almost certainly an elegant way to do this with begin and end events, but I can’t tell you off the top of my head what that might be. I’d probably just do this the brute force way with a 6s rotation animation that has keyTimes which do the actual animation only during the middle 3rd. That just means you need a 6s duration and values and keyTimes:
