SVG: support 'follow path' (animateMotion)

[adambelis]

follow path.zip

0.9.6-last

svg suport this effect :

<?xml version="1.0" encoding="UTF-8"?>
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <!-- Define the path -->
  <path id="myPath" fill="none" stroke="gray" d="M 50 200 Q 150 50 250 200 T 450 200" />

  <!-- Define the circle to animate -->
  <circle r="10" fill="red">
    <!-- Animate the circle along the path -->
    <animateMotion repeatCount="indefinite" dur="5s">
      <mpath href="#myPath" />
    </animateMotion>
  </circle>

  <!-- Optional: Show the path for reference -->
  <path d="M 50 200 Q 150 50 250 200 T 450 200" fill="none" stroke="black" />
</svg>

If friction does not there should be maybe warning that this effect is not currently supported on export ? / in UI of exporter

[rodlie]

If friction does not there should be maybe warning that this effect is not currently supported on export

There is a lot of things you can do in Friction that does not work in export SVG, assume effects (except for blur) don't work.

A workaround until this is implemented it to use expressions.

[adambelis]

well again if we know its not supported warning user would be nice . i would much rather if export worked but :D that is porbbyl harder to implment

[rodlie]

well again if we know its not supported warning user would be nice

I know, but it's a bit more complicated than that.

I also think this is a bug, we shouldn't care about "follow path" or whatever, but the actual transform values we end up with.

[rodlie]

A quick look into the code indicate that transform effects are not supported for SVG (no code).

So, this is supported:

• Regular keyframes etc (timeline/graph)
• Expressions
• "Raster effect" blur
• Path effects

Will look into supporting transform effects, unsure when.

[rodlie]

References:

• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion
• https://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateMotionElement

[rodlie]

Got a proof-of-concept, still need misc fixes etc, but hey, it kind of works 😄

friction-svg-animateMotion-2024-08-26_23.12.35.mp4

[rodlie]

Ok, so it's working, took a bit of extra time to figure out how to set the offset. Has very limited testing (two project files). Will do some more testing later this week.

[rodlie]

rotate will be a challenge, as SVG uses top-left pivot, so just setting auto don't work as expected.

Will need to calculate this in Friction and (in theory) use:

<animate attributeName="rotate" values="XXXXXX" keyTimes="XXXXXX" dur="X" fill="freeze"/>

Inside the animateMotion tag (after mpath). I have no idea if this will work in practice.

[pgilfernandez]

If friction does not there should be maybe warning that this effect is not currently supported on export

There is a lot of things you can do in Friction that does not work in export SVG, assume effects (except for blur) don't work.

A workaround until this is implemented it to use expressions.

Am I wrong or your are saying that blur effect and expressions work for animated SVG?

[rodlie]

Am I wrong or your are saying that blur effect and expressions work for animated SVG?

Blur and shadow is supported. All expressions will be applied (converted to transforms) when exporting to SVG, just don't use $value #296

[pgilfernandez]

Wow, I understand. I'll try it out tomorrow as well!

Thanks!

[pgilfernandez]

Am I wrong or your are saying that blur effect and expressions work for animated SVG?

Blur and shadow is supported. All expressions will be applied (converted to transforms) when exporting to SVG, just don't use $value #296

You were right, they are all working fine!

I'm gonna try the "follow path " branch