OH4: Understanding animation flow direction from energy widget

Setup, Configuration and Use Beginners
, ,
1

Hi All

I am trying to understand the direction “flow” of the animations in the widget as per the following:

Specifically I am trying to understand, for example:

                            - component: f7-row
                              config:
                                tag: path
                                id: path3
                                d: M0,56 H110
                                stroke: teal
                                stroke-width: 1
                                vector-effect: non-scaling-stroke
                                fill: none
                            - component: f7-row
                              config:
                                tag: circle
                                r: 1
                                vectorEffect: non-scaling-stroke
                                strokeWidth: 10
                                fill: teal
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      tag: animateMotion
                                      repeatCount: indefinite
                                      calcMode: linear
                                      dur: 3s
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: mpath
                                            xlink:href: "#path3"

This path is a straight line and the "flow is left to right.

I have read through all the linked articles etc. but cannot work out how the direction of the animation is calculated and how it would be possible to change this to be from right to left for example.

I am also still trying to understand the best way to determine the path, so any hints for that would be appreciated too.

Thanks
Mark

2

This is svg based animation and not css animation so you can find innumerable tutorial and description pages with some web searches.

In this case the animationMotion tag is defined as using the path with the id path3 that path is defined as starting at point 0, 56 and moving horizontally to 110, 56. So that is the path the animation follows.

There would be a couple of ways to reverse that (including just change the path definition), but probably the best is just to change whether the animation itself is running forwards or backwards. You can do that with the keyTimes and keyPoints attributes. If times are 0 → 1 and points are 0 → 1 then the animation with run forwards and if the times are 0 → 1 and the points are 1 → 0 then the animation will run backwards.

- component: f7-row
  config:
    tag: animateMotion
    repeatCount: indefinite
    calcMode: linear
    keyTimes: 0;1
    keyPoints: 0;1 <-- Forwards animation
    dur: 3s

or

- component: f7-row
  config:
    tag: animateMotion
    repeatCount: indefinite
    calcMode: linear
    keyTimes: 0;1
    keyPoints: 1;0 <-- backwards
    dur: 3s

These properties will all take widget expressions so, you just need something like this to change the keyPoints:

keyPoints: =(test true if forwards animation)?('0;1'):('1;0')
1 Like
3

Thanks Justin. I really did search. But found more baed on SVG Animation.

Now i just need to try decipher hiw yo create a path.

4

It’s a little like going back to turtle logo (if you ever did that, or maybe I’m dating myself). It’s just a sequence of commands and coordinates as if you’re drawing the path in real time.

5

Thanks Justin. That is very helpful.

One other question if you don’t mind?

Is there some sort of tool to display a grid to make the plotting easier? Or is it a case of calculating based on the current component etc? (Just looking for the easiest way to achieve things :slight_smile:

6

If there is, I am not aware of it.