adding spring easing

lukasoppermann · Jun 29, 2022 · 8e0c595 · 8e0c595
1 parent ca9af6f
commit 8e0c595
Show file tree

Hide file tree

Showing 15 changed files with 767 additions and 258 deletions.
diff --git a/src/extractor/extractMotion.ts b/src/extractor/extractMotion.ts
@@ -1,5 +1,5 @@
 import extractorInterface from '@typings/extractorInterface'
-import { motionPropertyInterface, easingPropertyInterface } from '@typings/propertyObject'
+import { motionPropertyInterface, easingPropertyInterface, easingCurveType } from '@typings/propertyObject'
 import { customTokenNode, nodeWithNodeTransition } from '@typings/tokenNodeTypes'
 import { UnitTypeSeconds, PropertyType } from '@typings/valueTypes'
 import { tokenTypes } from '@config/tokenTypes'
@@ -21,10 +21,19 @@ const direction = (transition: Transition): {} | null => {
 
 const easings = {
   CUSTOM_CUBIC_BEZIER: {
+    type: 'custom-cubicBezier',
+    curveType: 'cubicBezier',
+    easing: undefined
+  },
+  CUSTOM_SPRING: {
+    type: 'custom-spring',
+    curveType: 'spring',
+    easing: undefined
   },
   LINEAR: {
     type: 'linear',
-    easingFunctionCubicBezier: {
+    curveType: 'cubicBezier' as easingCurveType,
+    easing: {
       x1: 0,
       y1: 0,
       x2: 1,
@@ -33,7 +42,8 @@ const easings = {
   },
   EASE_IN: {
     type: 'ease-in',
-    easingFunctionCubicBezier: {
+    curveType: 'cubicBezier' as easingCurveType,
+    easing: {
       x1: 0.41999998688697815,
       y1: 0,
       x2: 1,
@@ -42,7 +52,8 @@ const easings = {
   },
   EASE_OUT: {
     type: 'ease-out',
-    easingFunctionCubicBezier: {
+    curveType: 'cubicBezier' as easingCurveType,
+    easing: {
       x1: 0,
       y1: 0,
       x2: 0.5799999833106995,
@@ -51,7 +62,8 @@ const easings = {
   },
   EASE_IN_AND_OUT: {
     type: 'ease-in-out',
-    easingFunctionCubicBezier: {
+    curveType: 'cubicBezier' as easingCurveType,
+    easing: {
       x1: 0.41999998688697815,
       y1: 0,
       x2: 0.5799999833106995,
@@ -60,7 +72,8 @@ const easings = {
   },
   EASE_IN_BACK: {
     type: 'ease-in-back',
-    easingFunctionCubicBezier: {
+    curveType: 'cubicBezier' as easingCurveType,
+    easing: {
       x1: 0.30000001192092896,
       y1: -0.05000000074505806,
       x2: 0.699999988079071,
@@ -69,7 +82,8 @@ const easings = {
   },
   EASE_OUT_BACK: {
     type: 'ease-out-back',
-    easingFunctionCubicBezier: {
+    curveType: 'cubicBezier' as easingCurveType,
+    easing: {
       x1: 0.44999998807907104,
       y1: 1.4500000476837158,
       x2: 0.800000011920929,
@@ -78,67 +92,140 @@ const easings = {
   },
   EASE_IN_AND_OUT_BACK: {
     type: 'ease-in-out-back',
-    easingFunctionCubicBezier: {
+    curveType: 'cubicBezier' as easingCurveType,
+    easing: {
       x1: 0.699999988079071,
       y1: -0.4000000059604645,
       x2: 0.4000000059604645,
       y2: 1.399999976158142
     }
+  },
+  BOUNCY: {
+    type: 'bouncy',
+    curveType: 'spring' as easingCurveType,
+    easing: {
+      mass: 1,
+      stiffness: 600,
+      damping: 15
+    }
+  },
+  GENTLE: {
+    type: 'gentle',
+    curveType: 'spring',
+    easing: {
+      mass: 1,
+      stiffness: 100,
+      damping: 15
+    }
+  },
+  QUICK: {
+    type: 'quick',
+    curveType: 'spring',
+    easing: {
+      mass: 1,
+      stiffness: 300,
+      damping: 20
+    }
+  },
+  SLOW: {
+    type: 'slow',
+    curveType: 'spring',
+    easing: {
+      mass: 1,
+      stiffness: 80,
+      damping: 20
+    }
   }
 }
 
-const validEasingTypes = Object.keys(easings)
-
-const easing = (easing: Easing): easingPropertyInterface => {
-  // abort if invalif easing type
-  if (!('type' in easing) || easings[easing.type] === undefined) {
-    return undefined
-  }
-  // return custom easing
-  if (easing.type === 'CUSTOM_CUBIC_BEZIER') {
-    easings.CUSTOM_CUBIC_BEZIER = {
-      type: 'cubic-bezier',
-      easingFunctionCubicBezier: {
-        x1: easing.easingFunctionCubicBezier.x1,
-        y1: easing.easingFunctionCubicBezier.y1,
-        x2: easing.easingFunctionCubicBezier.x2,
-        y2: easing.easingFunctionCubicBezier.y2
+const formatEasingFunction = easingObject => {
+  // spring curve
+  if (easingObject.curveType === 'spring') {
+    return {
+      mass: {
+        value: easingObject.easing.mass,
+        type: 'number' as PropertyType
+      },
+      stiffness: {
+        value: easingObject.easing.stiffness,
+        type: 'number' as PropertyType
+      },
+      damping: {
+        value: easingObject.easing.damping,
+        type: 'number' as PropertyType
       }
     }
   }
-
-  return {
-    easing: {
-      // @ts-ignore
-      value: easings[easing.type].type,
-      type: 'string' as PropertyType
-    },
-    easingFunction: {
+  // spring bezier
+  if (easingObject.curveType === 'cubicBezier') {
+    return {
       x1: {
         // @ts-ignore
-        value: easings[easing.type].easingFunctionCubicBezier.x1,
+        value: easingObject.easing.x1,
         type: 'number' as PropertyType
       },
       x2: {
         // @ts-ignore
-        value: easings[easing.type].easingFunctionCubicBezier.x2,
+        value: easingObject.easing.x2,
         type: 'number' as PropertyType
       },
       y1: {
         // @ts-ignore
-        value: easings[easing.type].easingFunctionCubicBezier.y1,
+        value: easingObject.easing.y1,
         type: 'number' as PropertyType
       },
       y2: {
         // @ts-ignore
-        value: easings[easing.type].easingFunctionCubicBezier.y2,
+        value: easingObject.easing.y2,
         type: 'number' as PropertyType
       }
     }
   }
 }
 
+const easing = (easing: Easing): easingPropertyInterface => {
+  // abort if invalif easing type
+  if (!('type' in easing) || easings[easing.type] === undefined) {
+    return undefined
+  }
+  // return custom easing
+  if (easing.type === 'CUSTOM_CUBIC_BEZIER') {
+    // @ts-ignore
+    easings.CUSTOM_CUBIC_BEZIER.easing = {
+      x1: easing.easingFunctionCubicBezier.x1,
+      y1: easing.easingFunctionCubicBezier.y1,
+      x2: easing.easingFunctionCubicBezier.x2,
+      y2: easing.easingFunctionCubicBezier.y2
+    }
+  }
+  // TODO: remove when figma typings are updated
+  // @ts-ignore
+  if (easing.type === 'CUSTOM_SPRING') {
+    // @ts-ignore
+    easings.CUSTOM_SPRING.easing = {
+      // @ts-ignore
+      mass: easing.easingFunctionSpring.mass,
+      // @ts-ignore
+      stiffness: easing.easingFunctionSpring.stiffness,
+      // @ts-ignore
+      damping: easing.easingFunctionSpring.damping
+    }
+  }
+  return {
+    easingType: {
+      value: easings[easing.type].type,
+      type: 'string' as PropertyType
+    },
+    easingCurveType: {
+      value: easings[easing.type].curveType as easingCurveType,
+      type: 'string' as PropertyType
+    },
+    easingFunction: formatEasingFunction(easings[easing.type])
+  }
+}
 const filterValidMotionTokens = (node: customTokenNode) => {
+  const validEasingTypes = Object.keys(easings)
+  // @ts-ignore
   if (node.reactions.length > 0 && node.reactions[0].action?.type === 'NODE' && node.reactions[0].action.transition !== null && validEasingTypes.includes(node.reactions[0].action.transition.easing.type)) {
     return true
   }

diff --git a/src/transformer/originalFormatTransformer.ts b/src/transformer/originalFormatTransformer.ts
@@ -142,27 +142,10 @@ const motionValueTransformer = (values) => {
       : {}
     ),
     easing: {
-      value: values.easing.value,
+      value: values.easingType.value.replace('cubicBezier', 'cubic-bezier'),
       type: 'string' as PropertyType
     },
-    easingFunction: {
-      x1: {
-        value: values.easingFunction.x1.value,
-        type: 'number' as PropertyType
-      },
-      x2: {
-        value: values.easingFunction.x2.value,
-        type: 'number' as PropertyType
-      },
-      y1: {
-        value: values.easingFunction.y1.value,
-        type: 'number' as PropertyType
-      },
-      y2: {
-        value: values.easingFunction.y2.value,
-        type: 'number' as PropertyType
-      }
-    }
+    easingFunction: values.easingFunction
   }
 }
 

diff --git a/src/transformer/standardTransformer.ts b/src/transformer/standardTransformer.ts
@@ -229,12 +229,13 @@ const motionValueTransformer = ({ values }): StandardTokenDataInterface => ({
     transitionType: values.transitionType.value,
     duration: values.duration.value,
     ...(values.direction ? { direction: values.direction.value } : {}),
-    easingFunction: {
-      x1: values.easingFunction.x1.value,
-      x2: values.easingFunction.x2.value,
-      y1: values.easingFunction.y1.value,
-      y2: values.easingFunction.y2.value
-    }
+    easingType: values.easingCurveType.value,
+    easingFunction: Object.fromEntries(
+      Object.entries(values.easingFunction).map(prop => {
+        // @ts-ignore
+        return [prop[0], prop[1].value]
+      }
+      ))
   }
 })