search

bupaverse / processanimateR

Token replay animation for process maps created with processmapR by using SVG animations (SMIL) and the htmlwidget package.
https://bupaverse.github.io/processanimateR/
Other
66 stars 11 forks source link

Lag when token dissapear at the end #19

Open serkserk opened 5 years ago

serkserk commented 5 years ago

Hello,

It seems that every time a token reach the end node and dissapear, it cause a lag in the animation (you can see it here https://bupaverse.github.io/processanimateR/example/processanimateR-banner.html, it's very smooth until a token reach the end)

I tried looking at the code but I have no idea how the svg animation part work :/

Edit: it seems to be only an issue with chrome, it work fine on Firefox/IE/Edge

fmannhardt commented 5 years ago

I cannot reproduce this on my machine in Chrome. What may cause this is that at the end of each case the token is hidden by changing the display property, which may cause some kind of re-draw in the Chrome rendering engine. Just moving the token around can theoretically be accelerated as this is just a translation of the rendering position of the element.

I think for the next generation of this project, I will look for alternatives to the SVG SMIL based animation. It seemed like a nice idea back when I started since it is very generic, but it definitely has limits regarding performance and it is not actively continued by the browser vendors anymore (https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5o0yiO440LM%5B126-150%5D).

However, CSS3 does not yet have the out-of-box capability to move shapes along a path - at least the last time I looked at it. Another alternative would be to use some rendering engine based on HTML5 Canvas and drop having each token being a DOM element with all the advantages and disadvantages.