feat: add "config.step" prop

packages/core/src/Controller.ts

@@ -645,15 +645,16 @@ export class Controller<State extends Indexable = any> {
           animated,
           animatedValues: Array.from(animated.getPayload()),
           immediate,
-          duration: config.duration,
-          easing: withDefault(config.easing, linear),
-          decay: config.decay,
           mass: withDefault(config.mass, 1),
           tension: withDefault(config.tension, 170),
           friction: withDefault(config.friction, 26),
           initialVelocity: withDefault(config.velocity, 0),
           clamp: withDefault(config.clamp, false),
           precision: withDefault(config.precision, 0.005),
+          step: config.step,
+          decay: config.decay,
+          duration: config.duration,
+          easing: withDefault(config.easing, linear),
           config,
         }
       }

packages/core/src/FrameLoop.ts

@@ -212,8 +212,9 @@ export class FrameLoop {
         active = true
       }
 
-      animated.setValue(position)
-      animated.lastPosition = position
+      const roundPosition = roundToStep(position, config.step)
+      animated.setValue(roundPosition)
+      animated.lastPosition = animated.done ? roundPosition : position
     }
 
     if (changes && changed) {
@@ -223,3 +224,23 @@ export class FrameLoop {
     return active
   }
 }
+
+function roundToStep(n: number, step?: number) {
+  if (step) {
+    n = Math.round(n / step) * step
+    const p = getPrecision(step)
+    if (p) {
+      const q = Math.pow(10, p)
+      return Math.round(q * n + q / 1e16) / q
+    }
+  }
+  return n
+}
+
+function getPrecision(n: number) {
+  if (n % 1) {
+    const s = String(n)
+    return s.length - s.indexOf('.') - 1
+  }
+  return 0
+}

packages/core/src/types/spring.ts

@@ -99,7 +99,7 @@ export interface SpringConfig {
   velocity?: number
   clamp?: boolean
   precision?: number
-  delay?: number
+  step?: number
   decay?: number | boolean
   duration?: number
   easing?: EasingFunction

targets/web/src/animated.ts

@@ -1,8 +1,15 @@
 import { withAnimated, extendAnimated } from '@react-spring/animated'
 import { CSSProperties, ForwardRefExoticComponent } from 'react'
-import { SpringValue, ElementType, ComponentPropsWithRef, Merge } from 'shared'
+import { SpringValue, ElementType, Merge } from 'shared'
 import { elements, JSXElements } from './elements'
 
+// Avoid https://github.com/microsoft/TypeScript/issues/29949
+type ComponentPropsWithRef<
+  T extends ElementType
+> = T extends React.ComponentClass<infer P>
+  ? React.PropsWithoutRef<P> & { ref?: any }
+  : React.PropsWithRef<React.ComponentProps<T>>
+
 type DOMComponents = {
   [Tag in JSXElements]: AnimatedComponent<Tag>
 }
@@ -23,10 +30,12 @@ export { animated as a }
 export type AnimatedComponent<
   T extends ElementType
 > = ForwardRefExoticComponent<
-  AnimatedProps<Merge<ComponentPropsWithRef<T>, { style?: StyleProps }>> & {
-    scrollTop?: SpringValue<number> | number
-    scrollLeft?: SpringValue<number> | number
-  }
+  AnimatedProps<
+    Merge<
+      ComponentPropsWithRef<T>,
+      { style?: StyleProps; scrollTop?: number; scrollLeft?: number }
+    >
+  >
 >
 
 /** The props of an `animated()` component */