Svg.js: Move element along path

[SimoneMSR]

In order to make this I have tried to use the once function, but 1)once is called an unsufficient number of times., and 2) the move function seems not to work.
Maybe there is a simpler way to to this and I cannot figure it out.
Here's my function attached

moveAlongPath.txt

[Fuzzyma]

Please create a jsfiddle with your code

[RmiTtro]

For your first point, maybe you could consider using the during method.

[SimoneMSR]

Hello,

here's the plnkr : https://plnkr.co/edit/swu9TykBhxzI1LCLu8fv?p=preview

The rect should move along a spiral, but does not.
Basically for obtaining my animation I have
1) started an animation MOVE to the last point of the spiral
2) called recursively the rect.once function, and moving the _target of the rect to the path.poinAt(i)

the thing is that _target.move does not work (maybe because another animation [the one at point 1)] is in action)

[SimoneMSR]

I would need something that acts as an animation (i.e. i can decide timing, delay, ease function, call once/during on it) , but that let me call element.attr, for example. or event an animation...

[dotnetCarpenter]

@SimoneMSR Do you want something like this: https://plnkr.co/edit/8h5chWzxNG1QLtM6E3p0?p=preview

@RmiTtro Is there anyway to use the build-in animation to control this kind of animation?

[SimoneMSR]

That's interesting, and working fine. But yes, i would like some more "control" on that animation.
In any case that's a beggining. And its code is incredibly short.
Thank you very much @dotnetCarpenter. Hope @Fuzzyma and @RmiTtro can tell us something more

[Fuzzyma]

Yes ofc there is and imo its even relatively easy:

var canvas = SVG('drawing').size('100%', '100%')
  , rect = canvas.rect(100, 100)
  , path = canvas.path("m 357.64532,453.84097 c 17.62007,8.02216 -2.12058,27.70935 -13.33334,29.28571 -30.3859,4.27185 -48.34602,-29.97426 -45.23807,-55.9524 5.5594,-46.46879 56.1311,-70.59787 98.57145,-61.19043 62.28294,13.8058 93.32728,82.57702 77.1428,141.19051 C 453.21679,585.29693 365.67122,623.42358 290.97859,600.26951 196.98554,571.13248 151.71003,464.56996 181.93108,373.84089 218.53281,263.95583 344.23687,211.49702 450.97875,248.84102 576.77037,292.84963 636.43303,437.76771 591.93099,560.50775 540.55162,702.21597 376.3736,769.09583 237.6452,717.41234 80.01319,658.68628 5.9069261,475.21736 64.788247,320.50751 130.84419,146.94643 333.62587,65.607117 504.31214,131.69819 693.80625,205.0718 782.38357,427.18225 709.07382,613.84113")
  , length = path.length()

path.fill('none').stroke({width:1, color: '#ccc'})

rect.animate(5000, '<>').during(function(pos, morph, eased){
    var p = path.pointAt(eased * length)
    rect.move(p.x, p.y)
}).loop(true, true)

https://jsfiddle.net/Fuzzy/hqhbosoa/

PS: Replace move() width center() if you want the rect to be moved by its center instead of the upper left edge

[dotnetCarpenter]

It's a very nice example: https://jsfiddle.net/dotnetCarpenter/vceakozz/
Perhaps we should incorporate it into the docs?

@Fuzzyma ~How do get svg.js on jsfiddle without specifying an external resource?~ Ah, wait. I see it (when clicking the JAVASCRIPT cog). Perhaps we should ask them to update to 2.6.1?

[SimoneMSR]

Sorry guys for my greed. But could let the animate of the rect follow animation of the triangle?

I have tried here: https://jsfiddle.net/simone_msr/vceakozz/1/

the rect should still move over the line

[Fuzzyma]

Please specify. Move the rectangle along the triangle while it is rotated OR stay at a specific point of the triangle while it is rotated?

[SimoneMSR]

Sorry: the first one. Move the rectangle along the triangle

[Fuzzyma]

Here you go: https://jsfiddle.net/Fuzzy/vceakozz/3/

Note that in this example we have to wrap pointAt into SVG.Point because that function wrongly returns a native SVGPoint and not SVG.Point

[SimoneMSR]

Look at it! <3

Yes. I think you should add this example to the documentation: it's amazing!

[dotnetCarpenter]

I agree with @SimoneMSR, only I think it should be in steps or the learning curve will be too steep. We should also fix pointAt before we do.

[Fuzzyma]

It is fixed in 3.0 but it is an API break after all. So we cant fix it in 2.0 without breaking code

[dotnetCarpenter]

You're right. We even have that documented.

[SimoneMSR]

I was wandering: is there a way to animate the path and let the rect stay in a fixed point of the path but WITHOUT calling the move function on the rect? (for efficiency reasons)

[Fuzzyma]

Iam not sure what you mean. When the rect is not moving it doesnt need to be moved. However, as soon as a movement is involved you have to - well - move it

That sounds so stupid...

[SimoneMSR]

You are right: it sounds stupid. I make an example to explain.
say i have a group G with some children. It i call G.move G AND its children Will move.
I would like to do the same with an animation. Ad of the two elements were linked somehow.

[Fuzzyma]

Still dont get it :D. Just put the elements you want to animate in a group and animate the group

[SimoneMSR]

Ok, I suspect this is a "word" problem, i.e. a language problem. I try other words:

is there a way to reproduce the exact animation in https://jsfiddle.net/Fuzzy/vceakozz/3/
but without having to call the .move() funcion on the rect?
My ideal code would be
1) path = new Path(); //say a line
2) rect = new Rect();
3) rect.DoSomeMagicAndLINKToPointAt(path, path.pointAt(0)) // the rect moves to the first point of the line
4) path.animate().path(new Path())

what I meant is that after point 4), rect will move in order to stay fixed at the first point of the line, WHEREVER this point will go during the animation. I name the magic function as a "link" function because what I would like to obtain is a linking, or an anchoring...

Hoping.....

[Fuzzyma]

Well you would put both into a group, mobe the rect to the point you want and then rotate the whole group. This way the rect always stays at the same position of the triangle and rotates with the triangle

https://jsfiddle.net/Fuzzy/vceakozz/5/

[SimoneMSR]

That's true. But tha's not what I am triying to do. I woul just animate the single path, trasforming its array of points, and still having the rect fixed to the position of the first point... But I think it's impossible

[Fuzzyma]

So you want one fixed point and the path rotating through this point. Guess that's a bit more complicated

[dotnetCarpenter]

@SimoneMSR Do you want the triangle to rotate around the mouse pointer by any chance?

[SimoneMSR]

Here's what I mean: https://jsfiddle.net/simone_msr/vceakozz/8/

but without the rect.move call within a during function...

[Fuzzyma]

Impossible. You move the rect, so you need to move it

[SimoneMSR]

Ok. Got it.

So I will use you solution... hope not to be too much cpu demanding (when used for undreds of elements)

I am anyway grateful with you all

[dotnetCarpenter]

@SimoneMSR If you need to do this on an HTML page and each animation is a SVG element, you can pause the animation when it's not in the view port - e.g. invisible.

SVG.js uses requestAnimationFrame, so all animations are synchronized to the same reflow/repaint cycle, just as CSS animations and SMIL animations. With hundreds of animations you're bound to find an upper-limit. But you can use element.getBoundingClientRect and scrollY to determine if the element is visible and if not, then use pause().

But do the implementation first and then see. It might not be a real problem. Our calculations are really fast, but it takes time to render in browser land. Fortunately, many browsers composite a page in such a way that it knows what to render and what not to, which saves some SVG computations in your case.
But if you're using a pure SVG page, then I frankly don't know what most browsers do.

[SimoneMSR]

Interesting... I have seen you using that in your solution
I will definitely have a look