feat: arc tween ratio

src/animations/surfaceTransition.ts

@@ -1,5 +1,6 @@
 import {Surface} from '../components';
 import {
+  calculateRatio,
   clampRemap,
   colorTween,
   easeInOutCubic,
@@ -57,6 +58,9 @@ export function surfaceTransition(fromSurfaceOriginal: Surface) {
       y: toPos.y + toDelta.y,
     };
 
+    const ratio =
+      (calculateRatio(fromNewPos, toPos) + calculateRatio(from, to)) / 2;
+
     target.hide();
 
     config.onSurfaceChange?.(fromSurface);
@@ -72,7 +76,13 @@ export function surfaceTransition(fromSurfaceOriginal: Surface) {
 
         target.setMask({
           ...from,
-          ...rectArcTween(from, to, easeInOutQuint(value), config.reverse),
+          ...rectArcTween(
+            from,
+            to,
+            easeInOutQuint(value),
+            config.reverse,
+            ratio,
+          ),
           radius: easeInOutCubic(value, from.radius, target.radius()),
           color: colorTween(
             from.color,
@@ -86,6 +96,7 @@ export function surfaceTransition(fromSurfaceOriginal: Surface) {
             toPos,
             easeInOutQuint(value),
             config.reverse,
+            ratio,
           ),
         );
         if (!config.onToOpacityChange?.(target, value, relativeValue)) {
@@ -100,7 +111,13 @@ export function surfaceTransition(fromSurfaceOriginal: Surface) {
         relativeValue = clampRemap(0, transitionTime, 1, 0, value);
         fromSurface.setMask({
           ...from,
-          ...rectArcTween(from, to, easeInOutQuint(value), config.reverse),
+          ...rectArcTween(
+            from,
+            to,
+            easeInOutQuint(value),
+            config.reverse,
+            ratio,
+          ),
           radius: easeInOutCubic(value, from.radius, target.radius()),
           color: colorTween(
             from.color,
@@ -114,6 +131,7 @@ export function surfaceTransition(fromSurfaceOriginal: Surface) {
             toNewPos,
             easeInOutQuint(value),
             config.reverse,
+            ratio,
           ),
         );
 

src/tweening/tweenFunctions.ts

@@ -68,10 +68,22 @@ export function rectArcTween(
   to: Partial<IRect>,
   value: number,
   reverse?: boolean,
+  ratio?: number,
 ) {
-  value = map(0, Math.PI / 2, value);
-  let xValue = Math.sin(value);
-  let yValue = 1 - Math.cos(value);
+  ratio ??= calculateRatio(from, to);
+
+  let flip = reverse;
+  if (ratio > 1) {
+    ratio = 1 / ratio;
+  } else {
+    flip = !flip;
+  }
+
+  const normalized = flip ? Math.acos(1 - value) : Math.asin(value);
+  const radians = map(normalized, map(0, Math.PI / 2, value), ratio);
+
+  let xValue = Math.sin(radians);
+  let yValue = 1 - Math.cos(radians);
   if (reverse) {
     [xValue, yValue] = [yValue, xValue];
   }
@@ -84,6 +96,25 @@ export function rectArcTween(
   };
 }
 
+export function calculateRatio(from: Partial<IRect>, to: Partial<IRect>): number {
+  let numberOfValues = 0;
+  let ratio = 0;
+  if(from.x) {
+    ratio += Math.abs((from.x - to.x) / (from.y - to.y));
+    numberOfValues++;
+  }
+  if (from.width) {
+    ratio += Math.abs((from.width - to.width) / (from.height - to.height));
+    numberOfValues ++;
+  }
+
+  if (numberOfValues) {
+    ratio /= numberOfValues;
+  }
+
+  return ratio;
+}
+
 export function map(from: number, to: number, value: number) {
   return from + (to - from) * value;
 }