Animations, left-handed support and rework

[phisch]

This PR contains the start of a significant rework to make the code more readable and maintainable. It also includes a first draft for animations created by the build system through an animation syntax, and support to automatically generate left-handed variants.

Edit: also, this is very work in progress

[phisch]

The current way of grabbing the animation frames does not seem to be safe enough. I have had a short conversation about this with the maintainer of https://github.com/svgdotjs/svg.js, but it's currently unclear how to safely grab animation frames from an orchestrated animation.

As much as I want this feature, I can't commit this knowing there could be dropped frames in animations.

So the animation feature is on pause until I either fully understand how svg.js handles animations and I found a way to use it securely, or I fully implemented my own animation system using svg.js just to manipulate the svgs accordingly. Hopefully I'll hear back from @Fuzzyma so I don't have to work myself into the svg.js codebase.

[Fuzzyma]

@phisch Sorry, it took a while. Turned out your code was completely fine but transformations have a lot of special handling when it comes to animations (basically the whole merging of transformations from different animations and blabla).

Long story short: The only stuff which is not applied after runner.step() are transforms because they wait for the next frame (and all other potential animations) so that they can get correctly merged. So we basically have to do the extraction ourselves.
For your use case this code should do it: https://codepen.io/fuzzyma/pen/mdpZJxv?editors=1111

// This is the extracted part for merging the transformations. Unfortunately its not exported
const lmultiply = (last, curr) => last.lmultiplyO(curr)
const getRunnerTransform = (runner) => runner.transforms

function mergeTransforms () {
  // Find the matrix to apply to the element and apply it
  const runners = this._transformationRunners.runners
  const netTransform = runners
    .map(getRunnerTransform)
    .reduce(lmultiply, new SVG.Matrix())

  this.transform(netTransform)

  this._transformationRunners.merge()

  if (this._transformationRunners.length() === 1) {
    this._frameId = null
  }
}

// And that's the code for getting the SVG code
const image = SVG().addTo('body');
const rect = image.rect(50,50)
const runner = new SVG.Runner(1000).rotate(360);
runner.element(rect)
for (let i = 0; i < 40; i += 1) {
  runner.step(10)
  mergeTransforms.call(rect)
  console.log(image.svg());
}

Hope it helps and resolves your issues :)

[phisch]

@Fuzzyma Thanks a lot for the explanation and example!

I'll play around with it as soon as I can and will continue the work on this PR. Animated disco cursors aren't dead yet :)

[phisch]

Just as a short follow-up:
I store all elements that are animated, and then merge their transforms after each step. The transforms seem to be applied correctly now, and there is no more need for the hacky requestAnimationFrame. This surely still is kind of a hack, but one I can live with, since it is predictable.

Thanks again for the explanation. Now it's up to me to clean my code and get this new animation system and some other features production ready.

[Fuzzyma]

Yes, that is the best you can get I guess. This is really just needed because the code "waits" for other non-async code to add more transformations to the same element. Since you can animate the same element with different animations and every animation can change the transform, its important to apply all transformations in the correct order. Thats why we had to make sure that all animations for a frame are finished before applying the transformation.

So: If you wouldn't have used transforms, it would have worked directly :D