Svg.js: Method loop no restarts the animation from the beginning

[Andreslav]

Loop не работает для всей последовательности анимации (или так и должно быть?).
Демонстрация: https://codepen.io/Andreslav/pen/BxGygp

Loop does not work for the entire animation sequence (or should it be?).
Demonstration: https://codepen.io/Andreslav/pen/BxGygp

[Fuzzyma]

Saw your question on stackoverflow and really liked the answer :).
Loop always works only on the last animation. This is correct as is. We are currently working on svg.js v3.0 which will include a reworked fx module which will give you much more freedom in composing animations. It will be possible to loop whole sequences then. But for now you have to trick a bit.
Beside the really good solution on stackoverflow you can ofc always play with the after() method to loop the sequence "yourself"

[Andreslav]

Clear. Thanks for the answer!)

Allow me to take opportunity to propose an innovation for svg.js v3.0:
opacity: [1, {offset: .8, value: .5}, 0] or dx: [10, {offset: .8, value: 8}, 20]

It's comfortable!

[Fuzzyma]

Can you please elaborate further? One line of example code would be sufficiant

[Andreslav]

Now so:

rect.animate(1000, '-', 0).dx(50).animate(1000, '-', 0).dy(50).animate(1000, '-', 0).dx(-50).animate(1000, '-', 0).dy(-50)

I suggest making it possible to do something like this:
rect.animate(4000, '-', 0).dmove([[50,0], [0,50], [-50,0], [0,-50]])

Could be so: {a1, a2} where a1 = offset, a2 = value.
rect.animate(4000, '-', 0).dx([{0, 50}, {.75, -50}]).dy([{.25, 50}, {.5, -50}])

You can make a separate plugin)
I hope I understood clearly ...

This is not my idea, I borrowed it: github.com/just-animate/just-animate

[Fuzzyma]

There are multiple problems with your suggestion. All grounded on implementation or library design.
e.g.

• syntax should not change when animating. dmove() should "work" the same as animate.dmove()
• internally the libraray would need to manage 4 subanimations. what happens when you add a size(200, 200) at the very end? how is it splitted? Its getting confusing
• it is hard to implement both in api design and code

Unfortunately the 2 last points apply for plugins, too. So its not easy to have it in a plugin.

[Andreslav]

About the first point: this is not accuracy, I wrote this for compactness (edited). Yes you are right.

I suppose the change is either "waiting" or applied before the animation starts ...

I do not insist! This would be convenient, but I'll still use svg.js.
Thanks to everyone who worked, works or will work on it!

[Fuzzyma]

I got that its about compactness. I always like shortcuts or - as we often call it - sugar. But this often comes in form of different functions e.g. in your case dmoveArray or something. But it still has many cases where it wouldnt be clear what would happen. For example take this code:

rect.animate(4000, '-', 0).dmove([[50,0], [0,50], [-50,0], [0,-50]]).size(200, 200

What is this supposed to do? Should it animate the movement in 4 subanimations while the size is on the main animation? Its getting weired really fast. Beside that it unfortunately really does not fit the current code design and architecture. You really would need to rewrite everything :D.

However, thank you for your suggestions. Its always good to have a user view and something to discuss!

[Andreslav]

What is this supposed to do? Should it animate the movement in 4 subanimations while the size is on the main animation? Its getting weired really fast.

About duration (photo): https://prnt.sc/jlpznp

You really would need to rewrite everything :D.

Yes indeed...

However, thank you for your suggestions. Its always good to have a user view and something to discuss!

You are welcome!

[saivan]

I don't really understand what the offset and value are supposed to do?
Could you clarify that for me. I'd really appreciate that :)

[Andreslav]

@saivan, to say that simply, but difficult to implement :)
offset - takes values ​​from 0 to 1 (easing);
value - value of the property at this point.

Here is an example: https://codepen.io/Andreslav/pen/BrEwJV?editors=0010
Above, I probably did not quite correctly draw up examples ...

[saivan]

Oh I see what you're getting at!
To be honest, you should take a the new fx branch we have been hard at work on. I think you will find our syntax just generally more pleasing to use than the one you've posted 😉 but of course its always a matter of opinion 😄 You should look at the use cases file if you're interested.