Animating relative transforms seems to stop inaccurately

[edemaine]

Bug report

Fiddle

https://jsfiddle.net/edemaine/hatwge2o/12/

Explanation

• What is the behaviour you expect? At the end of an animated transform, the exact transform gets applied.
• What is happening instead? The coordinates seem off. In the fiddle, I'm getting an x transform of 101 instead of 100. In another example I have (more complicated), it stops a little short.

Without relative: true, I don't see the same issue.

[Fuzzyma]

hey @edemaine. Thanks for reporting. That is indeed weird. My guess would be rounding errors which is really annoying.
I am quite short on time right now but will try to have a look somewhere this month. Feel free to ping me if it takes longer!

[edemaine]

Thanks! I agree, it looks like rounding errors. A minimal fix would be to use the original transform at the end of the animation. (In my case the error ends up around one pixel, so it wouldn't be a big jump at the end.) But it should also be possible to do the interpolation correctly (always computing it as a factor of the original trandform) instead of an accumulation of the deltas... Happy to help, especially if you can point me to tbe relevant code.

[Fuzzyma]

Yeah thats why I am confused because we usually do always use the original numbers. However, since its relative, we have to decompose the matrix to apply the new affine transforms at some point and I think thats where the error might come in.
The transform animations are by far the worst to reason about in the svg.js codebase. So I dont want to but that on you.
If you really wanna do the digging, the Runner class is a good starting poingt I think:

svg.js/src/animation/Runner.js

Lines 776 to 890 in 5e92131

	transform(transforms, relative, affine) {
	// If we have a declarative function, we should retarget it if possible
	relative = transforms.relative || relative
	if (
	this._isDeclarative &&
	!relative &&
	this._tryRetarget('transform', transforms)
	) {
	return this
	}
	// Parse the parameters
	const isMatrix = Matrix.isMatrixLike(transforms)
	affine =
	transforms.affine != null
	? transforms.affine
	: affine != null
	? affine
	: !isMatrix
	// Create a morpher and set its type
	const morpher = new Morphable(this._stepper).type(
	affine ? TransformBag : Matrix
	)
	let origin
	let element
	let current
	let currentAngle
	let startTransform
	function setup() {
	// make sure element and origin is defined
	element = element || this.element()
	origin = origin || getOrigin(transforms, element)
	startTransform = new Matrix(relative ? undefined : element)
	// add the runner to the element so it can merge transformations
	element._addRunner(this)
	// Deactivate all transforms that have run so far if we are absolute
	if (!relative) {
	element._clearTransformRunnersBefore(this)
	}
	}
	function run(pos) {
	// clear all other transforms before this in case something is saved
	// on this runner. We are absolute. We dont need these!
	if (!relative) this.clearTransform()
	const { x, y } = new Point(origin).transform(
	element._currentTransform(this)
	)
	let target = new Matrix({ ...transforms, origin: [x, y] })
	let start = this._isDeclarative && current ? current : startTransform
	if (affine) {
	target = target.decompose(x, y)
	start = start.decompose(x, y)
	// Get the current and target angle as it was set
	const rTarget = target.rotate
	const rCurrent = start.rotate
	// Figure out the shortest path to rotate directly
	const possibilities = [rTarget - 360, rTarget, rTarget + 360]
	const distances = possibilities.map((a) => Math.abs(a - rCurrent))
	const shortest = Math.min(...distances)
	const index = distances.indexOf(shortest)
	target.rotate = possibilities[index]
	}
	if (relative) {
	// we have to be careful here not to overwrite the rotation
	// with the rotate method of Matrix
	if (!isMatrix) {
	target.rotate = transforms.rotate || 0
	}
	if (this._isDeclarative && currentAngle) {
	start.rotate = currentAngle
	}
	}
	morpher.from(start)
	morpher.to(target)
	const affineParameters = morpher.at(pos)
	currentAngle = affineParameters.rotate
	current = new Matrix(affineParameters)
	this.addTransform(current)
	element._addRunner(this)
	return morpher.done()
	}
	function retarget(newTransforms) {
	// only get a new origin if it changed since the last call
	if (
	(newTransforms.origin || 'center').toString() !==
	(transforms.origin || 'center').toString()
	) {
	origin = getOrigin(newTransforms, element)
	}
	// overwrite the old transformations with the new ones
	transforms = { ...newTransforms, origin }
	}
	this.queue(setup, run, retarget, true)
	this._isDeclarative && this._rememberMorpher('transform', morpher)
	return this
	},