Added a potential fix for the problem

diff --git a/dirty.html b/dirty.html
index 3eadb0e69a272f44f5b32d9c649b0d4320b1f1b0..5e6e6e1892d53ae4a8264a76150d6b164096a357 100644 (file)
--- a/dirty.html
+++ b/dirty.html
@@ -218,11 +218,11 @@ a.timeline().source(() => {
 })
 
 
-let obj = { rotate: 90, shear:2, origin: [600, 600], translate: [100, 100] }
+let obj = { rotate: 100, shear:2, origin: [600, 600], translate: [100, 100] }
 
 a.clone() // startPosition
 a.clone().transform(obj) // endPosition
-a.animate(new SVG.PID(0.1, 0.1)).transform(obj) // animation
+a.animate(new SVG.Spring(50, 30)).transform(obj) // animation
 
 
 // Put an ellipse where we expect the object to be

diff --git a/src/matrix.js b/src/matrix.js
index 05e9c7d96bfb208434a025459f4d4405fb9dcd0d..439681626bf3949248a0979fce55ea3dba2a913f 100644 (file)
--- a/src/matrix.js
+++ b/src/matrix.js
@@ -129,6 +129,7 @@ SVG.Matrix = SVG.invent({
       var lam = (a * c + b * d) / determinant
       var sy = ((c * sx) / (lam * a - b)) || ((d * sx) / (lam * b + a))
 
+      // Use the translations
       let tx = e - cx + cx * ct * sx + cy * (lam * ct * sx - st * sy)
       let ty = f - cy + cx * st * sx + cy * (lam * st * sx + ct * sy)
 

diff --git a/src/runner.js b/src/runner.js
index 963f31b44c4a9feab6d877d22927bb8aa45cbef1..4c9dda29285082153edcb2b94438ebf844cdb4a8 100644 (file)
--- a/src/runner.js
+++ b/src/runner.js
@@ -700,6 +700,13 @@ SVG.extend(SVG.Runner, {
       }
 
       // FIXME: correct the rotation so that it takes the shortest path
+      // GIVE ME (rCurrent) (rTarget) - to store the current/target angle
+      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)
+      const target = possibilities[index]
+
 
       morpher.from(startMatrix)
     }, function (pos) {