0

I have a list of values such as:

[10, 20, 20, 30, 10, 10, 10, 20, 20, ...]

That can change before the animation starts.

The goal is to take an SVG circle and do the following:

  • Index i = 0
  • Smooth set radius to list[i] over X seconds
  • Increase i
  • Smooth set radius to list[i] over X seconds
  • Increase i
  • ...

I currently use Animate.timing and onComplete I start a new one but it seems like an inefficient way (and perhaps it can add some delays) to setup a pre-planned animation. Is there a way to tell the SVG object to change shape at given timings and given durations?

I am imagining to be able to tell the circle to:

[{from_radius: 10, to_radius: 20, duration: 0.25}, {from_radius: 20, to_radius: 20, duration: 0.25}, {from_radius: 20, to_radius: 30, duration: 0.25}, ...]

And give that to the circle to handle it automatically.

N3sh
  • 881
  • 8
  • 37
  • Sure, use SMIL. – Robert Longson Jun 16 '21 at 16:12
  • @RobertLongson can you give me a small intro/snippet to get started with that? I never heard of SMIL and can't find anything with `react-native-svg` – N3sh Jun 16 '21 at 17:19
  • 2
    https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SMIL_animations assuming react-native-svg supports it. – Robert Longson Jun 16 '21 at 18:39
  • Thanks @RobertLongson but that example seems to have a simple animation rather than taking the values from a list. I just wonder if it is possible. – N3sh Jun 16 '21 at 20:25
  • 1
    Yes it's possible. Check out the [values attribute](https://www.w3.org/TR/SVG11/animate.html#ValueAttributes) there's some [examples in MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keyTimes) – Robert Longson Jun 16 '21 at 21:02

0 Answers0