import { useAnimation } from '@uhg-abyss/mobile';

Usage

useAnimation hook standardizes the animation types for Abyss components and simplifies additional customization. The hook returns animate, value, interpolations, as well as other Animated functions used throughout Abyss.

export const useAnimation = (value: number, config: AnimationConfig) => {
  ...
  return {
    animate,
    value: animatedValue,
    interpolations,
    createAnimation,
    add,
    subtract,
    multiply,
    divide,
    delay,
    parallel,
    loop,
    sequence,
  };
};

Animate

The animate function requires a toValue be passed in, with the option for overrides and a callback function.

const animate = (
  toValue: number,
  configOverride?: Partial<AnimationConfigType>,
  callback?: Animated.EndCallback
) => {
  return createAnimation(toValue, configOverride).start(callback);
};

Overrides

By default the animation type is set to 'timing'. Additional types supported are 'spring' and 'instant' with the following animation config open to override:

interface AnimationConfig extends BaseAnimationConfig {
  type?: 'spring' | 'timing' | 'instant';
  interpolations?: Record<string, InterpolationConfigType>;
  delay?: number | undefined;
  // timing
  easing?: Easing;
  duration?: number | undefined;
  // spring
  overshootClamping?: boolean | undefined;
  restDisplacementThreshold?: number | undefined;
  restSpeedThreshold?: number | undefined;
  velocity?: number | { x: number, y: number } | undefined;
  bounciness?: number | undefined;
  speed?: number | undefined;
  tension?: number | undefined;
  friction?: number | undefined;
  stiffness?: number | undefined;
  mass?: number | undefined;
  damping?: number | undefined;
}

Interpolations

The interpolations prop can take in multiple interpolation objects to be used on the same animated value.

const { value, animate, interpolations } = useAnimation(1, {
  easing: 'gentle',
  interpolations: {
    backgroundColor: {
      inputRange: [0.95, 1],
      outputRange: [
        '$semantic.color.surface.container.status.info.saturated',
        '$core.color.brand.100',
      ],
      tokenType: 'colors',
    },
    opacity: {
      inputRange: [0.95, 1],
      outputRange: [0, 1],
    },
  },
});

Additional Functionality

Other Animated methods currently used throughout Abyss components can also be returned.

const parallel = (
  animations: Animated.CompositeAnimation[],
  parallelConfig?: Animated.ParallelConfig
) => {
  return Animated.parallel(animations, parallelConfig);
};

const loop = (
  animation: Animated.CompositeAnimation,
  loopConfig?: Animated.LoopAnimationConfig
) => {
  return Animated.loop(animation, loopConfig);
};

const sequence = (animations: Animated.CompositeAnimation[]) => {
  return Animated.sequence(animations);
};

const delay = (time: number) => {
  return Animated.delay(time);
};

const add = (num: number) => {
  return Animated.add(animatedValue, num);
};

const subtract = (num: number) => {
  return Animated.subtract(animatedValue, num);
};

const divide = (num: number) => {
  return Animated.divide(animatedValue, num);
};

const multiply = (num: number) => {
  return Animated.multiply(animatedValue, num);
};

Accessibility Integration

The useAnimation hook has built-in integration with the useReduceMotion hook. This ensures that animated components automatically respect the user's "Reduce Motion" accessibility setting without requiring additional handling.

When "Reduce Motion" is enabled, the useAnimation hook adjusts the animation type to 'instant', minimizing motion effects. This makes it easier to create accessible components that align with user preferences.